Image gallery on a website is a popular trend because it adds up extra beauty. In case of photography and travel related websites, image gallery has no alternative. If your website has some photos to be displayed for your visitors, image gallery is the way to go. You can design such an image gallery anyway you want but designing image gallery using Lightbox jQuery plugin makes it easier for you. It has a default design that you can use or you can style it in the code. Lightbox saves your time and effort providing a great looking image gallery at the same time.
In a previous article, we introduced some of the free image gallery plugins. Today we will show how you can create an image gallery using Lightbox jQuery plugin in just three simple steps. Follow each step carefully.
Creating an Image Gallery using Lightbox
Shaping an image gallery using Lightbox is very simple. You will not have any trouble if you go through our instructions. First of all, let me describe what we need for that
- Custom HTML and CSS file
- Images in two different sizes
- jQuery Lightbox image gallery plugin
Step 1:
Every photo you will use in your design has two different sizes. Design your gallery with smaller size photos. Style them any way you want. When you have designed the gallery, wrap each photo with an anchor tag and place bigger high-resolution photos in their src. Bigger photos are the photos which will appear in modal upon clicking on them individually. Just like the codes below.
<a href="/images/im0101.png" > <img src="/images/im01.png" alt=""></a> <a href="/images/im0202.png" > <img src="/images/im02.png" alt=""></a> <a href="/images/im0303.png" > <img src="/images/im03.png" alt=""></a> <a href="/images/im0404.png" > <img src="/images/im04.png" alt=""></a>
Step 2:
All of your images are wrapped in links redirecting to their high-resolution ones. Now you need to use Lightbox for modal window behavior. Go to this link to download Lightbox. Unzip the file and find lightbox.css and lightbox.js file.
Include the CSS file at the top of your page in your <head> tag
<link href="/css/lightbox.css" rel="stylesheet">
and Include the Javascript at the bottom of your page just before the closing </body> tag.
<script src="/js/lightbox.js"></script>
Be sure that the four images loaded by lightbox.css are in the correct locations. Check the path in the lightbox.css file. Make changes if they are not in the right paths.
Step 3:
Now you need to add data-lightbox attributes to the images you want to have modal behavior upon clicking on them. You can either use a unique name for each of the images or group some of them with a name.
Unique
<a href="/images/im0101.png" data-lightbox="image01" data-title="Jack"> <img src="/images/im01.png" alt=""></a>
Group
<a href="/images/im0101.png" data-lightbox="vacation" data-title="Jack"> <img src="/images/im01.png" alt=""></a> <a href="/images/im0202.png" data-lightbox="vacation" data-title="Dave"> <img src="/images/im02.png" alt=""></a> <a href="/images/im0303.png" data-lightbox="vacation" data-title="robbert"> <img src="/images/im03.png" alt=""></a> <a href="/images/im0404.png" data-lightbox="vacation" data-title="Mgreen"> <img src="/images/im04.png" alt=""></a>
You also can add a caption at the bottom of the image just by adding data-title attribute in that particular image.
<a href="/images/im0404.png" data-lightbox="image01" data-title="Mgreen"> <img src="/images/im04.png" alt=""></a>
Check the demo of the similar Lightbox image gallery you are going to create.
You are done with your Lightbox image gallery. Make any changes you want but make sure you follow all the processes. If you have gone through our instructions, you are quite capable of making any such Lightbox image gallery. It’s very simple and you did it. Bingo!
Leave a Reply