Image Crawler with Lightbox, stop on click.

[Serigraphics]

1) Script Title: Text and Image Crawler

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

3) Describe problem:

http://www.skylofts.net/2010

Ok. I want the scroller to stop when an image is clicked, resulting in a lightbox viewer to pop up. Right now it does that.

However, I believe there has to be a more clever way. Right now I have the crawler set to pause onMousedown on the body tag. This works good, but if you right click anywhere on the page, or mouse wheel down, or click on any text to highlight it it also stops the page. I would like to make the "Close" button on the lightbox to resume the play of the scroller, and I can easily code the image <a> wrap to pause the scroller. However I'm not too savy with Javascript and the lightbox code is written in such a way to scare you from modification.

Any thoughts from the experts? Thanks for listening to my problem!

[jscheuer1]

That's not Lightbox, it's Slimbox. This is the close function:

function D(){if(G>=0){r();G=w=E=-1;a.style.display="none";x.cancel().chain(l).start(0)}return false}

Which is a bit cryptic. If not so compressed, it would look like so:

function D(){
	if(G>=0){
		r();
		G=w=E=-1;
		a.style.display="none";
		x.cancel().chain(l).start(0);
	}
	return false;
}

That if(G>=0) is just a conditional that checks to see if a Slimbox is actually open. That stuff inside its braces calls other functions and sets things, all for the purpose of carrying out the close of the Slimbox.

So you could just slip your command in there:

function D(){if(G>=0){marqueeInit.ar[0].stopMarquee=false;r();G=w=E=-1;a.style.display="none";x.cancel().chain(l).start(0)}return false}

Now, as for removing the onmousedown code from the body tag, good idea. The onmousedown event isn't always the best choice anyway. You could add onclick to the a tags in the crawler, ex:

<a href="images/image1lg.jpg" rel="lightbox" onclick="marqueeInit.ar[0].stopMarquee=true;"><img src="images/image1.jpg" border="0" /></a>

But Slimbox might overwrite that, that depends upon how it is adding the onclick to the rel="lightbox" links. It could work, but it would be safer to add the event to the images, ex:

<a href="images/image1lg.jpg" rel="lightbox"><img onclick="marqueeInit.ar[0].stopMarquee=true;" src="images/image1.jpg" border="0" /></a>

[Serigraphics]

Thanks man, works perfect! I appreciate your help you definitely are going above and beyond. Now that we got that figured out, do you think there's any benefit to going from slimbox to DD's Lightbox?

[jscheuer1]

I don't think it makes a big difference as far as your page goes. Lightbox isn't really a DD script anyway and has moved on since Lokesh (its author) last contributed it here. It's now at version 2.04, which has several code improvements, but also some flaws which I corrected in my 2.04a version available here:

http://www.dynamicdrive.com/forums/s...470#post163470

Two things I would consider:

If you are going to add more library dependent code (Slimbox depends upon MooTools, Lightbox upon Prototype, Scritptaculous, etc., there are other libraries around), you would want a Lightbox type script that uses the same library as the other library dependent code you might want to add. There are one or more Lightbox type scripts available for just about any code library you can imagine. The lightbox effect is a very popular one.

And, in choosing a library, one should consider its size and speed of execution. MooTools beats Prototype at both. Also investigate what other scripts are available that will work with a given library.

If you are pretty sure this is the only library dependent script you will be using, size and speed may not be so important to you as features. But, except for some fine points, there is little difference between Slimbox and Lightbox.

One thing I didn't consider when I gave you the advice on modifying Slimbox is that you might want to also use the modified script on a page without Crawler. If you do that, it will throw an error when it cannot find marqueeInit.

Though not an iron clad fix for that, a reasonable test that will work in almost all cases would be to add:

function D(){if(G>=0){if(typeof marqueeInit!=='undefined'){marqueeInit.ar[0].stopMarquee=false;}r();G= . . .

Don't miss the added closing brace before the r(); function call.

[Serigraphics]

I'm getting a syntax error when I plug that modified code in. It stops the lightbox effect from working. It definitely would come in handy because I will probably have a few image galleries using the same script, minus the crawler.

[jscheuer1]

I may have made a typo (but double checking its syntax, it looks correct to me), and/or you may not have followed my suggestions as I intended. The easiest way for me to tell would be to see the page.

I checked your page:

http://www.skylofts.net/2010/

And, as far as I can tell, it hasn't been updated - it appears to still be using the body onmousedown code.

So please either update it to illustrate the problem, or give me a link to a page that does.

[Serigraphics]

UPDATE: It actually works. Sorry for the mixup, I apparently did something wrong yesterday. Updated the code and it still works fine. Thanks for sticking with me, maybe you can put this together into one code and make it streamlined, I'm sure a lot of people would want this function. Appreciate all the help!

[duyrua]

Image Crawler and lightbox2 double number images. you can check for me? thank you.