top

Download Pirobox Extented V.1.0

download

Advertising

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

piroblog

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

pirobox extended 2011

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

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

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

imageLorem 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.
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)

HTML Content Open (310x260px)

Image Open (Image size)

You Tube Open (640x505px)

jQuery Open (full screen)

Vimeo Open (900x350px)

SWF Open (900x350px)

Mixed gallery HTML code

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) 1
    • gallery (images) 1
    • iframe ( websites, swf, youtube, vimeo )
  • The second parameter specifies the width of the object 2
  • The third parameter specifies the height of the object 2
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-->

Comments