Creating photo gallery using jQuery and VisualLightBox

Creating photo gallery using jQuery and VisualLightBox

Today I will tell you about one useful JQuery plugin – VisualLightBox.
This plugin can help you to create good-looking galleries. And this is very easy to implement.

Here is a sample:

Live Demo

download in package

---

Ok, download the example files and lets start coding !

---

Step 1. HTML

Here are source code (index.html) of our gallery.

<div id="vlightbox">
    <a id="firstImage" title="image 1" href="images/pic1.jpg" class="vlightbox"><img alt="image 1" src="images/pic1.jpg" /></a>
    <a title="image 2" href="images/pic2.jpg" class="vlightbox"><img alt="image 2" src="images/pic2.jpg" /></a>
    <a title="image 3" href="images/pic3.jpg" class="vlightbox"><img alt="image 3" src="images/pic3.jpg" /></a>
    <a title="image 4" href="images/pic4.jpg" class="vlightbox"><img alt="image 4" src="images/pic4.jpg" /></a>
    <a title="image 5" href="images/pic5.jpg" class="vlightbox vlightbox_hidden"><img alt="image 5" src="images/pic5.jpg" /></a>
</div>
<script type="text/javascript">
    var $VisualLightBoxParams$ = {autoPlay:true,borderSize:21,enableSlideshow:true,overlayOpacity:0.4,startZoom:true};
</script>
<script type="text/javascript" src="visuallightbox.js"></script>

Here are few notes when we filling array of objects:
a. All our images which we going to show in gallery I put in ‘images’ folder. And set names of image as ‘pic1.jpg’, ‘pic2.jpg’ .. ‘pic5.jpg’. You can call your own images as you wish.
b. ID of first A tag will ‘firstImage’.
c. If we going to hide all following images at page we can set additional class for A tag – ‘vlightbox_hidden’.
d. After array of objects I put some JS code. This is just initialization of VisualLightBox library. You can play with params as you wish. This is not so difficult.

---

Step 2. CSS

Here are used CSS styles.

visuallightbox.css – I decided to not include this file in post itself (this file not so small, and commonly – it contain styles just for gallery). It always available as a download package

vlightbox.css

#vlightbox { width:680px;height:355px; }
#vlightbox span{ display:block; }
#vlightbox a{ display:block; float:left;width:310px; height:155px; margin:3px 1px; padding:6px; border:solid 1px #b8b8b8;
background-color:#f4f5f5;opacity:0.87; }
#vlightbox a img{ display:block; border:none; margin:0px; }
#vlightbox a:hover{ opacity:1; }
#vlightbox a.vlightbox_hidden{ display:none; }
#vlightbox a img { border:medium none; margin:0 auto;width:310px; height:155px; }

---

Step 3. JQuery

Current sample contain jquery.js library and visuallightbox.js. I don`t included source codes of these libraries in post. It always available as a download package

---

Step 4. Images

Also we need several images for our project:

---

Live Demo

download in package

---

Conclusion

Today I told you how to display sets of images as gallery using jQuery and VisualLightBox plugin at your own website. Hope all my code easy to understand and comfortable to use. You can use this material to create own scripts into your startups. Good luck!

About: Aramis: Web Developer and Module Developer for online web applications. Have great experience with Dolphin CMS.

Related posts:

1. Jquery CSS Tutorial on Zooming Image

Tags: html, image, jQuery, tutorial, VisualLightBox