pirobox slider for image gallery one

How to Use:
Choose your style and include one of the five .css in your header.

<link href="css_pirobox/demo1/style.css" media="screen" title="shadow" rel="stylesheet" type="text/css" />

<link href="css_pirobox/demo2/style.css" media="screen" title="white" rel="stylesheet" type="text/css" />

<link href="css_pirobox/demo3/style.css" media="screen" title="black" rel="stylesheet" type="text/css" />

<link href="css_pirobox/demo4/style.css" media="screen" title="black" rel="stylesheet" type="text/css" />

<link href="css_pirobox/demo5/style.css" media="screen" title="black" rel="stylesheet" type="text/css" />

Include jQuery.js, pirobox.js and pirobox options in your header.

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/pirobox.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$().piroBox({

my_speed: 300, //animation speed

bg_alpha: 0.5, //background opacity

slideShow : 'true', // true == slideshow on, false == slideshow off

slideSpeed : 3, //slideshow

close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox

});

});

</script>

In the Body, Add class="pirobox" to any link tag to activate pirobox for a set of images

<a href="image_1.jpg" class="pirobox" title="your title"><img src="thumb_1.jpg" /></a>

<a href="image_2.jpg" class="pirobox" title="your title"><img src="thumb_2.jpg" /></a>

<a href="image_3.jpg" class="pirobox" title="your title"><img src="thumb_3.jpg" /></a>

To activate Multiple set of images on the same page

<h3>Firts gallery</h3>

<a href="image_1.jpg" class="pirobox_work1" title="your title"><img src="thumb_1.jpg" /></a>

<a href="image_2.jpg" class="pirobox_work1" title="your title"><img src="thumb_2.jpg" /></a>

<a href="image_3.jpg" class="pirobox_work1" title="your title"><img src="thumb_3.jpg" /></a>

<h3>Second gallery</h3>

<a href="image_1.jpg" class="pirobox_work2" title="your title"><img src="thumb_1.jpg" /></a>

<a href="image_2.jpg" class="pirobox_work2" title="your title"><img src="thumb_2.jpg" /></a>

<a href="image_3.jpg" class="pirobox_work3" title="your title"><img src="thumb_3.jpg" /></a>

<h3>Third gallery</h3>

<a href="image_1.jpg" class="pirobox_work3" title="your title"><img src="thumb_1.jpg" /></a>

<a href="image_2.jpg" class="pirobox_work3" title="your title"><img src="thumb_2.jpg" /></a>

<a href="image_3.jpg" class="pirobox_work3" title="your title"><img src="thumb_3.jpg" /></a>

All you have to do is add _yourGallName at the class pirobox_gall,(note: each gallery must have the same class).

That's it :)







Source




Download Link