Permalink
Browse files

Converted slide indicators from CSS counters to JS, so now I can hide…

… all slides but next/current/previous for big perf boost
  • Loading branch information...
1 parent 6dd0bc0 commit b3a6253b44a442cc4394c2435989111717f01890 Lea Verou committed Oct 22, 2011
Showing with 18 additions and 13 deletions.
  1. +3 −5 slideshow.css
  2. +14 −7 slideshow.js
  3. +1 −1 theme.css
View
@@ -28,7 +28,7 @@
}
.slide {
- visibility: hidden;
+ display: none;
position:absolute;
top:0;
right:0;
@@ -49,9 +49,8 @@
.slide.previous,
.slide:target,
- .slide:target + .slide, /* just in case, not really needed */
.slide.next {
- visibility: visible;
+ display: block;
}
.slide:target {
@@ -65,8 +64,7 @@
/**
Slide numbers
*/
-.slide:target::before {
- content: counter(slide);
+#indicator {
position: absolute;
top: .05in;
right: .5em;
View
@@ -39,21 +39,26 @@ var self = window.SlideShow = function(container, slide) {
// Current .delayed item in the slide
this.item = 0;
- // Do we need to add a timer?
+ // Create timer, if needed
this.duration = container.getAttribute('data-duration');
if(this.duration > 0) {
- var timer = document.createElement('div'),
- declaration = 'transition: ' + this.duration * 60 + 's linear; ';
+ var timer = document.createElement('div');
timer.id = 'timer';
- timer.setAttribute('style', '-moz-' + declaration + '-webkit-' + declaration + '-o-' + declaration + '-ms-' + declaration + declaration);
+ timer.setAttribute('style', PrefixFree.prefixCSS('transition: ' + this.duration * 60 + 's linear;'));
container.appendChild(timer);
setTimeout(function() {
timer.className = 'end';
}, 1);
- }
+ }
+
+ // Create slide indicator
+ this.indicator = document.createElement('div');
+
+ this.indicator.id = 'indicator';
+ container.appendChild(this.indicator);
// Get the slide elements into an array
this.slides = $$('.slide', container);
@@ -358,6 +363,8 @@ self.prototype = {
this.adjustFontSize();
+ this.indicator.textContent = this.index;
+
// Update items collection
this.items = $$('.delayed, .delayed-children > *', this.slides[this.slide]);
this.item = 0;
@@ -370,8 +377,8 @@ self.prototype = {
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[this.order[this.index - 1]];
+ this.slides.next = this.slides[this.order[this.index + 1]];
this.slides.previous && this.slides.previous.classList.add('previous');
this.slides.next && this.slides.next.classList.add('next');
View
@@ -97,7 +97,7 @@ strong, b {
border:30px solid transparent;
}
-.slide:target::before {
+#indicator {
background: rgba(255, 255, 255, .6);
color: black;
text-shadow: .03em .03em .1em white;

0 comments on commit b3a6253

Please sign in to comment.