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.
FINDING A GALLERY
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.
DOWNLOAD THE LIBRARY FILES
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.
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.
IMPLEMENT THE LIBRARY
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.
PUTTING IN IMAGES
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!