Make Lytebox loop image sets?

[mustang4ever]

Hi. Is there a way to make Lytebox loop image sets? So that when I reach the last image, the next click goes back to the first one.

Really miss this feature ... Can anyone help?

[mustang4ever]

bump ..

[jscheuer1]

See:

http://www.dynamicdrive.com/forums/showthread.php?p=208588#post208588

Make sure to read the entire thread, as the solution evolved a bit becoming more complete.

If you have any questions though, please respond here.

[mustang4ever]

Hi John. I've read your solution in the other thread, but it's for slideshows. I presume it wouldn't work with slideshow option switched off, no?

[jscheuer1]

That's right. Add this highlighted property (near the beginning of lytebox.js):


function LyteBox() {
/*** Start Global Configuration ***/
this.theme = 'grey'; // themes: grey (default), red, green, blue, gold
this.hideFlash = true; // controls whether or not Flash objects should be hidden
this.outerBorder = true; // controls whether to show the outer grey (or theme) border
this.resizeSpeed = 8; // controls the speed of the image resizing (1=slowest and 10=fastest)
this.maxOpacity = 80; // higher opacity = darker overlay, lower opacity = lighter overlay
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.loopImages = true; // should images loop with "Prev/Next" buttons
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 ***/


Go to the LyteBox.prototype.updateNav function and find this section (the section begins around line 531 in the lytebox.js file) and add/change the highlighted:


if(this.activeImage != 0 || this.loopImages) {
var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev')),
numPrev = this.activeImage <= 0? this.imageArray.length - this.activeImage : this.activeImage;
object.style.display = '';
object.onclick = function() {
myLytebox.changeContent(numPrev - 1); return false;
}
} else {
if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }
}
if(this.activeImage != (this.imageArray.length - 1) || this.loopImages) {
var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext')),
numNext = this.activeImage >= this.imageArray.length - 1? this.activeImage - this.imageArray.length : this.activeImage;
object.style.display = '';
object.onclick = function() {
myLytebox.changeContent(numNext + 1); return false;
}

Be sure not to miss the added commas on the two previous lines where they're added. If you have problems, revert that section, and simply copy over the above code in place of:


if(this.activeImage != 0) {
var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev'));
object.style.display = '';
object.onclick = function() {
myLytebox.changeContent(myLytebox.activeImage - 1); return false;
}
} else {
if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }
}
if(this.activeImage != (this.imageArray.length - 1)) {
var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext'));
object.style.display = '';
object.onclick = function() {
myLytebox.changeContent(myLytebox.activeImage + 1); return false;
}

from the original.

[mustang4ever]

Wow, so little change was needed!
Thanks a lot, man. You rock! :)

[elmdwarf]

Hello, I'm conscious this is a really older post, but I'm trying to do the changes you say in this post, and it doesn't work properly, I think it's because I have a different lytebox version installed.
I've installed the 5.5 version, is it possible to do it? It would be great to me!

Thanks a lot!

I attach you my lytebox.js to see where's the problem.