Creating photo gallery using jQuery and VisualLightBox

Creating photo gallery using jQuery and VisualLightBox

2 76
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:

    back_cb.png
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


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!

SIMILAR ARTICLES


2 COMMENTS

  1. Hello such, I have a problem looking amm, what happens is that I have implemented in ASP.NET 2.0, shows me pictures but I pulled the effect, as I can fix, I am new to this jquery …

    • Hi Ulises,
      I think that it doesn’t matter which web language you use, it should work always, but what is ‘amm’ ?

Leave a Reply