How To Install a Gallery (JQUERY AND JAVASCRIPT)

I, a beginner coder, thought that in order to have a jquery and javascript gallery on my website I would have to completely code it myself and construct it. So, I started tutorials and tried to piece together a professional looking gallery.


Good news: you don’t have to do that. There are many galleries available for sale and open source that developers can use in their websites.




To find them, locate a jquery gallery that you find appealing. You can do this by googling open source jquery galleries.


Explore! When you find the one you want, you may be able to download it directly from the site. If not, google the one you have chosen. I chose Lightbox 2 and found the developer’s site.




Now, download the library. Depending on the site you choose, the placement of the buttons will be different. Also, this specific site asks you to unzip the files. Macs automatically unzip compressed files.


Note how there isn’t just one file being downloaded. There are CSS FILES, IMAGES, JAVASCRIPT FILES, and a sample html document. You don’t have to use the index.html BUT you have to use the other files for the whole system to work.


For the sake of this example, I am going to use what I put on my website. Once I download the files, I need to do a few things.




Drag and drop (or copy) these files into your site folder. Note: Do not take them out of the folder. Copy them as they are exactly so that you can maintain the relative pathways between the files.


On your HTML5 document in which you want the gallery put, make links to these sheets.

 Notice that there are two links to the scripts and there’s another for a light box CSS sheet. The last link is for my personal styling sheet throughout the whole site.





This is the first picture from my gallery of multiple pictures. From basic CSS and HTML5, you should recognize the class and href. Depending on the css styling and labeling, the class will differ. You can find this information by looking in the css sheet. 

Note: you can always change the class labels to what you want if you keep it continuous throughout all of the documents that comprise the gallery.

 Data-lightbox activates the lightbox. This class can be anything. If you make it the same as multiple pictures, then you will have a gallery.  If you denote each photo differently using different classes, you will get separate galleries.


Don’t forget to close the divs.   

Questions? Feel free to comment! 


~ by cs3309 on March 5, 2014.

%d bloggers like this: