Permalink
Browse files

Added support for full-screen images per slide

  • Loading branch information...
1 parent 2e6c90f commit 50893c943d11fad267786ef069c5f9902a55a3da @Seldaek committed Feb 4, 2012
Showing with 79 additions and 15 deletions.
  1. +16 −2 README.mdown
  2. +8 −8 src/slippy-pure.css
  3. +17 −1 src/slippy.css
  4. +38 −4 src/slippy.js
View
@@ -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
View
@@ -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;
View
@@ -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;
}
View
@@ -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() {

0 comments on commit 50893c9

Please sign in to comment.