Every slide except the previous and the next one have display:none. T…

…his allows for interesting transitions without the performance overhead
LeaVerou · Oct 1, 2011 · acbd503 · acbd503 · BenoitZugmeyer · Oct 5, 2011
1 parent 17c3c43
commit acbd503
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/slideshow.css b/slideshow.css
@@ -14,6 +14,7 @@
  }
 
  .slide {
+ 	display: none;
  	position:absolute;
  	top:0;
  	right:0;
@@ -37,6 +38,13 @@
  	transition:1s opacity, 1s transform;
  }
 
+ .slide.previous,
+ .slide:target,
+ .slide:target + .slide, /* just in case, not really needed */
+ .slide.next {
+ 	display: block;
+ }
+
  .slide:target {
  	z-index:100;
  	opacity:1;

diff --git a/slideshow.js b/slideshow.js
@@ -361,6 +361,18 @@ self.prototype = {
 			if(window.opener && opener.slideshow && opener.slideshow.slide != this.slide) {
 				opener.slideshow.goto(this.slide);
 			}
+
+			// Update next/previous
+			for (var i=this.slides.length; i--;) {
+				this.slides[i].classList.remove('previous');
+				this.slides[i].classList.remove('next');
+			}
+
+			this.slides.previous = this.slides[this.slide-1];
+			this.slides.next = this.slides[this.slide+1];
+
+			this.slides.previous && this.slides.previous.classList.add('previous');
+			this.slides.next && this.slides.next.classList.add('next');
 		}
 
 		// If you attach the listener immediately again then it will catch the event