Pirobox Extended V.1.0. jQuery plugin

Download Pirobox Extented V.1.0

Advertising

Runner Cristina Quattrone

jQuery plugins I like

Twitter

Facebook Page

Usefull Links

Donation

PIROBOX EXTENDED V.1.0 - jQuery plugin

PiroBlog Just Released

17/03/2011 take a look at my Blog, on it is runs Pirobox Extended WP plugin

24/02/2011 Version 1.1 beta take a look at the new features and please report any bug

Hello and welcome, this is an advanced version of pirobox, I implemented a few things more than the previous version. One of the most important things is the ability to open any kind of files, from inLine content to the swf files, from simple images to pdf files. Other things are: automatic image resizing and drag and drop.

Browser compatibility = FireFox 2+, Opera9.5+, Chrome, Safari (Mac/Windows),IE 7+.

I really hope that my script Pirobox can be fun and usefull for you. Enjoy the code with jQuery

Customize Pirobox, Select your Options JS and CSS to include into your webpage <head> section

<!--Copy and paste the code below, into your <head> section </head>-->

<link rel="stylesheet" type="text/css" href="css_pirobox/style_1/style.css"/>
<!--::: OR :::-->
<link rel="stylesheet" type="text/css" href="css_pirobox/style_2/style.css"/>
<!--::: it depends on which style you choose :::-->

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/pirobox_extended.js"></script>

<!-- or use minified version  "pirobox_extended_min.js"  -->

<script type="text/javascript">
$(document).ready(function() {
	$().piroBox_ext({
		piro_speed : 900,
		bg_alpha : 0.1,
		piro_scroll : true //pirobox always positioned at the center of the page
    });
});
</script>

<!-- that's IT-->

Image gallery

Image Gallery HTML code

<!--Copy and paste this code, just change your url path to images-->

<a href="big1.jpg" rel="gallery"  class="pirobox_gall" title="your title">
    <img src="small1.jpg"  />
</a>

<a href="big2.jpg" rel="gallery"  class="pirobox_gall" title="your title">
    <img src="small2.jpg"  />
</a>

<a href="big3.jpg" rel="gallery"  class="pirobox_gall" title="your title">
    <img src="small3.jpg"  />
</a>

<a href="big4.jpg" rel="gallery"  class="pirobox_gall" title="your title">
    <img src="small4.jpg"  />
</a>

<!-- that's IT-->

Single image

Single image HTML code

<!--Copy and paste this code, just change your url path to images-->

<a href="big1.jpg" rel="single"  class="pirobox" title="your title">
    <img src="small1.jpg"  />
</a>

<!-- that's IT-->

URL image error

URL error explanation

<!--If the link is wrong, pirobox.js puts an image warning, (click ex. above)-->

<a href="kldfkk.jpg" rel="single"  class="pirobox" title="your title">
    <img src="small1.jpg"  />
</a>

<!-- that's IT-->

Mixed gallery

► Inline content Open (800x250px)

Inline content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

How to use the rel attribute:

<a href="#id" rel="inline-800-250" class="pirobox_gall1">Inline content</a>

The first parameter specifies the type of object to call :
- inline
- content
- single (image) ¹
- gallery (images)¹
- iframe ( websites, swf, youtube, vimeo )
The second parameter specifies the width of the object ²
The third parameter specifies the height of the object ²

1) Do not add the second and third parameters for images 2) You can use rel="iframe-full-full" to go fullScreen

<!--Copy and paste this code-->

<a href="#id" rel="inline-800-250"  class="pirobox_gall1">Inline content</a>

<!-- hidden div to call-->
<div id="id">
<h2 class="h2">Inline content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- end hidden div-->

<a href="page.html" rel="content-310-260"  class="pirobox_gall1">HTML content</a>

<a href="big.jpg" rel="gallery" title="Lisbona" class="pirobox_gall1" >Image</a>

<a href="http://www.youtube-nocookie.com/v/Bkjv9SscotY&hl=it_IT&fs=1?rel=0" 
rel="iframe-640-505" class="pirobox_gall1" >YouTube</a>

<a href="http://www.jquery.com" rel="iframe-full-full" 
class="pirobox_gall1" >jQuery website</a>

<a href="http://player.vimeo.com/video/18361415" rel="iframe-900-350" 
class="pirobox_gall1" >Vimeo video</a>

<a href="intro_ants.swf" rel="iframe-900-350" class="pirobox_gall1" >Swf file</a>

<!-- that's IT-->