Getting a jQuery/Javascript Gallery Up and Running

This post will cover the basics of getting a jQuery/Javascript based image gallery into any site. Its not a difficult process it just takes some time to understand how things work and how they work together to achieve the desired effect.

Step 1: Find a gallery plugin that you want to use for your site. It is usually best to find one with a lot of good support documentation so that if you hit a snag you can read through it to figure out what might have gone wrong.

FancyBox is one option, there are many, many others.

http://fancybox.net/

Step 2: Once you have made your choice download the .zip that is provided on the site of your plugin. There is usually a download link/option somewhere on the site.

Step 3: Now that you have your .zip downloaded unzip it with any extracting tool either on Windows or Mac. Look through the folder and there should be several folders and files that make the plugin run.

These will include, jQuery libraries, CSS files, HTML files, and Javascript files for running the plugin.

Step 4: It is usually best to copy the file structure that the developers have set up, so just copy the folders from the extracted .zip into your own main folder.

Directory

Step 5: Now there is usually a demo HTML file in the .zip that shows the plugin in action and is used to make sure its working. Open this file in any HTML editor and look through it. There will be a lot of referenced files in the head of the document. These point to the CSS, jQuery, and Javascript files that make the plugin work. Copy these references into the head of your document. There will also be a long chunk of Javascript in the head as well, it will contain $ symbols in the code so look for those as indicators of Javascript. Copy all this into your HTML document too.

Code

Step 6: Now look in the demo HTML for a div containing image links. These links will have IDs associated with the plugin you have downloaded. This is how the plugin knows what images to display in the gallery. Copy them into the div you have set up for your images, and replace the href links with the links of images you want to display with the plugin.

ImageLinks

Step 7: Load your HTML document into a browser Chrome, Safari, Firefox etc. To make sure it works. If you click an image and it doesn’t display properly there is a good chance you haven’t copied a file/code correctly into your document. Go back and check that all the links, references, and files are there so the plugin works correctly. This part may take a lot of trial and error but it will work as long as all the proper files and code is in your document.

Step 8: Celebrate! You got a plugin into your site!