PDA

View Full Version : How to make Lytebox loop the slideshow?



lisali
10-23-2009, 11:26 AM
Hi,

Could anyone help?

I am using lytebox to display a slideshow on a website. But I'd like it to loop, ie start from the beginning once it's ended.

Is there an easy way to do that?

many thanks!

jscheuer1
10-23-2009, 02:34 PM
Find this section (around line 426) in the lytebox.js file and add the highlighted:


if (this.isSlideshow) {
if(this.autoEnd && this.activeSlide == (this.slideArray.length - 1)) {
if (this.autoEnd) {
this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.end('slideshow')", this.slideInterval);
}
} else {
if (!this.isPaused) {
this.activeSlide = this.activeSlide === this.slideArray.length - 1? -1 : this.activeSlide;
this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.changeContent("+(this.activeSlide+1)+")", this.slideInterval);
}
}

lisali
10-24-2009, 11:25 AM
Find this section (around line 426) in the lytebox.js file and add the highlighted:


if (this.isSlideshow) {
if(this.autoEnd && this.activeSlide == (this.slideArray.length - 1)) {
if (this.autoEnd) {
this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.end('slideshow')", this.slideInterval);
}
} else {
if (!this.isPaused) {
this.activeSlide = this.activeSlide === this.slideArray.length - 1? -1 : this.activeSlide;
this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.changeContent("+(this.activeSlide+1)+")", this.slideInterval);
}
}


Hi there,

Many thanks for your reply. I tried your code modifications, and it did not work for me - the slide show just stops at the end, like usual.

I have tried clearing the browser cache, in case the old script was cached and used, but that did not help.

Thank you!

jscheuer1
10-24-2009, 03:23 PM
Worked here. But I guess I should have also stated the obvious. You have disable this.autoEnd in the /*** Configure Slideshow Options ***/ section by setting it to false (around line 48):


this.navType = 1; // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number
this.autoResize = true; // controls whether or not images should be resized if larger than the browser window dimensions
this.doAnimations = true; // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.

this.borderSize = 12; // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone...
/*** End Global Configuration ***/

/*** Configure Slideshow Options ***/
this.slideInterval = 4000; // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds)
this.showNavigation = true; // true to display Next/Prev buttons/text during slideshow, false to hide
this.showClose = true; // true to display the Close button, false to hide
this.showDetails = true; // true to display image details (caption, count), false to hide
this.showPlayPause = true; // true to display pause/play buttons next to close button, false to hide
this.autoEnd = false; // true to automatically close Lytebox after the last image is reached, false to keep open
this.pauseOnNextClick = false; // true to pause the slideshow when the "Next" button is clicked
this.pauseOnPrevClick = true; // true to pause the slideshow when the "Prev" button is clicked
/*** End Slideshow Configuration ***/

if(this.resizeSpeed > 10) { this.resizeSpeed = 10; }
if(this.resizeSpeed < 1) { resizeSpeed = 1; }
this.resizeDuration = (11 - this.resizeSpeed) * 0.15;
thi . . .

However, it's just as well because although I was like 99% sure this would work, and it does, I didn't test it. Now that I have, I see the title/caption and the 'Image # of #' displays get a bit out of whack for the last slide and I hadn't thought of that. To fix those, go to around line 466 and change the code to look like so:


LyteBox.prototype.updateDetails = function() {
var object = this.doc.getElementById('lbCaption');
var sTitle = (this.isSlideshow ? this.slideArray[(this.activeSlide > -1? this.activeSlide : this.slideArray.length - 1)][1] : (this.isLyteframe ? this.frameArray[this.activeFrame][1] : this.imageArray[this.activeImage][1]));
object.style.display = '';
object.innerHTML = (sTitle == null ? '' : sTitle);
this.updateNav();
this.doc.getElementById('lbDetailsContainer').style.display = '';
object = this.doc.getElementById('lbNumberDisplay');
if (this.isSlideshow && this.slideArray.length > 1) {
object.style.display = '';
object.innerHTML = "Image " + ((this.activeSlide + 1) || this.slideArray.length) + " of " + this.slideArray.length;
this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 && this.showNavigation ? '' : 'none');
} else if (this.im . . .

Another thing is that if you start the slide show on the last image and click the play button, instead of going to the first slide, it exits. I'll have a look at what might be doing that and add the fix for it to this post when I find it.


OK, for that go to around line 626 and add the highlighted:


LyteBox.prototype.togglePlayPause = function(hideID, showID) {
if (this.isSlideshow && hideID == "lbPause") {
for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
}
this.doc.getElementById(hideID).style.display = 'none';
this.doc.getElementById(showID).style.display = '';
if (hideID == "lbPlay") {
this.isPaused = false;
if (this.autoEnd && this.activeSlide == (this.slideArray.length - 1)) {
this.end();
} else {
this.activeSlide = this.activeSlide === this.slideArray.length - 1? -1 : this.activeSlide;
this.changeContent(this.activeSlide + 1);
}
} else {
this.isPaused = true;
}
};

lisali
10-24-2009, 05:38 PM
Thank you so much for all that, John! Much appreciated! I will test that tonight.