Fullscreen jQuery & Html5 Gallery lightbox Plugin - fullscreen.js

File Size: 15.4 KB
Views Total: 15284
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Fullscreen jQuery & Html5 Gallery lightbox Plugin - fullscreen.js

fullscreen.js is a jQuery plugin to display your photo gallery/slideshow in a fullscreen lightbox using Html5 fullscreen API supported in major browsers. For Internet Explorer browsers, the plugin will display the gallery lightbox in the full page mode. The plugin is licensed under the MIT and the GPL v2 Licenses.

How to use it:

1. Include reference to jQuery library, jquery.fullscreenslides.js and fullscreenstyle.css in the Html page.

<link href="fullscreenstyle.css" type="text/css" rel="stylesheet"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.fullscreenslides.js"></script>

2. Create a photo gallery lightbox following the Html structure listed below. Wrap the images in the DIV elements with a CSS class name. Set the <a> tag's rel attributes to have the same value if you would like to display a set of images in a same gallery lightbox.

<div class="image"> 
<a rel="gallery" title="Title 1" href="1.jpg"> 
<img src="1.jpg"> 
</a>
<div class="caption"> Description 1 </div>
</div>

<div class="image"> 
<a rel="gallery" title="Title 1" href="1.jpg"> 
<img src="2.jpg"> 
</a>
<div class="caption"> Description 1 </div>
</div>

<div class="image"> 
<a rel="gallery" title="Title 1" href="1.jpg"> 
<img src="3.jpg"> 
</a>
<div class="caption"> Description 1 </div>
</div>

...

3. The sample javascript to initialize the gallery lightbox.

<script id="sample">
$(function(){
// initialize the slideshow
$('.image img').fullscreenslides();

// All events are bound to this container element
var $container = $('#fullscreenSlideshowContainer');

$container
//This is triggered once:
.bind("init", function() { 

// The slideshow does not provide its own UI, so add your own
// check the fullscreenstyle.css for corresponding styles
$container
.append('<div class="ui" id="fs-close">&times;</div>')
.append('<div class="ui" id="fs-loader">Loading...</div>')
.append('<div class="ui" id="fs-prev">&lt;</div>')
.append('<div class="ui" id="fs-next">&gt;</div>')
.append('<div class="ui" id="fs-caption"><span></span></div>');

// Bind to the ui elements and trigger slideshow events
$('#fs-prev').click(function(){
// You can trigger the transition to the previous slide
$container.trigger("prevSlide");
});
$('#fs-next').click(function(){
// You can trigger the transition to the next slide
$container.trigger("nextSlide");
});
$('#fs-close').click(function(){
// You can close the slide show like this:
$container.trigger("close");
});

})
// When a slide starts to load this is called
.bind("startLoading", function() { 
// show spinner
$('#fs-loader').show();
})
// When a slide stops to load this is called:
.bind("stopLoading", function() { 
// hide spinner
$('#fs-loader').hide();
})
// When a slide is shown this is called.
// The "loading" events are triggered only once per slide.
// The "start" and "end" events are called every time.
// Notice the "slide" argument:
.bind("startOfSlide", function(event, slide) { 
// set and show caption
$('#fs-caption span').text(slide.title);
$('#fs-caption').show();
})
// before a slide is hidden this is called:
.bind("endOfSlide", function(event, slide) { 
$('#fs-caption').hide();
});
});
</script>

4. Options and defaults.

"bgColor"           : "#000",
"useFullScreen"     : true,
"startSlide"        : 0

This awesome jQuery plugin is developed by eikes. For more Advanced Usages, please check the demo page or visit the official website.