Added support for full-screen images per slide

README.mdown

@@ -85,6 +85,19 @@ The slippy() call takes an option object, which accepts the following keys:
 - ratio, defines the width/height ratio of the slides, defaults to 1.3 (620x476)
 - margin, the fraction of screen to use as slide margin, defaults to 0.15
 
+How to: Show images fullscreen
+------------------------------
+
+If a slide contains a `data-background` attribute, the referenced image will be
+inserted fullscreen, and the background (if the image is not of the same aspect ratio
+as the screen) will turn black. Example:
+
+```html
+<div class="slide" data-background="foo.jpg">
+    <h1>Content</h1>
+</div>
+```
+
 Server
 ------
 
@@ -118,14 +131,14 @@ Exporting PDFs
 To upload your presentation on SlideShare, or to share it with others, it can be convenient to
 export it to a PDF. Slippy comes with a CLI utility that does just that.
 
-The only requirement is that you download [PhantomJS](http://code.google.com/p/phantomjs/downloads/list) (1.3+)
+The only requirement is that you download [PhantomJS](http://code.google.com/p/phantomjs/downloads/list) (1.3.0)
 and [pdftk](http://www.pdflabs.com/tools/pdftk-the-pdf-toolkit/) and place the executables in the bin/phantomjs
 and bin/pdftk dirs or make them accessible via your PATH environment variable. If you're on linux you can
 probably install pdftk with your distro's package manager.
 
 Once that is done, you can call the script using `bin/slippy-pdf.sh <path to your html presentation> <path to the pdf file to generate>`.
 
-It'll take a while and then should output a 4:3 PDF file. If you don't like the aspect ratio or size,
+It will take a while and then should output a 4:3 PDF file. If you don't like the aspect ratio or size,
 you can change the viewport size in the `bin/phantom-slippy-to-pdf.js` file. If you have rendering issues (missing
 images or such), try increasing the delay, or rendering again, sometimes PhantomJS just fails without apparent reason.
 
@@ -164,6 +177,7 @@ Changelog
   - Added a template to render the slide repository page
   - Added a packager that embeds everything for easy distribution of slides as one html file
   - Added incremental slides functionality (use the incremental class on any elements to make them appear one by one)
+  - Added fullscreen image support on a per-slide basis (`data-background="img url"` on a slide div)
   - JS Alerts are now cleared when changing slide, but stay visible longer
   - Fixed bug preventing "0" to be used to switch to slides
 

src/slippy-pure.css

@@ -34,14 +34,14 @@ a.eval {
 }
 
 /** Overview screen */
-.overview .slide {
-    -moz-border-radius: 2em;
-    -webkit-border-radius: 2em;
-    border-radius: 2em;
-    border: 0.5em solid #ccc;
-}
-.overview .slide.active {
-    border: 0.5em solid #888;
+.overviewWrapper {
+    -moz-border-radius: .5em;
+    -webkit-border-radius: .5em;
+    border-radius: .5em;
+    border: 0.5px solid #ccc;
+}
+.overviewWrapper.active {
+    border: 0.5px solid #888;
 }
 .overviewWrapper:hover {
     position: relative;

src/slippy.css

@@ -47,6 +47,23 @@ a.eval {
     left: -100%;
 }
 
+body.slide-background .footer {
+    display: none;
+}
+
+#slippy-slide-background {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    z-index: 0;
+}
+
+body.overview #slippy-slide-background {
+    display: none;
+}
+
 .layout {
     display:none;
 }
@@ -68,7 +85,6 @@ a.eval {
 
 .overviewWrapper {
     float: left;
-    margin: 2%;
     position: relative;
 }
 

src/slippy.js

@@ -17,7 +17,7 @@
     var slides, curSlide, options, inOverview,
         incrementals, curIncremental = 0,
         // methods
-        buildSlide, preparePreTags, executeCode, nextSlide, prevSlide, showSlide, setSlide, getCurrentSlide,
+        buildSlide, preparePreTags, executeCode, nextSlide, prevSlide, showSlide, setSlide, getCurrentSlide, updateSlideBackground,
         keyboardNav, antiScroll, urlChange, autoSize, clickNav, animInForward, animInRewind, animOutForward, animOutRewind,
         incrementalBefore, incrementalAfter;
 
@@ -157,9 +157,9 @@
 
         resizeOverview = function() {
             $('.overviewWrapper')
-                .height(slideH * 0.13)
-                .width(slideW * 0.15)
-                .css('margin', slideH * 0.05);
+                .height(slideH * 0.2)
+                .width(slideW * 0.2)
+                .css('margin', slideH * 0.02);
         };
 
         centerVertically = function() {
@@ -264,6 +264,22 @@
                 if ($.browser.msie && $.browser.version < 9) { break; }
                 if (inOverview) { break; }
                 slides.wrap($('<div/>').addClass('overviewWrapper'));
+
+                slides.each(function (idx, el) {
+                    var img;
+                    el = $(el);
+                    // mark wrapper as active for active slide
+                    if (el.hasClass('active')) {
+                        el.parent().addClass('active');
+                    }
+
+                    // add slide backgrounds to overview wrappers
+                    if (img = el.data('background')) {
+                        el.parent().css('background', '#000 url("' + img + '") center center no-repeat')
+                            .css('background-size', '100%');
+                    }
+                });
+
                 $('body').removeClass('slide-'+(curSlide+1)).addClass('overview');
                 slides.bind('click.slippyOverview', function (e) {
                     showSlide(slides.index(this));
@@ -424,6 +440,24 @@
         curSlide = num;
         slides.eq(curSlide).addClass('active');
         $('.slideDisplay').text((num+1)+'/'+slides.length);
+        updateSlideBackground();
+    };
+
+    updateSlideBackground = function() {
+        var img;
+        if (img = slides.eq(curSlide).data('background')) {
+            $('<div id="slippy-slide-background"></div>')
+                .prependTo('body')
+                .css('background-size', '100%')
+                .css('background-position', 'center center')
+                .css('background-image', 'url("' + img + '")')
+                .css('background-repeat', 'no-repeat')
+                .css('background-color', '#000')
+            $('body').addClass('slide-background');
+        } else {
+            $('#slippy-slide-background').remove();
+            $('body').removeClass('slide-background');
+        }
     };
 
     getCurrentSlide = function() {