Creating photo gallery using jQuery and VisualLightBox

Date: 25th Jul 2010 Author: admin 2 Comments
Posted in: jQuery |Tags: , , , ,

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!

Enjoyed this Post?

    Tweet
   
   

Stay connected with us:

If you enjoyed this article, feel free to share our tutorial with your friends.

2 Comments

    • Ulises's Gravatar
    • 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 …

Leave a Reply

Your email address will not be published. Required fields are marked *

*

CAPTCHA Image
Refresh Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>