Shinybox.

What is Shinybox ?

Shinybox is a jQuery "lightbox" plugin for desktop, mobile and tablet.

Main Features

1. Swipe gestures for mobile
2. Keyboard Navigation for desktop
3. CSS transitions with jQuery fallback
4. Retina support for UI icons
5. Easy CSS customization

Compatibility

Chrome, Safari, Firefox, Opera, IE8+, IOS4+, Android, windows phone.

Basic Usage

Javascript

Include jquery and the shinybox script in your head tags or right before your body closing tag.

<script src="lib/jquery-2.0.3.js"></script>
<script src="source/jquery.shinybox.js"></script>

CSS

Include the shinybox CSS style in your head tags.

<link rel="stylesheet" href="source/shinybox.css">

HTML

Use a specific class for your links and use the title attribute as caption.

<a href="big/image.jpg" class="shinybox" title="My Caption">
	<img src="small/image.jpg" alt="image">
</a>

Fire the plugin

Bind the shinybox behaviour on every link with the "shinybox" class.

<script type="text/javascript">
jQuery(function($) {
	$(".shinybox").shinybox();
});
</script>

Advanced

Use "rel" Attribute

You can add a rel attribute to your links to seperate galleries.

<!-- Gallery 1 -->
<a rel="gallery-1" href="big/image1.jpg" class="shinybox">
	<img src="small/image1.jpg" alt="image">
</a>
<a rel="gallery-1" href="big/image2.jpg" class="shinybox">
	<img src="small/image2.jpg" alt="image">
</a>
<!-- Gallery 2 -->
<a rel="gallery-2" href="big/image3.jpg" class="shinybox">
	<img src="small/image3.jpg" alt="image">
</a>
<a rel="gallery-2" href="big/image4.jpg" class="shinybox">
	<img src="small/image4.jpg" alt="image">
</a>

Youtube support

Simply paste a youtube video URL in your href attribute. The script will automatically check if it's a Youtube URL and open the video in the shinybox.

My Video

<a class="shinybox-video" rel="youtube" href="http://www.youtube.com/watch?v=XSGBVzeBUbk">My Videos</a>

Load slides dynamically

You can set your gallery dynamically by passing an array object to the shinybox.

View gallery

$("#gallery").click(function(e){
	e.preventDefault();
	$.shinybox([
		{href:'big/image1.jpg', title:'My Caption'},
		{href:'big/image2.jpg', title:'My Second Caption'}
	]);
});

Refresh Method

The refresh method allows you to reload the slides if the DOM has changed.

var shinyboxInstance = $(".a:visible").shinybox();

// Use the refresh method after your event is completed
shinyboxInstance.refresh();

For exemple, if you use isotope filter.

• All
• Sea
• Beach

// Use the shinybox only for  visible elements
var shinyboxInstance = $(".shinybox-isotope:not(.isotope-hidden .shinybox-isotope)").shinybox();

// Callback function that fire the refresh method, once the animation is finished
onAnimationCompleted = function(){
	shinyboxInstance.refresh();
};

// Isotope stuff
optionFilterLinks = $('#filter').find('a');
optionFilterLinks.attr('href', '#');

optionFilterLinks.click( function(){
	var selector = $(this).attr('data-filter');
	$('#grid').isotope({
		filter : '.' + selector,
		itemSelector : '.item',
		layoutMode : 'fitRows',
		animationEngine : 'best-available',
	}, onAnimationCompleted); // callback here

	optionFilterLinks.removeClass('active');
	$(this).addClass('active');

	return false;
});

Check open state

if ($.shinybox.isOpen){
	// do stuff
}

Options

<script type="text/javascript">
jQuery(function($) {
$(".shinybox").shinybox({
		useCSS : true, // false will force the use of jQuery for animations
		hideBarsDelay : 3000, // 0 to always show caption and action bar
		videoMaxWidth : 1140, // videos max width
		beforeOpen: function(){}, // called before opening
		afterClose: function(){}, // called after closing
		closePlacement: 'bottom', // places close button in bottom bar
		captionPlacement: 'top', // places caption in top bar
		navigationPlacement: 'bottom' // places navigation buttons in bottom bar
	});
});
</script>

Download View Source

Credits

Photos by Daniele Zedda