Submit your widget
HomeLightbox & Dialog & OverlayVery nice looking, Lightbox Gallery Picbox(jQuery)

Very nice looking, Lightbox Gallery Picbox(jQuery)

Created 13 years ago   Views 12829   downloads 2540    Author n/a
Very nice looking, Lightbox Gallery Picbox(jQuery)
View DemoDownload
120
Share |

Picbox is a lightweight (around 5KB) javascript image viewer based on the excellent Slimbox by Christophe Beyls, and available using either the  jQuery frameworks. It features automatic resizing and zooming of large images, allowing them to fit in the browser or be viewed at full size.

 

Features

Images automatically resize to fit the screen when opened. They can then be zoomed in/out using the scroll wheel and moved around on screen using the mouse. Double clicking resets the image or views it full size.

Picbox includes an api and customisation options. Refer to picbox.js in the src/ folder for the full list, including descriptions.

Installation

Copy the js/ and css/ folders your server. Then insert the following code into your <head>: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

 

for jQuery, then

<script src="js/picbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/picbox.css" type="text/css" media="screen" />

 

The folder structure can be changed, but if you put the images in a different folder to the css file be sure to change the paths in picbox.css!

Usage

For easy migration from Lightbox/Slimbox, by default the script activated for links with rel=”lightbox” e.g. 

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

 

To organise the images into groups add a group name after the word “lightbox” 

<a href="images/image-1.jpg" rel="lightbox-group1">image #1</a>
<a href="images/image-2.jpg" rel="lightbox-group1">image #2</a>
<a href="images/image-3.jpg" rel="lightbox-group1">image #3</a>

 

Of course this can all be customised by editing the autoload code in picbox.js. Example loading code for loading all image links or picasaweb/flickr galleries are in the extras/ folder (all copied from the Slimbox release).

You might also like