jQuery Fluidbox Demo

Fluidbox

Fluidbox is a simple, lightweight but modern lightbox plugin written in javascript using jQuery and CSS3. Lightbox plugins are quite commonly used on modern websites to show users an image, multiple images or other content using a modal dialog.

Features

Easy implementation into your website
Smooth transitions using CSS3 using Animate.css
Touch screen support using Hammer (optional)
Basic support for mobile phones and tablets
Support for browsers without animation support!
Lot's of customization support

Coming soon

Better support for (older) mobile phones and tablets

Also, check the issues tracker for more coming features or post your own ideas!

Name	Values	Default	Description
animated	`boolean`	`true`	True to use animations if available, false to disable animations.
animations	`false`, `PlainObject`	`PlainObject`	Contains animation name for each action.
keys	`PlainObject`	`PlainObject`	Key codes for navigation actions
padding	`integer`	`50`	Padding between the window borders and the image in pixels.
positions	`PlainObject`	`PlainObject`	Contains the positions for various Fluidbox elements. Eg. `inner` relates to `#fluidbox-inner`
preload	`boolean`	`true`	True to preload all images in collection instead of loading image when showed.
resize	`boolean`	`true`	True to center and resize overlay on window resize.
templates	`PlainObject`	`PlainObject`	Contains html templates of all Fluidbox elements.
touch	`boolean`	`true`	True to enable touchscreen support (when available), requires Hammer.js.

Name	Description
`fluidboxBeforeCreate`	Triggered before overlay and all other Fluidbox elements are created.
`fluidboxAfterCreate`	Triggered after overlay and all other Fluidbox elements are created.
`fluidboxBeforeBind`	Triggered before binding default keys and events.
`fluidboxAfterBind`	Triggered after binding default keys and events.
`fluidboxBeforeOpen`	Triggered before showing the overlay.
`fluidboxAfterOpen`	Triggered after elements are created, keys are bound and the overlay is shown. Note: opening animation might still not be completed when this event is raised
`fluidboxBeforeShow`	Triggered before the new (next) item is shown.
`fluidboxAfterShow`	Triggered after the new (next) item is shown. Note: prev/next animation might still not be completed when this event is raised
`fluidboxBeforeHide`	Triggered before the previously shown item is about to be cast into oblivion.
`fluidboxAfterHide`	Triggered after the previously shown item is gone. Note: prev/next animation might still not be completed when this event is raised
`fluidboxBeforeClose`	Triggered when the overlay is about to close.
`fluidboxAfterClose`	Triggered when the overlay is closed. Note: closing animation might still not be completed when this event is raised

Getting started

To get started: include jQuery, Modernizr, Hammer (optional) and Fluidbox in the head of your page like this:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <!-- Necessary -->
        <script language="javascript" src="js/jquery-1.8.3.min.js"></script>
        <script language="javascript" src="js/modernizr.custom.min.js"></script>
        <link rel="stylesheet" href="css/animate.min.css">
        
        <!-- Optional -->
        <script language="javascript" src="js/hammer.min.js"></script>
        
        <!-- Fluidbox -->
        <script language="javascript" src="js/jquery.fluidbox.js"></script>
        <link rel="stylesheet" href="css/jquery.fluidbox.css">
    </head>
    ...

After that, include some images (or links to images) in your document to be used with fluidbox. Give them all a class attribute, for example: 'fluidbox'. Optionally include a rel attribute to group images into a gallery or leave it out to show a single image.

...
<a href="images/image1_big.jpg" class="fluidbox" rel="sample-gallery" title="Image 1"><img src="images/image1_thumbnail" /></a>
<a href="images/image2_big.jpg" class="fluidbox" rel="sample-gallery" title="Image 2"><img src="images/image2_thumbnail" /></a>
...

or:

...
<a href="images/image1_big.jpg" class="fluidbox" rel="sample-gallery" title="Image 1">Link to image 1</a>
<a href="images/image2_big.jpg" class="fluidbox" rel="sample-gallery" title="Image 2">Link to image 2</a>
...

Last thing we need to do is initialize Fluidbox!

$(document).ready(function() {
	$('.fluidbox').fluidbox();
});

Examples

Single images

Simple demo demonstrating the use of fluidbox on single images, notice that no previous/next buttons are available. This is done by not giving the <a> element a rel attribute.

<a class="my-images" href="img/1.jpg" title="Image 1"><img src="img/1_thumb.jpg" /></a>
<a class="my-images" href="img/2.jpg" title="Image 2"><img src="img/2_thumb.jpg" /></a>
<a class="my-images" href="img/3.jpg" title="Image 3"><img src="img/3_thumb.jpg" /></a>
<a class="my-images" href="img/4.jpg" title="Image 4"><img src="img/4_thumb.jpg" /></a>

$('.my-images').fluidbox();

Multiple images

Simple demo demonstrating the use of fluidbox on multiple images. You can browse through the images by using the previous/next buttons with your mouse, use the left/right arrow keys on your keyboard or if you have a touch device you can swipe with your finger.

To let fluidbox know your images belong together give the <a> a rel attribute with a unique name, make sure they are all the same for all images!

<a class="my-images" href="img/1.jpg" rel="gallery-1" title="Image 1"><img src="img/1_thumb.jpg" /></a>
<a class="my-images" href="img/2.jpg" rel="gallery-1" title="Image 2"><img src="img/2_thumb.jpg" /></a>
<a class="my-images" href="img/3.jpg" rel="gallery-1" title="Image 3"><img src="img/3_thumb.jpg" /></a>
<a class="my-images" href="img/4.jpg" rel="gallery-1" title="Image 4"><img src="img/4_thumb.jpg" /></a>

$('.my-images').fluidbox();

Buttons

Disabling buttons is easy, just set the button template to false as demonstrated below. This is only a cosmetic change, you can still navigate through the images using your keyboard or touch device.

These button template options contain html, which means you can either change them or set them to false to disable them. If you decide to change them, make sure you keep the ID attribute the same.

Default ID's for buttons: next button: #fluidbox-btn-next, previous button: #fluidbox-btn-prev, close button: #fluidbox-btn-close

If you want to add more buttons or other elements you should modify the inner, outer or overlay template instead, depending on where you want your element to appear.

$('.my-images').fluidbox({
	templates: {
		buttons: {
			close: false,
			next: false,
			prev: false
		}
	}
});

Examples

Custom title

Titles are assigned to an image by using the title attribute but you can add custom content to an image title by binding to the fluidboxBeforeShow event.

$('.my-images').fluidbox().bind('fluidboxBeforeShow', function(event, item) {
	item.title += "- isn't it beautiful?";
});

Custom animations

You can specify custom animations per element by setting the animation data attribute. The code below demonstrates this by specifying a custom prev/next animation for the first image.

Method #1 (preferred):

$('.my-images').first().data('animation', {
	next: {
		in: 'rotateInDownRight',
		out: 'rotateOutUpLeft'
	},
	prev: {
		in: 'rotateInDownLeft',
		out: 'rotateOutUpRight'
	}
});
$('.my-images').fluidbox();

Method #2:

$('.my-images').fluidbox().bind('fluidboxBeforeShow', function(event, item) {
	if(item.index == 0) {
		item.animation = {
			next: {
				in: 'rotateInDownRight',
				out: 'rotateOutUpLeft'
			},
			prev: {
				in: 'rotateInDownLeft',
				out: 'rotateOutUpRight'
			}
		};
	}
});

Fluidbox

Fluidbox

Features

Coming soon

Options

Events

Getting started

Examples

Single images

Multiple images

Buttons

Examples

Custom title

Custom animations

Method #1 (preferred):

Method #2: