ImageBox.js

a crazy image positioning jQuery plugin

with integrated Lightbox

Get started with the ImageBox chaos!

DOWNLOAD NOW

What is ImageBox?

ImageBox is a small and not too serious jQuery plugin that repositions your image galleries thumbnails through generated chaos during every site reload.

Plus, it comes up with a built-in Lightbox, the fabulous Slimbox 2.

How to use

Put the ImageBox folder in the directory of your page.

Include the script in the header of your page, after the inclusion of the jQuery library.

<script src="ImageBox/imagebox.js"></script>

Gallery Markup

<div id="gallery"> 
  <a href="img/image-1.jpg" title="image-name"><img src="img/thumbnail-1.jpg"></a>
  <a href="img/image-2.jpg" title="image-name"><img src="img/thumbnail-2.jpg"></a>
  <a href="img/image-3.jpg" title="image-name"><img src="img/thumbnail-3.jpg"></a>
  <a href="img/image-4.jpg" title="image-name"><img src="img/thumbnail-4.jpg"></a>
</div>

Initialize

<script>
  $(function(){
    $('#gallery').imagebox();   
  });
</script>

Without configuration of the thumbnail dimensions, the thumbnails are displayed in the plugin default dimension values.

<script>
  $(function(){
    $('#gallery').imagebox({
        width: "100px",
        height: "150px"
    });
  });
</script>

Options

Property Default Type Description
width "50px" String The width of the thumbnail.
height "75px" String The height of the thumbnail.
boxShadow "0 0 10px rgba(0,0,0,.5)" String Thumbnail box-shadow. Except every valid CSS Synthax. Use "none" for no shadow.
boxShadowHover "0 0 10px rgba(0,0,0,1)" String Thumbnail hover box-shadow. Except every valid CSS Synthax. Use "none" for no shadow.
border "0" String Thumbnail border. Except every valid CSS shorthand Syntax, such as "1px solid #FF00FF",
or "medium dashed red".
maxRotate 10 Int The maximum rotation degree. Negative values are allowed and rotates the element counter-clockwise.
scale [1, 1] Array / Int The width (X-axis) and the height (Y-axis) scaling parameters. Used on thumbnail hover.
boxChaos 20 Int The ammount of the chaos. Use it wisely, there is no upward limit.
slimbox false Boolean If true, Slimbox - The ultimate Lightbox clone - is activated.
No need of including an external stylesheet or a script. imageBox does the trick.
slimOptions {
loop: false,
overlayOpacity: 0.8,
overlayFadeDuration: 400,
resizeDuration: 400,
resizeEasing: "swing",
initialWidth: 250,
initialHeight: 250,
imageFadeDuration: 400,
captionAnimationDuration: 400,
counterText: "Image {x} of {y}",
closeKeys: [27, 88, 67],
previousKeys: [37, 80],
nextKeys: [39, 78]
}

Allows to navigate between first and last images
1 is opaque, 0 is completely transparent
Duration of the overlay fade-in and fade-out animations (in milliseconds)
Duration of each of the box resize animations (in milliseconds)
"swing" is jQuery's default easing
Initial width of the box (in pixels)
Initial height of the box (in pixels)
Duration of the image fade-in animation (in milliseconds)
Duration of the caption animation (in milliseconds)
Translate or change as you wish, or set it to false to disable counter text for image groups
Array of keycodes to close Slimbox, default: Esc (27), 'x' (88), 'c' (67)
Array of keycodes to navigate to the previous image, default: Left arrow (37), 'p' (80)
Array of keycodes to navigate to the next image, default: Right arrow (39), 'n' (78)
iBgallery "" String Group name for sets of related images.

Examples | refresh page