PDA

View Full Version : Integrating Slimbox (or Lightbox) with Conveyor Belt



bmckinley
05-25-2007, 07:35 PM
Conveyor belt
http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm

PLUS

SlimBox
http://www.digitalia.be/software/slimbox

I know it's 2 scripts, but I've got them working together under certain conditions, I'm just not knowledgeable enough to make them work together all the time. If I can get these two to play nice together and maybe MoodalBox I'd be so delighted. I just hope someone feel generous enough to help me out. It works after a fashion in Safari ... on the second attempt to view a picture. Every other browser links to a new page with the image.

I'd be fine using Lightbox 2, but on my own I couldn't even get this far with it. If someone would rather post the solution to those two, I'd be happy with that as well.

Please view my problematic site here:
http://www.mancer.com/prototype/

Thanks
Brian

jscheuer1
05-26-2007, 07:34 AM
Most likely there is an onload conflict and/or some other variable bleed over between the two scripts. Try:

http://home.comcast.net/~jscheuer1/side/files/conveyor_oo.htm

instead of your current conveyor. It has no onload event (so should be ready for initialization sooner) and, in general, its variables and functions are less exposed to the global scope so, less likely to create any other conflicts with other scripts.

Still, after reading over the slimbox description, lightbox might be a better choice as it will wait for the page to load before trying to initialize on the conveyor content. This may be especially important on a live page. But, slimbox sounds so much better, I'd give it a shot first.

In any case, specifically initializing lightbox or slimbox after whichever conveyor script you use has initialized may be required.

bmckinley
05-26-2007, 03:27 PM
That seems to help some. Using that script and lightbox I got the effect to work in Safari and Firefox. Still acts the same in Netscape 7.2 and in IE it doesn't even scroll. The modified conveyor by itself seems to have a problem with IE as I can't get it to scroll on your sample page either.

Here's my progress:
http://www.mancer.com/prototype/cbelt/

Any thoughts? And of course, thanks.

Brian

jscheuer1
05-26-2007, 04:28 PM
Well, I take it you mean IE Mac. That browser is way out of date and I have no way of testing on it currently. Your page 'as is' works in FF, Opera and IE 7. It works in NS 7 if you refresh the page. This means that if you remove:


Event.observe(window, 'load', initLightbox, false);

from the end of lightbox.js and insert this:


cbelt.prototype.fillup=function(){
var cacheobj=this;
this.timgs=document.getElementById('temp'+this.slid).getElementsByTagName('img')
for (var i_tem = 0; i_tem < this.timgs.length; i_tem++)
if(typeof this.timgs[i_tem].complete=='boolean'&&!this.timgs[i_tem].complete){
setTimeout(function(){cacheobj.fillup();}, 300);
return;
}
this.cross_slide=document.getElementById("test2"+this.slid);
this.cross_slide2=document.getElementById("test3"+this.slid);
this.cross_slide.innerHTML=this.cross_slide2.innerHTML=this.slide;
this.actualwidth=document.getElementById("temp"+this.slid).offsetWidth;
this.cross_slide2.style.left=this.actualwidth+this.sgap+"px"
initLightbox();
this.lefttime=setInterval(function(){cacheobj.slideleft();}, 30);
}

In the cbelt script, NS 7 will work and this shouldn't effect the othe browsers.

Now, if the original conveyor worked OK in IE Mac and others and the lightbox script worked in IE Mac when used by itself. This means that you could use the original conveyor, make the change as noted in lightbox.js and add this to the original conveyor script:


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()
}
initLightbox();
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

Assuming that onload timing/conflicts were the only problems to begin with. But, if lightbox didn't work in IE Mac by itself, or if the original conveyor didn't work in IE Mac by itself, this won't help IE Mac.

Notes: On larger screens your conveyor images behave oddly in all browsers. This may be due to your heavy reliance on positioning in your overall layout, and/or an insufficient number of images to fill a larger width screen. Setting a width for conveyor that is less than the total length of the image train could help this.

bmckinley
05-26-2007, 04:40 PM
Yeah, IE Mac. Thanks for checking those other browsers and diagnosing the Netscape issue. I'll try altering the scripts based your second suggestion first since I'm pretty sure conveyor belt and lightbox both worked fine on their own.

Thanks,
brian

bmckinley
05-26-2007, 05:31 PM
It works very well now. (I did manage to test it in IE 6 on Virtual PC) Doesn't work on IE Mac, but I'm just going to assume most Mac users probably aren't using that. And if they are it works, but it's just not as cool.

Thank you so, so much. :) :cool:

brian

sitespt
03-01-2009, 10:10 AM
Hi all.

I'm trying and struggling making a conveyor belt compatible with lightbox, but no luck so far. Anyone can help me out here?

Really appreciate your help.
Joel M

jscheuer1
03-01-2009, 03:27 PM
This is a rather old thread. In future, please make a new thread, and:

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

Anyways, if you use the newer version 2.04 of Lightbox, there is nothing to it, at least not to the basics. Just install the two scripts as instructed. In conveyor, make your links have the rel="lightbox" syntax, ex:


leftrightslide[0]='<a href="larger_img.jpg" rel="lightbox"><img src="smaller_img.jpg" border=1></a>'

However, Lightbox 2.04 is a little buggy. For a better experience I suggest using my version 2.04a -

Demo:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/

Archive:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/lightbox2.04a.zip