Pirobox 1.2 jQuery Plugin

NEW Pirobox V.1.2.2 || jQuery 1.4.2 (update May 25 2010)

The script now weights only 12.5KB, (9KB Minified)
There is a choice between five different styles
Slideshow option More...
Multiple image set option More...
PngFix for Internet Explorer 6
Keyboard navigation: Right arrow [next], Left arrow [prev], ESC [close]
Broken Link Check
Automatic repositioning of the image in the browser window
Browser compatibility = FireFox 2+, Opera9.5+, Chrome, Safari (Mac/Windows),IE 6+

Demos

Demo 1 (double border corners white/black)
Demo 2 (black border corners + shadow)
Demo 3 (white border corners + shadow)
Demo 4 (shadow)
Demo 5 (double border corners black/white)

Single image

Set of images 1

Set of images 2

Set of images 3

Image Error

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


                Example:


                <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


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


                Example:


                <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>

 
                That's it :)

In the Body, Add class="pirobox" to any link tag to activate pirobox for a single image.


                Example:


                <a href="image.jpg" class="pirobox" title="your
                title"><img
                src="thumb.jpg" /></a>

Download

pirobox V.1.2.2 , 4881 Downloads

pirobox V.1.2.1 , 18590 Downloads

Comments are closed, for any question send an email to diegovalobra@gmail.com

TOP