How to make Lytebox loop the slideshow?

[lisali]

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]

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]

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]

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.

Edit:
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]

Thank you so much for all that, John! Much appreciated! I will test that tonight.