diff --git a/index.html b/index.html
index 7391872..7f9be79 100644
--- a/index.html
+++ b/index.html
@@ -8,10 +8,22 @@
     <script id="sample">
 $(function(){
   // initialize the slideshow
-  $('.image img').fullscreenslides();
-  
+  $('.image a[rel="gallery"]').fullscreenslides();
   // All events are bound to this container element
   var $container = $('#fullscreenSlideshowContainer');
+     
+  // start slideshow with a click on one of the pictures
+  $('.image a[rel = "gallery"]').click(function(){
+      $container.trigger("show",$(this).data("slide"));
+      return false;
+  });
+
+  // start 'gallery' slideshow starting with slide #0  
+  $('#startButton').click(function(){
+      $container.trigger("start",["gallery",0]);
+      return false;
+  });
+  
   
   $container
     //This is triggered once:
@@ -63,7 +75,7 @@
     // before a slide is hidden this is called:
     .bind("endOfSlide", function(event, slide) { 
       $('#fs-caption').hide();
-    });
+    });   
 });
     </script>
   </head>
@@ -126,6 +138,10 @@ <h2>Example (click image to view)</h2>
         </div>
       </div>
       
+      <h2>Example (click on separate start button)</h2>
+      
+      <p><button href="#" id="startButton" title="Start">Start</button></p>
+      
       <p>Pictures take from <a href="http://commons.wikimedia.org/wiki/Commons:Picture_of_the_Year/2007">Wikimedia Commons Picture of the Year 2007</a>.</p>
       
       <h2>Usage</h2>
diff --git a/jquery.fullscreenslides.js b/jquery.fullscreenslides.js
index c73df5f..c2051ed 100644
--- a/jquery.fullscreenslides.js
+++ b/jquery.fullscreenslides.js
@@ -9,25 +9,39 @@
 ;
 /* 
  * It assumes that your images are wrapped in links like this:
- * 
- * <a href="image-1-large.jpg" rel="gallery-1" title="woot">
- *   <img src="image-1-small"/>
+ *      
+ * <a href="image-1-large.jpg" class="gallery" rel="gallery-1" title="woot"> 
+ *    image or text
  * </a>
- * <a href="image-2-large.jpg" rel="gallery-1" title="woot">
- *   <img src="image-2-small"/>
+ * <a href="image-2-large.jpg" class="gallery" rel="gallery-1" title="woot">
+ *    image or text
  * </a>
- * <a href="image-3-large.jpg" rel="gallery-1" title="woot">
- *   <img src="image-3-small"/>
+ * <a href="image-3-large.jpg" class="gallery" rel="gallery-1" title="woot">
+ *    image or text
  * </a>
  * 
+ * You are free to place any images or text inside the links or hide them when you only want one start button
+ * 
  * You would then call it like this:
  * 
  * <script src="http://code.jquery.com/jquery.js"></script>
  * <script src="fullscreenslides.js"></script>
  * <script>
  *  $(function(){
- *    $("img").fullscreenslides();
+ *    $("a.gallery").fullscreenslides();
  *    
+ *    // start the slideshow with the particular picture
+ *    $('a.gallery').click(function(){
+ *      $container.trigger("show",$(this).data("slide"));
+ *      return false;
+ *    });
+ * 
+ *    // start slideshow with a click on any html element
+ *    $('.startbutton').click(function(){
+ *        $container.trigger("start",["gallery-1",slideNo]);
+ *        return false;
+ *    });
+ *
  *    // You can then use the container:
  *    var $container = $('#fullscreenSlideshowContainer');
  *    
@@ -97,11 +111,15 @@
         // compare the window aspect ratio to the image aspect ratio
         // to use either maximum width or height
         if ((ww / wh) > (slide.$img.width() / slide.$img.height())) {
+          // do not resize unless told to
+          wh = (wh > slide.$img.height() && $container.data("options").noEnlarge) ? slide.$img.height() : wh;
           slide.$img.css({
             "height" : wh + "px",
             "width"  : "auto"
           });
         } else {
+          // do not resize unless told to
+          ww = (ww > slide.$img.width()  && $container.data("options").noEnlarge) ? slide.$img.width() : ww;
           slide.$img.css({
             "height" : "auto",
             "width"  : ww + "px"
@@ -119,16 +137,12 @@
       //todo: throttle
       $container.trigger("updateSize");
     });
-    
-    // Show individual slides
-    var isLoading = false;
-    $container.bind("showSlide", function(event, newSlide) {
-      if (!isLoading) {
-        var oldSlide = $container.data("currentSlide");
+
+    // Load a slide
+    $container.bind("loadSlide", function(event, newSlide) {
         // if it is not loaded yet then initialize the dom object and load it
         if (!("$img" in newSlide)) {
-          isLoading = true;
-          $container.trigger("startLoading");
+          $(newSlide).data("loading",true);
           newSlide.$img = $('<img class="slide">')
             .css({
               "position"    : "absolute",
@@ -138,13 +152,17 @@
             .hide()
             // on load get the images dimensions and show it
             .load(function(){
-              isLoading = false;
-              $container.trigger("stopLoading");
+              $(newSlide).data("loading",false);
               updateSlideSize(newSlide);
-              changeSlide(oldSlide, newSlide);
+              // loading the currently requested slide - otherwise it was a preload
+              if ($(newSlide).data("requestShow")) {
+                $(newSlide).data("requestShow",false);
+                $container.trigger("stopLoading");
+                changeSlide($container.data("currentSlide"), newSlide);
+              } 
             })
             .error(function(){
-              isLoading = false;
+              $(newSlide).data("loading",false);
               newSlide.error = true;
               $container
                 .trigger("stopLoading")
@@ -152,23 +170,52 @@
             })
             .attr("src", newSlide.image);
           $container.append(newSlide.$img);
+        }
+    });
+    
+    
+    // Show individual slides
+    var isLoading = false;
+    $container.bind("showSlide", function(event, newSlide) {
+      // check if preload has finished
+      if (!$(newSlide).data("loading")) {
+        var oldSlide = $container.data("currentSlide");
+        // if it is not loaded yet then initialize the dom object and load it, only to avoid race conditions with the preloader
+        if (!("$img" in newSlide)) {
+          $container.trigger("startLoading");
+          $(newSlide).data("requestShow",true);
+          $container.trigger("loadSlide",newSlide);
         } else {
           changeSlide(oldSlide, newSlide);
         }
+      } else {
+        $(newSlide).data("requestShow",true);
       }
     });
     
-    $container.bind("prevSlide nextSlide", function(event) {
+    $container.bind("prevSlide nextSlide", function(event, preLoad) {
       var nextID,
           slides = $container.data("slides"),
           currentSlide = $container.data("currentSlide"),
-          currentID = currentSlide && currentSlide.id || 0;
+          currentID = currentSlide && currentSlide.id || 0,
+          options = $container.data("options");
+      // sanitary check for race condition which can occour if slideshow is timer triggered in the user app
+      if (!slides) return false;
       if (event.type == "nextSlide") {
         nextID = (currentID + 1) % slides.length;
+        // no repeat
+        if ((nextID < currentID) && options.noLoop && !preLoad) {
+            $(this).trigger("close");
+            return false;
+        }
       } else {
         nextID = (currentID - 1 + slides.length) % slides.length;
       }
-      $container.trigger("showSlide", slides[nextID]);
+      // check if the next slide should be shown or just preloaded
+      if (preLoad)
+          $container.trigger("loadSlide", slides[nextID]);
+      else
+          $container.trigger("showSlide", slides[nextID]);
     });
     
     // privat function to change between slides
@@ -185,8 +232,16 @@
         $container.trigger("startOfSlide", newSlide);
       }
       $container.data("currentSlide", newSlide);
+      $container.trigger("nextSlide", true);
     }
     
+    // Start Slideshow
+    $container.bind("start", function(event, rel, slideNo) {
+        var slideshow = $container.data("slideshows")[rel];
+        var slide = slideshow[slideNo] ;
+        $container.trigger("show", slide);
+    })
+    
     // keyboard navigation
     var keyFunc = function(event) {
       if (event.keyCode == 27) { // ESC
@@ -212,7 +267,7 @@
         if (document.cancelFullScreen) {  
           document.cancelFullScreen();  
         } 
-        if (document.mozCancelFullScreen) {
+        if (document.mozFullScreen) {
           $("html").css("overflow", "auto");
           $(document).scrollTop($container.data("mozScrollTop"));
           document.mozCancelFullScreen();
@@ -230,6 +285,14 @@
       $container
         .removeData("currentSlide slides width height originalScrollTop hiddenElements")
         .hide();
+      return false;
+    });
+    
+    // Set options at runtime. This is usefull when you want to set options on user request -> after init, but before start
+    $container.bind("setOptions", function (event, options){
+      var o = $container.data("options");
+      o = $.extend(o,options|| {});
+      $container.data("options", o);
     });
     
     // When ESC is pressed in full screen mode, the keypressed event is not
@@ -243,7 +306,8 @@
     
     var firstrun = true;
     // Show a particular slide
-    $container.bind("show", function(event, rel, slide){
+    $container.bind("show", function(event, slide){
+      var rel = slide.rel;
       var options = $container.data("options");
       var slideshows = $container.data("slideshows");
       var slides = slideshows[rel];
@@ -296,7 +360,8 @@
     var options = $.extend({
       "bgColor"           : "#000",
       "useFullScreen"     : true,
-      "startSlide"        : 0
+      "noEnlarge"         : true,
+      "noLoop"            : false,
     }, options || {});
     // Check if fullScreenApi is available
     options.useFullScreen = options.useFullScreen && !!(
@@ -316,22 +381,16 @@
     var slideshows = {};
     // Store galleries
     this.each(function(){
-      var link = $(this).parents("a")[0];
-      if (!link.rel) link.setAttribute("rel", "__all__");
+      if (!this.rel) this.setAttribute("rel", "__all__");
       var slide = {
-        image: link.href,
-        title: link.title,
-        rel: link.rel
+        image: this.href,
+        title: this.title,
+        rel: this.rel
       };
-      slide.data = $.extend({}, $(this).data(), $(link).data());
       slideshows[slide.rel] = slideshows[slide.rel] || [];
       slideshows[slide.rel].push(slide);
       slide.id = slideshows[slide.rel].length - 1;
-      $(link).data("slide", slide);
-      $(link).click(function(event){
-        $container.trigger("show", [this.rel, $(this).data("slide")]);
-        event.preventDefault();
-      });
+      $(this).data("slide", slide);
     });
     $container.data("slideshows", slideshows);
   }
diff --git a/jquery.fullscreenslides.min.js b/jquery.fullscreenslides.min.js
index 12d1d48..ade8b3e 100644
--- a/jquery.fullscreenslides.min.js
+++ b/jquery.fullscreenslides.min.js
@@ -5,4 +5,4 @@
  * This is a jQuery plugin to generate full screen galleries.
  *
  * https://github.com/eikes/jquery.fullscreen.js
- */(function(a){var b,c=function(){function g(a){b.data("isFullScreen")&&b.trigger("close"),b.data("isFullScreen",!0)}b.bind("updateSize orientationchange",function(d){b.height(a(window).height()),c()});var c=function(c){if(c===undefined)var c=b.data("currentSlide");if(c&&c.$img){var d=a(window).height(),e=a(window).width();e/d>c.$img.width()/c.$img.height()?c.$img.css({height:d+"px",width:"auto"}):c.$img.css({height:"auto",width:e+"px"}),c.$img.css({"margin-left":"-"+.5*c.$img.width()+"px","margin-top":"-"+.5*c.$img.height()+"px"})}};a(window).bind("resize",function(){b.trigger("updateSize")});var d=!1;b.bind("showSlide",function(f,g){if(!d){var h=b.data("currentSlide");"$img"in g?e(h,g):(d=!0,b.trigger("startLoading"),g.$img=a('<img class="slide">').css({position:"absolute",left:"50%",top:"50%"}).hide().load(function(){d=!1,b.trigger("stopLoading"),c(g),e(h,g)}).error(function(){d=!1,g.error=!0,b.trigger("stopLoading").trigger("error",g)}).attr("src",g.image),b.append(g.$img))}}),b.bind("prevSlide nextSlide",function(a){var c,d=b.data("slides"),e=b.data("currentSlide"),f=e&&e.id||0;a.type=="nextSlide"?c=(f+1)%d.length:c=(f-1+d.length)%d.length,b.trigger("showSlide",d[c])});var e=function(a,c){a!==undefined&&(b.trigger("endOfSlide",a),a.$img.fadeOut()),c.$img&&!c.error?c.$img.fadeIn(function(){b.trigger("startOfSlide",c)}):b.trigger("startOfSlide",c),b.data("currentSlide",c)},f=function(a){a.keyCode==27&&b.trigger("close"),a.keyCode==37&&b.trigger("prevSlide"),a.keyCode==39&&b.trigger("nextSlide")};b.bind("close",function(){var c=b.data("options"),d=b.data("currentSlide");d&&d.$img&&d.$img.hide(),b.trigger("endOfSlide",d),a(document).unbind("keydown",f),c.useFullScreen?(document.cancelFullScreen&&document.cancelFullScreen(),document.mozCancelFullScreen&&(a("html").css("overflow","auto"),a(document).scrollTop(b.data("mozScrollTop")),document.mozCancelFullScreen()),document.webkitCancelFullScreen&&document.webkitCancelFullScreen(),document.removeEventListener("fullscreenchange",g),document.removeEventListener("mozfullscreenchange",g),document.removeEventListener("webkitfullscreenchange",g)):(b.data("hiddenElements").show(),a(window).scrollTop(b.data("originalScrollTop"))),b.removeData("currentSlide slides width height originalScrollTop hiddenElements").hide()});var h=!0;b.bind("show",function(c,d,e){var i=b.data("options"),j=b.data("slideshows"),k=j[d];b.data("slides",k),b.trigger("updateSize"),a(document).bind("keydown",f),i.useFullScreen&&(con=b[0],con.requestFullScreen&&(con.requestFullScreen(),document.addEventListener("fullscreenchange",g)),con.mozRequestFullScreen&&(con.mozRequestFullScreen(),document.addEventListener("mozfullscreenchange",g),b.data("mozScrollTop",a(document).scrollTop()),a("html").css("overflow","hidden")),con.webkitRequestFullScreen&&(con.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT),document.addEventListener("webkitfullscreenchange",g)),b.data("isFullScreen",!1)),h&&(b.trigger("init"),h=!1),i.useFullScreen||b.data("hiddenElements",a("body > *").filter(function(){return a(this).css("display")!="none"}).hide()),b.data("originalScrollTop")||b.data("originalScrollTop",a(window).scrollTop()),b.show(),b.trigger("showSlide",e)})};a.fn.fullscreenslides=function(d){b=a("#fullscreenSlideshowContainer"),b.length==0&&(b=a('<div id="fullscreenSlideshowContainer">').hide(),a("body").append(b),c());var d=a.extend({bgColor:"#000",useFullScreen:!0,startSlide:0},d||{});d.useFullScreen=d.useFullScreen&&!!(b[0].requestFullScreen||b[0].mozRequestFullScreen||b[0].webkitRequestFullScreen),b.data("options",d),b.css({position:"absolute",top:"0px",left:"0px",width:"100%","text-align":"center","background-color":d.bgColor});var e={};this.each(function(){var c=a(this).parents("a")[0];c.rel||c.setAttribute("rel","__all__");var d={image:c.href,title:c.title,rel:c.rel};d.data=a.extend({},a(this).data(),a(c).data()),e[d.rel]=e[d.rel]||[],e[d.rel].push(d),d.id=e[d.rel].length-1,a(c).data("slide",d),a(c).click(function(c){b.trigger("show",[this.rel,a(this).data("slide")]),c.preventDefault()})}),b.data("slideshows",e)}})(jQuery)
\ No newline at end of file
+ */;(function($){var $container;var attachEvents=function(){$container.bind("updateSize orientationchange",function(event){$container.height($(window).height());updateSlideSize()});var updateSlideSize=function(slide){if(slide===undefined){var slide=$container.data("currentSlide")}if(slide&&slide.$img){var wh=$(window).height();var ww=$(window).width();if((ww/wh)>(slide.$img.width()/slide.$img.height())){wh=(wh>slide.$img.height()&&$container.data("options").noEnlarge)?slide.$img.height():wh;slide.$img.css({"height":wh+"px","width":"auto"})}else{ww=(ww>slide.$img.width()&&$container.data("options").noEnlarge)?slide.$img.width():ww;slide.$img.css({"height":"auto","width":ww+"px"})}slide.$img.css({"margin-left":"-"+(0.5*slide.$img.width())+"px","margin-top":"-"+(0.5*slide.$img.height())+"px"})}}$(window).bind("resize",function(){$container.trigger("updateSize")});$container.bind("loadSlide",function(event,newSlide){if(!("$img"in newSlide)){$(newSlide).data("loading",true);newSlide.$img=$('<img class="slide">').css({"position":"absolute","left":"50%","top":"50%"}).hide().load(function(){$(newSlide).data("loading",false);updateSlideSize(newSlide);if($(newSlide).data("requestShow")){$(newSlide).data("requestShow",false);$container.trigger("stopLoading");changeSlide($container.data("currentSlide"),newSlide);console.log("postloaded")}else{console.log("preloaded")}}).error(function(){$(newSlide).data("loading",false);newSlide.error=true;$container.trigger("stopLoading").trigger("error",newSlide)}).attr("src",newSlide.image);$container.append(newSlide.$img)}});var isLoading=false;$container.bind("showSlide",function(event,newSlide){if(!$(newSlide).data("loading")){var oldSlide=$container.data("currentSlide");if(!("$img"in newSlide)){$container.trigger("startLoading");$(newSlide).data("requestShow",true);$container.trigger("loadSlide",newSlide)}else{changeSlide(oldSlide,newSlide)}}else{$(newSlide).data("requestShow",true)}});$container.bind("prevSlide nextSlide",function(event,preLoad){var nextID,slides=$container.data("slides"),currentSlide=$container.data("currentSlide"),currentID=currentSlide&&currentSlide.id||0,options=$container.data("options");if(!slides)return;if(event.type=="nextSlide"){nextID=(currentID+1)%slides.length;if((nextID<currentID)&&options.noLoop){$container.trigger("close");return}}else{nextID=(currentID-1+slides.length)%slides.length}if(preLoad)$container.trigger("loadSlide",slides[nextID]);else $container.trigger("showSlide",slides[nextID])});var changeSlide=function(oldSlide,newSlide){if(oldSlide!==undefined){$container.trigger("endOfSlide",oldSlide);oldSlide.$img.fadeOut()}if(newSlide.$img&&!newSlide.error){newSlide.$img.fadeIn(function(){$container.trigger("startOfSlide",newSlide)})}else{$container.trigger("startOfSlide",newSlide)}$container.data("currentSlide",newSlide);$container.trigger("nextSlide",true)}$container.bind("start",function(event,rel,slideNo){var slideshow=$container.data("slideshows")[rel];var slide=slideshow[slideNo];$container.trigger("show",slide)})var keyFunc=function(event){if(event.keyCode==27){$container.trigger("close")}if(event.keyCode==37){$container.trigger("prevSlide")}if(event.keyCode==39){$container.trigger("nextSlide")}}$container.bind("close",function(){var options=$container.data("options");var oldSlide=$container.data("currentSlide");oldSlide&&oldSlide.$img&&oldSlide.$img.hide();$container.trigger("endOfSlide",oldSlide);$(document).unbind("keydown",keyFunc);if(options.useFullScreen){if(document.cancelFullScreen){document.cancelFullScreen()}if(document.mozCancelFullScreen){$("html").css("overflow","auto");$(document).scrollTop($container.data("mozScrollTop"));document.mozCancelFullScreen()}if(document.webkitCancelFullScreen){document.webkitCancelFullScreen()}document.removeEventListener('fullscreenchange',changeFullScreenHandler);document.removeEventListener('mozfullscreenchange',changeFullScreenHandler);document.removeEventListener('webkitfullscreenchange',changeFullScreenHandler)}else{$container.data("hiddenElements").show();$(window).scrollTop($container.data("originalScrollTop"))}$container.removeData("currentSlide slides width height originalScrollTop hiddenElements").hide()});$container.bind("setOptions",function(event,options){var o=$container.data("options");o=$.extend(o,options||{});$container.data("options",o)});function changeFullScreenHandler(event){if($container.data("isFullScreen")){$container.trigger("close")}$container.data("isFullScreen",true)}var firstrun=true;$container.bind("show",function(event,slide){var rel=slide.rel;var options=$container.data("options");var slideshows=$container.data("slideshows");var slides=slideshows[rel];$container.data("slides",slides);$container.trigger("updateSize");$(document).bind("keydown",keyFunc);if(options.useFullScreen){con=$container[0];if(con.requestFullScreen){con.requestFullScreen();document.addEventListener('fullscreenchange',changeFullScreenHandler)}if(con.mozRequestFullScreen){con.mozRequestFullScreen();document.addEventListener('mozfullscreenchange',changeFullScreenHandler);$container.data("mozScrollTop",$(document).scrollTop());$("html").css("overflow","hidden")}if(con.webkitRequestFullScreen){con.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);document.addEventListener('webkitfullscreenchange',changeFullScreenHandler)}$container.data("isFullScreen",false)}if(firstrun){$container.trigger("init");firstrun=false}if(!options.useFullScreen){$container.data("hiddenElements",$('body > *').filter(function(){return $(this).css("display")!="none"}).hide())}if(!$container.data("originalScrollTop")){$container.data("originalScrollTop",$(window).scrollTop())}$container.show();$container.trigger("showSlide",slide)})}$.fn.fullscreenslides=function(options){$container=$('#fullscreenSlideshowContainer');if($container.length==0){$container=$('<div id="fullscreenSlideshowContainer">').hide();$("body").append($container);attachEvents()}var options=$.extend({"bgColor":"#000","useFullScreen":true,"noEnlarge":true,"noLoop":false,},options||{});options.useFullScreen=options.useFullScreen&&!!($container[0].requestFullScreen||$container[0].mozRequestFullScreen||$container[0].webkitRequestFullScreen);$container.data("options",options);$container.css({"position":"absolute","top":"0px","left":"0px","width":"100%","text-align":"center","background-color":options.bgColor});var slideshows={};this.each(function(){if(!this.rel)this.setAttribute("rel","__all__");var slide={image:this.href,title:this.title,rel:this.rel};slideshows[slide.rel]=slideshows[slide.rel]||[];slideshows[slide.rel].push(slide);slide.id=slideshows[slide.rel].length-1;$(this).data("slide",slide)});$container.data("slideshows",slideshows)}})(jQuery);
diff --git a/pagestyle.css b/pagestyle.css
index 7ee1251..bbb7288 100644
--- a/pagestyle.css
+++ b/pagestyle.css
@@ -4,9 +4,11 @@
 }
 html {
   font-family: sans-serif;
+  height:100%;
 }
 body {
  text-align: center;
+ height:100%
 }
 h1,h2,h3,p {
   margin-bottom: 0.5em;
diff --git a/slideshow-example.html b/slideshow-example.html
new file mode 100644
index 0000000..2cd1d49
--- /dev/null
+++ b/slideshow-example.html
@@ -0,0 +1,282 @@
+<html>
+  <head>
+    <title>jQuery HTML5 Fullscreen Slideshow / Gallery</title>
+    <link href="fullscreenstyle.css" type="text/css" rel="stylesheet"></link>
+    <link href="pagestyle.css" type="text/css" rel="stylesheet"></link>
+    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
+    <script src="http://code.jquery.com/jquery.js"></script>
+    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
+    <script src="jquery.fullscreenslides.js"></script>
+    
+  </head>
+  <body>
+    
+    <div class="wrapper">
+      
+      <h1>jQuery HTML5 Fullscreen Slideshow</h1>
+      
+      <p>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+).</p>
+      <p>In all other browsers it falls back to displaying the slideshow in the entire viewport.</p>
+      
+      <h2>Example </h2>
+ 
+      <div style="height:0px;overflow:hidden">
+          <div class="image">
+            <a rel="gallery" title="Broadway Tower in Cotswolds, England" href="http://upload.wikimedia.org/wikipedia/commons/c/cb/Broadway_tower_edit.jpg">
+              <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Broadway_tower_edit.jpg/200px-Broadway_tower_edit.jpg">
+            </a>
+            <div class="caption">
+              <a href="http://en.wikipedia.org/wiki/Broadway_Tower">
+                Broadway Tower in Cotswolds, England
+              </a>
+              <br>
+              Taken by Wikimedian 
+              <a href="http://en.wikipedia.org/wiki/User:Newton2">
+                Newton2
+              </a>
+            </div>
+          </div>
+          
+          <div class="image">
+            <a rel="gallery" title="New York City at Night, HDR" href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/New_York_City_at_night_HDR.jpg/1280px-New_York_City_at_night_HDR.jpg">
+              <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/New_York_City_at_night_HDR.jpg/200px-New_York_City_at_night_HDR.jpg">
+            </a>
+            <div class="caption">
+              <a href="http://en.wikipedia.org/wiki/New_York">
+                New York City at Night, HDR
+              </a>
+              <br>
+              Taken by 
+              <a href="http://www.flickr.com/people/paulobar/">
+                Paulo Barcellos Jr.
+              </a>
+            </div>
+          </div>
+          
+          <div class="image">
+            <a rel="gallery" title="Red Squirrel with pronounced winter ear tufts" href="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Eichh%C3%B6rnchen_D%C3%BCsseldorf_Hofgarten_edit.jpg/1280px-Eichh%C3%B6rnchen_D%C3%BCsseldorf_Hofgarten_edit.jpg">
+              <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Eichh%C3%B6rnchen_D%C3%BCsseldorf_Hofgarten_edit.jpg/200px-Eichh%C3%B6rnchen_D%C3%BCsseldorf_Hofgarten_edit.jpg">
+            </a>
+            <div class="caption">
+              <a href="http://en.wikipedia.org/wiki/Red_Squirrel">
+                Red Squirrel with pronounced winter ear tufts
+              </a>
+              <br>
+              Taken by Wikimedian 
+              <a href="http://commons.wikimedia.org/wiki/User:Ray_eye">
+                Ray eye
+              </a>
+            </div>
+          </div>
+      </div>
+      
+      <form class="hero-unit">
+          <fieldset>
+            <legend>Configure Slideshow</legend>
+            <label>Slide duration</label>
+            <input id="duration" type="text" value="8">
+            <label class="checkbox">
+              <input id="fadeCaption" type="checkbox">Fade out title
+            </label>
+            <label class="checkbox">
+              <input id="loopSlideShow" type="checkbox"> Repeat Slideshow
+            </label>
+            <button id="starter" class="btn btn-success">Start</button>
+          </fieldset>
+      </form>
+      
+      <p>Pictures take from <a href="http://commons.wikimedia.org/wiki/Commons:Picture_of_the_Year/2007">Wikimedia Commons Picture of the Year 2007</a>.</p>
+      
+      <h2>Usage</h2>
+      
+      <pre id="code" class="prettyprint"></pre>
+      
+      <h2>License</h2>
+      
+      <p>&copy; Copyright 2012 by <a href="http://eike.se/nd">Eike Send</a></p>
+      <p>The code is licensed under the <a href="MIT-LICENSE.txt">MIT</a> and the <a href="GPL-LICENSE.txt">GPLv2</a> Licenses, just like jQuery.</p>
+      
+      <h2>Footnotes</h2>
+      
+      <p>Learn more about the fullscreen API:</p>
+      
+      <ul>
+        <li>
+          <a href="http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html">
+            WhatWG API draft
+          </a>
+        </li>
+        <li>
+          <a href="http://caniuse.com/#search=fullscreen">
+            "Can I use" compatibility table
+          </a>
+        </li>
+        <li>
+          <a href="https://developer.mozilla.org/en/DOM/Using_full-screen_mode">
+            Mozilla Developer Network documentation
+          </a>
+        </li>
+      </ul>
+      
+    </div>
+    
+    <script id="sample">
+$(function(){
+    // initialize the slideshow
+    $('.image a[rel="gallery"]').fullscreenslides();
+    // All events are bound to this container element
+    var $container = $('#fullscreenSlideshowContainer');
+     
+    var slideTimer = null;
+    var captionTimer = null;
+    var UiTimer = null;
+    var paused = false;
+    var duration;
+    var fadeCaption = false;
+    var loopSlideShow = false;
+
+    function nextSlide() {
+      if (slideTimer) window.clearInterval(slideTimer);
+      $container.trigger("nextSlide");
+    }
+
+    function hideCaption() {
+      if (captionTimer) window.clearInterval(captionTimer);
+      $('#fs-caption').fadeOut(500);
+    }
+  
+  $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 ui-button" id="fs-close">&times;</div>')
+        .append('<div class="ui" id="fs-loader">Loading...</div>')
+        .append('<div class="ui ui-button" id="fs-prev">&lt;</div>')
+        .append('<div class="ui ui-button" id="fs-next">&gt;</div>')
+        .append('<div class="ui ui-button" id="fs-pause">pause</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:
+        if (slideTimer) window.clearInterval(slideTimer);
+        if (captionTimer) window.clearInterval(captionTimer);
+        $container.trigger("close");
+      });
+      $('#fs-pause').click(function(){
+        // You can close the slide show like this:
+        if (!paused) {
+            if (slideTimer) window.clearInterval(slideTimer);
+            paused = true;
+        } else {
+            paused = false;
+            slideTimer = window.setInterval(nextSlide, duration);
+        }                    
+      });
+
+    })
+    // 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();
+      // this is to avoid race-conditions
+      if (slideTimer) window.clearInterval(slideTimer);
+      if (captionTimer) window.clearInterval(captionTimer);
+      if (!paused) slideTimer = window.setInterval(nextSlide, duration);
+      if (fadeCaption) captionTimer = window.setInterval(hideCaption,1500);
+    })
+    .bind("prevSlide nextSlide", function() { 
+      if (slideTimer) window.clearInterval(slideTimer);
+      if (captionTimer) window.clearInterval(captionTimer);
+    })
+    // before a slide is hidden this is called:
+    .bind("endOfSlide", function(event, slide) { 
+      $('#fs-caption').hide();
+    })
+    // When the slideshow closes this is called
+    .bind("close", function() { 
+      if (slideTimer) window.clearInterval(slideTimer);
+      if (captionTimer) window.clearInterval(captionTimer);
+      if (UiTimer) window.clearInterval(UiTimer);
+    });
+    
+    
+    $("#starter").click(function(){
+        duration = parseInt($("#duration").val())*1000;
+        fadeCaption = $("#fadeCaption").is(':checked');
+        loopSlideShow = $("#loopSlideShow").is(':checked');
+        $container.trigger("setOptions",{noLoop : !loopSlideShow});
+        $container.trigger("start",["gallery",0]);
+  
+        UiTimer = window.setInterval(function(){
+                 $(".ui-button").hide();
+                window.clearInterval(UiTimer);
+            },2000);
+          
+        $container.mousemove(function() {
+            if (!$("#fs-close").is(":visible")) {
+                $(".ui-button").show();
+            }
+            if (UiTimer) window.clearInterval(UiTimer);
+            UiTimer = window.setInterval(function(){
+                $(".ui-button").hide();
+                window.clearInterval(UiTimer);
+            },2000);                 
+        });
+        return false;
+    });
+    
+});
+    </script>
+    
+    <!-- This is unrelated to the slideshow, it only creates the Usage section and other stuff: -->
+    
+    <link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet"></link>
+    <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
+    <script>
+      $(function() {
+        $('#code').text($('#sample').html());
+        prettyPrint();
+      });
+    </script>
+    <a href="http://github.com/eikes/jquery.fullscreen.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+    <script type="text/javascript">
+      
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-8283689-4']);
+      _gaq.push(['_trackPageview']);
+      
+      (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+      })();
+      
+    </script>
+  </body>
+</html>