jQuery HTML5 Fullscreen Slideshow

This jQuery plugin lets you create fullscreen galleries where the slides are shown on the entire screen using the fullscreen APIs provided by Firefox 10+ and Chrome 15+ (and possibly Safari 5.1+).

In all other browsers it falls back to displaying the slideshow in the entire viewport.

Example (click image to view)

Pictures take from Wikimedia Commons Picture of the Year 2007.


  // initialize the slideshow
  $('.image img').fullscreenslides();
  // All events are bound to this container element
  var $container = $('#fullscreenSlideshowContainer');
    //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
        .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
        // You can trigger the transition to the previous slide
        // You can trigger the transition to the next slide
        // You can close the slide show like this:
    // When a slide starts to load this is called
    .bind("startLoading", function() { 
      // show spinner
    // When a slide stops to load this is called:
    .bind("stopLoading", function() { 
      // hide spinner
    // 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);
    // before a slide is hidden this is called:
    .bind("endOfSlide", function(event, slide) { 


© Copyright 2012 by Eike Send

The code is licensed under the MIT and the GPLv2 Licenses, just like jQuery.


Posted by gofly

댓글을 달아 주세요