LightBox 2.02 x image of x problems

[bhowie]

1) Script Title: Conveyor Belt slideshow and Lightbox2.02

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rightslide.htm and http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem:
Im not sure what I am doing wrong.. i have all of the images working on the Conveyor belt slideshow working fine and also in the lightbox grouped image set.. the only think wrong with lightbox is the number of images that are showing.. i cant seem to figure out why it says there are 33 iamges when there are only 11.

please see link of problem here.
http://www.c21border.com/BeckyTest/Listings/225418.html

Thanks!

[jscheuer1]

The conveyor script writes out one invisible element for the purpose of measuring the length of the image train. It also creates two visible elements so that the effect can be continuous. 3*11 = 33 - so, it makes perfect sense to me. You might want to find where lightbox calculates the number of images and the image number and add in some math to make things work out to be intuitively correct, not mathematically correct.

Where lightbox calculates the total, just put that over 3:

number_variable/3

Where it sets which number it is, grab that variable before it is finally used and do:

count_var=count_var>22? count_var-22 : count_var>11? count_var-11 : count_var;

In other words replace (from lightbox.js):

		// if image is part of set display 'Image x of x' 
		if(imageArray.length > 1){
			Element.show('numberDisplay');
			Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
		}

with:

		// if image is part of set display 'Image x of x' - modified for Conveyor
		if(imageArray.length > 1){
			Element.show('numberDisplay');
			var f=imageArray.length/3;
			var c=eval(activeImage + 1);
			c=c>f*2? c-f*2 : c>f? c-f : c;
			Element.setInnerHTML( 'numberDisplay', "Image " + c + " of " + f);
		}

Your lightbox isn't working in FF or Opera though. You need to find this in motiongallery.js and add the red part:

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
if(typeof crossmain.style.maxWidth!=='undefined')
crossmain.style.maxWidth=maxwidth+'px';
menuwidth=crossmain.offsetWidth;
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;
actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
if (startpos)
cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
crossmain.onmousemove=function(e){
motionengine(e);
}

crossmain.onmouseout=function(e){
stopmotion(e);
showhidediv("hidden");
}
}
loadedyes=1
if (endofgallerymsg!=""){
creatediv();
positiondiv();
}
if (document.body.filters)
onresize()
initLightbox();
}
window.onload=fillup;

[bhowie]

Thank-you thank-you thank-you!
so much for taking the time and figuring out what my problem was! I have it fixed!
Becky

[Quarterbore]

Thanks for sharing your idea... I have been struggling with a way to allow people to upload photos with a review and this will allow multile photos in a small package....

Nw, in my case I get a problem in the image count as well... I added sic images and the image count says 12! I need some time to adsorb the advise below....

[jscheuer1]

If you are using lightbox 2.02 - I've found an easier way that works for most cases. Change the Array.prototype.removeDuplicates function to this:

// -----------------------------------------------------------------------------------

//
//	Extending built-in Array object
//	- array.removeDuplicates()
//	- array.empty()
//
Array.prototype.removeDuplicates = function () {
	for(i = 0; i < this.length; i++){
	for (var i_tem = 0; i_tem < this.length; i_tem++)
		if(this[i][0] == this[i_tem][0]&&i!==i_tem){
			this.splice(i_tem,1);
		}
	}
}

// -----------------------------------------------------------------------------------

in lightbox.js

[Quarterbore]

If you are using lightbox 2.02 - I've found an easier way that works for most cases. Change the Array.prototype.removeDuplicates function to this:

// -----------------------------------------------------------------------------------

//
//	Extending built-in Array object
//	- array.removeDuplicates()
//	- array.empty()
//
Array.prototype.removeDuplicates = function () {
	for(i = 0; i < this.length; i++){
	for (var i_tem = 0; i_tem < this.length; i_tem++)
		if(this[i][0] == this[i_tem][0]&&i!==i_tem){
			this.splice(i_tem,1);
		}
	}
}

// -----------------------------------------------------------------------------------

in lightbox.js

Awsome.... I owe you a COLD one!

This fixes the issue with the scrolling box PLUS the image cound still works if you use the script in a more traditional way...

[bhowie]

Ok,
So I have changed my layout a bit on the site.. and now Lightbox will not even display the x of x or the title of the image.. any help on this one?
Becky

http://www.c21border.com/BeckyTest/Listings/test.html

[jscheuer1]

I'd start over, using a fresh copy of the lightbox.js file, making only the modifications in this post:

http://www.dynamicdrive.com/forums/s...35&postcount=5

to it. Make this change in lightbox.css:

#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
        color:black;
	margin: 0 auto;
	line-height: 1.4em;
	}

Also, to be on the safe side, don't use this:

lightbox[1233 Third Street]

Use something simpler, like:

lightbox[third_street]

Finally, for lightbox to work at all in browsers other than IE (30% of the web), you need to initLightbox() here:

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
initLightbox();
}
window.onload=fillup

in the fillup function of Conveyor belt slideshow script.

Edit - This image appears to be missing:

http://www.c21border.com/BeckyTest/Listings/images/closelabel.gif

[bhowie]

Thanks Again John. Everything went smoothly as always when you help out.
Becky