Conveyor belt slideshow script

[jjs110]

1) Script Title: Conveyor belt slideshow script

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

See application here: http://www.ihlbooks.com/index.html

3) Describe problem: There are two issues.

The first one is that when I tried to attach a javascript to the link attached to each book cover that's showing on the conveyor belt, nothing shows up at all. So I fell back on a regular link, but all it does is send the visitor to the corresponding page rather than have the link trigger a popup window and keep the main page in view.

In other words, instead of

leftrightslide[0]='<a href="http://www.ihlbooks.com/books/freedomsbattle.html"><img src="http://www.ihlbooks.com/images/freedomsbattle.jpg" border=0></a>'

I'd like to have

leftrightslide[0]='<a href="javascript:popupWindow('http://www.ihlbooks.com/books/freedomsbattle.html')"><img src="http://www.ihlbooks.com/images/freedomsbattle.jpg" border=0></a>'

but that doesn't seem to work. Obviously I am making a serious mistake here, but I don't know enough to figure out what.

Anyone has an idea on whether what I would like to achieve is even possible?

The second problem is that with the current setup, every time I come back to the main page, the conveyor belt starts anew from the beginning instead of picking up where it left off when a book cover was clicked on. Can this be fixed?

Thanks for any help.

J.J.

[Snookerman]

leftrightslide[0]='<a href="javascriptopupWindow('http://www.ihlbooks.com/books/freedomsbattle.html')"><img src="http://www.ihlbooks.com/images/freedomsbattle.jpg" border=0></a>'

This can be achieved by this:

leftrightslide[0]='<a href="http://www.ihlbooks.com/books/freedomsbattle.html" target="_blank"><img src="http://www.ihlbooks.com/images/freedomsbattle.jpg" border=0></a>'

That should also solve your second problems since it is dependent on the "current setup".

[jscheuer1]

As long as your popupWindow() function will work on a regular link you can actually do it the way you want, but proper syntax as regards nested delimiters (in this case the single quote ' character) must be followed. They need to be escaped with the down slash (\):

leftrightslide[0]='<a href="javascript:popupWindow(\'http://www.ihlbooks.com/books/freedomsbattle.html\')"><img src="http://www.ihlbooks.com/images/freedomsbattle.jpg" border=0></a>'

But, for various reasons, this would be a better approach:

leftrightslide[0]='<a href="http://www.ihlbooks.com/books/freedomsbattle.html" onclick="popupWindow(this.href);return false;"><img src="http://www.ihlbooks.com/images/freedomsbattle.jpg" border=0></a>'

And - unless your popupWindow() function adds any functionality over simply using target="_blank" - Snookerman's idea will do just fine.

[jjs110]

Guys (snookerman and jschneuer1),

I can't tell you how grateful I am for your help. It worked perfectly! I am besides myself! Thank you soooooo much! See here for a sample: www.edgarcayceproducts.com/healthbooks.html .

You have been tremendously helpful. Thanks again!

J.J.

[jjs110]

Well, I'm back... I didn't think I would need to pick your brains again, but I have another problem. I'm trying to add a simple title and a <br> to add another image link under each one of the pictures that are part of the slideshow conveyor belt. See here: http://www.mideastbooks.com .

The script you guys helped me figure out the first time around was:

leftrightslide[0]='<a href="http://www.mideastbooks.com/books/israelahistory.html" onclick="popupWindow(this.href);return false;"><img src="http://www.mideastbooks.com/images/israelahistory.jpg" border=0></a>'

But now where do I insert the words for the title of each book to show under the image, and add another link with an order button?

Actually, I'd be very happy just to add the words describing the product. I can add the button as I did for the graphic file (israelahistory.jpg in this case), but how do I get it to go under the name of the product itself?

Thank you for whatever help you are willing to provide.

J.J.

[jscheuer1]

You have some other problems:

http://www.mideastbooks.com/images/waitingforisrael.jpg

and:

http://www.mideastbooks.com/books/waitingforisrael.html

are missing.

Your onload event (MM_preloadImages) is riddled with illegal characters. But even if it weren't, it is being overridden by the conveyor belt script's onload event. To deal with that, replace it with:

<body bgcolor="#F2611A" text="#000000" leftmargin="0" topmargin="0" marginwidth="1" marginheight="0" onload="fillup();MM_preloadImages('http://www.mideastbooks.com/images/h-home-on.gif','http://www.mideastbooks.com/images/h-home-off.gif','http://www.mideastbooks.com/images/h-contact-on.gif','http://www.mideastbooks.com/images/h-contact-off.gif','http://www.mideastbooks.com/images/h-israel-off.gif','http://www.mideastbooks.com/images/h-israel-on.gif','http://www.mideastbooks.com/images/h-islam-off.gif','http://www.mideastbooks.com/images/h-islam-on.gif','http://www.mideastbooks.com/images/h-genocides-off.gif','http://www.mideastbooks.com/images/h-genocides-on.gif','http://www.mideastbooks.com/images/h-holocaust-off.gif','http://www.mideastbooks.com/images/h-holocaust-on.gif','http://www.mideastbooks.com/images/h-terrorism-off.gif','http://www.mideastbooks.com/images/h-terrorism-on.gif','http://www.mideastbooks.com/images/h-titles-on.gif','http://www.mideastbooks.com/images/h-titles-off.gif','http://www.mideastbooks.com/images/h-authors-on.gif','http://www.mideastbooks.com/images/h-authors-off.gif','http://www.mideastbooks.com/images/h-antisemitism-on.gif','http://www.mideastbooks.com/images/h-antisemitism-off.gif','http://www.mideastbooks.com/images/h-miscellaneous-on.gif','http://www.mideastbooks.com/images/h-miscellaneous-off.gif','http://www.mideastbooks.com/images/h-history-on.gif','http://www.mideastbooks.com/images/h-history-off.gif','http://www.mideastbooks.com/images/h-camera-on.gif','http://www.mideastbooks.com/images/h-camera-off.gif')">

and remove:

window.onload=fillup

from the conveyor script.

Now, I'm not entirely clear on what you want to place in the conveyor with the images, but to do anything like that, you will need a table and a little extra height. So change:

var sliderheight="177px"

to (approximately):

var sliderheight="207px"

And change:

//Specify gap between each image (use HTML):
var imagegap=" "

to:

//Specify gap between each image (use HTML):
var imagegap="</td><td>"

And change:

leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'

to:

leftrightslide='<table><tr><td>'+leftrightslide.join(imagegap)+'</td></tr></table>'

And change:

document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')

to:

document.write('<div id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</div>')

Once you have all that, you may include a <br> and whatever you want for each book, ex:

leftrightslide[0]='<a href="http://www.mideastbooks.com/books/israelahistory.html" onclick="popupWindow(this.href);return false;"><img src="http://www.mideastbooks.com/images/israelahistory.jpg" border=0></a><br>Whatever'