<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="A touchable jQuery lightbox plugin for desktop, mobile and tablet" />
<meta property="og:site_name" content="Shinybox" />
<meta property="og:url" content="http://one-com.github.com/shinybox/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Shinybox | A touchable jQuery lightbox" />
<meta property="og:description" content="Shinybox is a jQuery lightbox plugin for desktop, mobile and tablet">
<meta itemprop="name" content="Shinybox | A touchable jQuery lightbox">
<meta itemprop="description" content="Shinybox is a jQuery lightbox plugin for desktop, mobile and tablet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="source/shinybox.css">
<title>Shinybox | A touchable jQuery lightbox</title>
<!-- share buttons -->
<script type="text/javascript">(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
add = function(url, id) {
if (doc.getElementById(id)) {return;}
js = doc.createElement(script);
js.src = url;
id && (js.id = id);
fjs.parentNode.insertBefore(js, fjs);
};add("//connect.facebook.net/en_US/all.js#xfbml=1", "facebook-jssdk");
add("//platform.twitter.com/widgets.js", "twitter-wjs");
}(document, "script"));
</script>
<!-- end share buttons -->
</head>
<body>
<div id="fb-root"></div>
<a href="https://github.com/one-com/shinybox" id="fork-this"></a>
<div id="main">
<div class="wrap">
<header>
<h1>Shinybox.</h1>
<p class="tagline">A touchable jQuery lightbox</p>
<div id="share">
<div id="twitter-button">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://one-com.github.com/shinybox" data-text="Shinybox | A touchable jQuery lightbox" data-via="one-com">Tweet</a>
</div>
<div id="fb-like">
<div class="fb-like" data-href="http://one-com.github.com/shinybox/" data-send="false" data-layout="button_count" data-width="110" data-show-faces="false" data-colorscheme="light" data-action="like"></div>
</div>
</div>
<ul class="index-table">
<li>
<a href="#what">What is Shinybox ?</a>
<ul>
<li><a href="#features">Main Features</a></li>
<li><a href="#compatibility">Compatibility</a></li>
</ul>
</li>
<li><a href="#try">Try it</a></li>
<li><a href="#basic">Basic Usage</a></li>
<li>
<a href="#advanced">Advanced</a>
<ul>
<li><a href="#rel">Use Rel Attribute</a></li>
<li><a href="#video">Video support</a></li>
<li><a href="#inline">Inline Content support</a></li>
<li><a href="#dynamic">Load slides dynamically</a></li>
<li><a href="#refresh">Refresh Method</a></li>
<li><a href="#open">Check open state</a></li>
<li><a href="#options">Options</a></li>
</ul>
</li>
<li><a href="#download">Download</a></li>
</ul>
</header>
<hr>
<section id="presentation">
<div id="what"></div>
<h2>What is Shinybox ?</h2>
<p>Shinybox is a jQuery "lightbox" plugin for desktop, mobile and tablet.</p>
<div id="features"></div>
<h3>Main Features</h3>
<ol>
<li>Swipe gestures for mobile</li>
<li>Keyboard Navigation for desktop</li>
<li>CSS transitions with jQuery fallback</li>
<li>Retina support for UI icons</li>
<li>Easy CSS customization</li>
</ol>
<div id="compatibility"></div>
<h3>Compatibility</h3>
<p>Chrome, Safari, Firefox, Opera, IE8+, IOS4+, Android, windows phone.</p>
</section>
<hr>
<section id="example" class="clearfix">
<div id="try"></div>
<h2>Try it</h2>
<div id="basicExample">
<div class="box">
<a href="http://swipebox.brutaldesign.com/assets/full/nuke.jpg" class="shinybox" title="In CPH, full home-story by me and Lotta Agaton for Residence Magazine." caption="Gary in his studio on Bushwick. Ongoing portrait project. This is from my kitchen in Brooklyn, full home-story by me and Lotta Agaton for Residence Magazine. Interior from the amazing home of Einar Hylander in Stockholm. Personal work shot in Barcelona. Despite overwhelming odds you push to prod on schedule. Breathing a sigh of relief, you glance around at the other developers strewn about the room. You have defeated the release this time. Does this sound familiar? Compromising on code quality
">
<img src="http://swipebox.brutaldesign.com/assets/nuke_thumb.jpg" alt="nuke" />
</a>
</div>
<div class="box">
<a href="http://swipebox.brutaldesign.com/assets/full/leap.jpg" class="shinybox" >
<img src="http://swipebox.brutaldesign.com/assets/leap_thumb.jpg" alt="leap" />
</a>
</div>
<div class="box">
<a href="http://swipebox.brutaldesign.com/assets/full/reine.jpg" class="shinybox" title="Reine" caption="Reine">
<img src="http://swipebox.brutaldesign.com/assets/reine_thumb.jpg" alt="reine" />
</a>
</div>
<div class="box">
<a href="http://swipebox.brutaldesign.com/assets/full/neptune.jpg" class="shinybox" title="Neptune" caption="Neptune">
<img src="http://swipebox.brutaldesign.com/assets/neptune_thumb.jpg" alt="neptune" />
</a>
</div>
</div>
</section>
<hr>
<section id="usage">
<div id="basic"></div>
<h2>Basic Usage</h2>
<h3>Javascript</h3>
<p>Include jquery and the shinybox script in your <code>head</code> tags or right before your <code>body</code> closing tag.</p>
<pre><script src="lib/jquery-2.0.3.js"></script>
<script src="source/jquery.shinybox.js"></script></pre>
<h3>CSS</h3>
<p>Include the shinybox CSS style in your <code>head</code> tags.</p>
<pre><link rel="stylesheet" href="source/shinybox.css"></pre>
<h3>HTML</h3>
<p>Use a specific class for your links and use the title attribute as caption.</p>
<pre><a href="big/image.jpg" class="shinybox" title="My Title" caption="My Caption">
<img src="small/image.jpg" alt="image">
</a></pre>
<h3>Fire the plugin</h3>
<p>Bind the shinybox behaviour on every link with the "shinybox" class.</p>
<pre><script type="text/javascript">
jQuery(function($) {
$(".shinybox").shinybox();
});
</script></pre>
</section>
<hr>
<section id="advanced-usage">
<div id="advanced"></div>
<h2>Advanced</h2>
<div id="rel"></div>
<h3>Use "rel" Attribute</h3>
<p>You can add a <code>rel</code> attribute to your links to seperate galleries.</p>
<pre>
<span><!-- Gallery 1 --></span>
<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>
<span><!-- Gallery 2 --></span>
<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></pre>
<div id="relExample">
<div class="box">
<a href="http://swipebox.brutaldesign.com/assets/full/nuke.jpg" class="shinybox" rel="gallery-1" title="Nuke">
<img src="http://swipebox.brutaldesign.com/assets/nuke_thumb.jpg" alt="nuke" />
</a>
</div>
<div class="box">
<a href="http://swipebox.brutaldesign.com/assets/full/leap.jpg" class="shinybox" rel="gallery-2" title="Leap">
<img src="http://swipebox.brutaldesign.com/assets/leap_thumb.jpg" alt="leap" />
</a>
</div>
<div class="box">
<a href="http://swipebox.brutaldesign.com/assets/full/reine.jpg" class="shinybox" rel="gallery-1" title="Reine">
<img src="http://swipebox.brutaldesign.com/assets/reine_thumb.jpg" alt="reine" />
</a>
</div>
<div class="box">
<a href="http://swipebox.brutaldesign.com/assets/full/neptune.jpg" class="shinybox" rel="gallery-2" title="Neptune">
<img src="http://swipebox.brutaldesign.com/assets/neptune_thumb.jpg" alt="neptune" />
</a>
</div>
</div>
<div id="video"></div>
<h3>Video support</h3>
<p>Simply paste a youtube or vimeo video URL in your href attribute. The script will automatically check if it's a youtube or vimeo URL and opens the video in the shinybox.</p>
<p>
<a class="shinybox-video" href="http://www.youtube.com/watch?v=XSGBVzeBUbk" title="My Video">My Video</a>
</p>
<pre><a class="shinybox-video" rel="youtube" href="http://www.youtube.com/watch?v=XSGBVzeBUbk">My Videos</a></pre>
<pre>$(".shinybox-video").shinybox();</pre>
<div id="inline"></div>
<h3>Inline Content support</h3>
<p>Paste id of element with # in the href. The script will automatically check if it's inline content and opens it in the shinybox.</br>Note: You might have to do minor css tweaks to get proper UI inside shinybox.</p>
<p>
<a class="shinybox-inline" href="#presentation" title="My Presentation">My Presentation</a>
</p>
<pre><a class="shinybox-inline" href="#presentation">My Presentation</a></pre>
<pre>$(".shinybox-inline").shinybox({
afterMedia: function (element, index) {
element.css({
background: '#F0F0F0',
lineHeight: 1.42,
textAlign: 'left',
padding: '20px 15px',
});
}
});</pre>
<div id="dynamic"></div>
<h3>Load slides dynamically</h3>
<p>You can set your gallery dynamically by passing an array object to the shinybox.</p>
<p><a id="gallery" href="#">View gallery</a></p>
<pre>
$("#gallery").click(function(e){
e.preventDefault();
$.shinybox([
{href:'big/image1.jpg', title:'My Title', caption: "My Caption" },
{href:'big/image2.jpg', title:'My Title 2', caption: "My Second Caption"}
]);
});</pre>
<div id="refresh"></div>
<h3>Refresh Method</h3>
<p>The refresh method allows you to reload the slides if the DOM has changed.</p>
<pre>var shinyboxInstance = $(".a:visible").shinybox();
// Use the refresh method after your event is completed
shinyboxInstance.refresh();</pre>
<p>For example, if you use <a href="http://isotope.metafizzy.co/demos/filtering.html" target="_blank">isotope</a> filter.</p>
<ul id="filter">
<li><a href="#" data-filter="item">All</a></li>
<li><a href="#" data-filter="sea">Sea</a></li>
<li><a href="#" data-filter="beach">Beach</a></li>
</ul>
<div id="grid" class="clearfix">
<div class="box item beach">
<a href="http://swipebox.brutaldesign.com/assets/full/nuke.jpg" class="shinybox-isotope" title="Nuke" caption="Caption Text">
<img src="http://swipebox.brutaldesign.com/assets/nuke_thumb.jpg" alt="nuke">
</a>
</div>
<div class="box item sea">
<a href="http://swipebox.brutaldesign.com/assets/full/leap.jpg" class="shinybox-isotope" title="Leap">
<img src="http://swipebox.brutaldesign.com/assets/leap_thumb.jpg" alt="leap">
</a>
</div>
<div class="box item beach">
<a href="http://swipebox.brutaldesign.com/assets/full/reine.jpg" class="shinybox-isotope" title="Reine" caption="This is some text Reine">
<img src="http://swipebox.brutaldesign.com/assets/reine_thumb.jpg" alt="reine">
</a>
</div>
<div class="box item sea">
<a href="http://swipebox.brutaldesign.com/assets/full/neptune.jpg" class="shinybox-isotope" title="Neptune" caption="This is some text">
<img src="http://swipebox.brutaldesign.com/assets/neptune_thumb.jpg" alt="neptune">
</a>
</div>
</div>
<pre>
<span>// Use the shinybox only for visible elements</span>
var shinyboxInstance = $(".shinybox-isotope:not(.isotope-hidden .shinybox-isotope)").shinybox();
<span>// Callback function that fire the refresh method, once the animation is finished</span>
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); <span>// callback here</span>
optionFilterLinks.removeClass('active');
$(this).addClass('active');
return false;
});</pre>
<div id="open"></div>
<h3>Check open state</h3>
<pre>if (shinyboxInstance.ui.isOpen){
// do stuff
}</pre>
<div id="options"></div>
<h3>Options</h3>
<pre><script type="text/javascript">
jQuery(function($) {
$(".shinybox").shinybox({
id: 'shinybox-overlay', <span>// id of the overlay element</span>
useCSS: true, <span>// false will force the use of jQuery for animations</span>
hideCloseButtonOnMobile: false, <span>// hide close button on mobile, you can always use swipe up or down to close the shinybox on mobile</span>
loopAtEnd: false, <span>// Play images in loop in either directions</span>
noTitleCaptionBox: false, <span>// Set true if you don't have title caption box</span>
initialIndexOnArray: 0, <span>// which image index to init when a array is passed</span>
showNavigationsOnMobile: false, <span>// true to always show navigation icon on mobile</span>
sort: null, <span>// a sorting function to sort the dom elements before showing in shinybox</span>
videoMaxWidth: 1140, <span>// videos max width</span>
autoplayVideos: false, <span>// autoplay video</span>
vimeoColor: 'CCCCCC', <span>// vimeo color</span>
queryStringData: {}, <span>// any additional data to pass to youtube or vimeo videos</span>
beforeOpen: function(){}, <span>// called before opening</span>
afterClose: function(){}, <span>// called after closing</span>
afterMedia: function(element, index){}, <span>// called after loading media</span>
afterSlide: function(element, index){} <span>// called after sliding to image at the index</span>
});
});
</script></pre>
</section>
<section id="action">
<div id="download"></div>
<p><a class="button" href="https://github.com/brutaldesign/shinybox/archive/master.zip">Download</a> <a class="button" href="https://github.com/brutaldesign/shinybox">View Source</a></p>
</section>
<hr>
<section id="credits">
<p><strong>Credits</strong></p>
<p>Photos by <a href="http://www.flickr.com/photos/astragony/" target="_blank">Daniele Zedda</a></p>
</section>
</div>
<footer>
<div class="wrap">
<a href="http://csag.co" target="_blank">Constantin Saguin</a> | <a href="http://twitter.com/brutaldesign" target="_blank">@brutaldesign</a>
</div>
</footer>
</div>
<script src="lib/ios-orientationchange-fix.js"></script>
<script src="lib/jquery-2.0.3.min.js"></script>
<script src="lib/jquery.isotope.min.js"></script>
<script src="source/jquery.shinybox.js"></script>
<script type="text/javascript">
jQuery(function($) {
/* Basic Gallery */
$("#basicExample .shinybox").shinybox({
noTitleCaptionBox: true
});
/* Rel Gallery */
$("#relExample .shinybox").shinybox();
/* Video */
$(".shinybox-video").shinybox();
/* inline */
$(".shinybox-inline").shinybox({
afterMedia: function (element, index) {
element.css({
background: '#F0F0F0',
lineHeight: 1.42,
textAlign: 'left',
padding: '20px 15px',
});
}
});
/* Dynamic Gallery */
$("#gallery").click(function(e){
e.preventDefault();
$.shinybox([
{ href : 'http://swipebox.brutaldesign.com/assets/full/reine.jpg', title : 'My Title', caption: "My caption"},
{ href : 'http://swipebox.brutaldesign.com/assets/full/nuke.jpg', title : 'My Title', caption: "My Second Caption" }
]);
});
/* Isotope */
var shinyboxInstance = $(".shinybox-isotope:not(.isotope-hidden .shinybox-isotope)").shinybox();
var $container = $('#grid');
var optionFilter = $('#filter'),
optionFilterLinks = optionFilter.find('a');
optionFilterLinks.attr('href', '#');
onAnimationCompleted = function(){
shinyboxInstance.refresh();
};
optionFilterLinks.click( function(){
var selector = $(this).attr('data-filter');
$container.isotope({
filter : '.' + selector,
itemSelector : '.item',
layoutMode : 'fitRows',
animationEngine : 'best-available',
}, onAnimationCompleted);
// Highlight the correct filter
optionFilterLinks.removeClass('active');
$(this).addClass('active');
return false;
});
});
</script>
</body>
</html>