Swiss Army Image slide show - how to link to individual images

[markth]

1) Script Title: Swiss Army Image slide show

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

3) Describe problem: Hi there. Fantastic script John - but...I've searched the forums and can't find a way to randomly access images individually via a link, as opposed to using the "jump to" control.

My client has designed a specific look and feel - where the images are accessed randomly by clicking on the small gray square dots as shown in this mockup:

http://www.haren.org/todd/images/retardt.jpg

Ideally, the images would cross-fade exactly as they do when usinging the "jump to" contol.

Any help would be appreciated.

[jscheuer1]

Well, I added a bunch of extra features to this script for my own amusement at one point:

http://home.comcast.net/~jscheuer1/side/iss_ext/

I believe the script:

http://home.comcast.net/~jscheuer1/s..._ext/sai_ss.js

is updated to support all of the new features. What you are talking about requires this updated script plus only a little additional code on the page though. Most of what added code you will see if you view the page's source is for the changing backgrounds. Here is all that is required for the buttons (added code is red):

<script type="text/javascript">
new inter_slide(slides5, 750, 606)
document.write('<div style="text-align:center;margin-top:5px;">')
for (var i_tem = 0; i_tem < slides5.length; i_tem++)
document.write('<span id="trace0_'+i_tem+'" style="border:1px solid black;cursor:pointer;background-color:'+(i_tem? '#d9dae7' : 'white')+';padding:2px;" onclick="if (iss[0].playing){iss[0].gostop(iss[0].go(\'gostp0\'));setTimeout(\'iss[0].jumper('+[i_tem+1]+')\', 1000);}else{iss[0].jumper('+[i_tem+1]+');}">'+[i_tem+1]+'<\/span> ');
document.write('<\/div>')
</script>

Notes: As written, this added code only works for one slide show on a page. And requires that the slides array be mentioned by name, as shown (here it is slides5).

[markth]

Thank you John! That's exactly what I needed, and with some css tweaks, was able to match the designer's look-n-feel. I've just tested on Safari 2.0 and FF2.0 on mac and FF1.5 and IE6 on Win and it works flawlessly. Much appreciated.

Here's my demo page:
http://www.haren.org/todd/ss.html

One teeny-tiny nit - when it's set to auto-play there is often a slight delay when clicking on an individual image the first time. I think it's waiting for the previous image to finish it's cycle, rather than interrupting. I wasn't able to find where to fix that, and I imagine it's not an easy fix, but I'll probably set no_auto as a workaround. Thanks again for the quick response. - Mark

[jscheuer1]

What you are seeing is the delay involved while waiting for the image whose 'button' you clicked on to load. The show does an incremental preload, but, when you go out of sequence, it needs to load the next image on the spot (unless it is already cached). While this is happening, I chose to continue showing the loaded image, rather than switching to the new one and watching it load. In your demo, this lag time could be cut down considerably if you optimized the images. Also, once optimized, if they are of a small enough aggregate byte size, you might consider preloading them all as the page loads. Once all are preloaded, there should be no lag time.

[markth]

Perfect, thanks for the tips. I'll optimize and preload the images. - Mark

[sgolds]

I've been playing around as well but my coding sucks :-) Would you be so kind as to share your css to put either small blocks or graphics as links.

Steve

[markth]

I modified Jon's code slightly and added some css hooks. So I ended up with:

<script type="text/javascript">
new inter_slide(slides, 335, 223)
document.write('<div id="slidecontainer">')
for (var i_tem = 0; i_tem < slides.length; i_tem++)
document.write('<span id="lspan"></span><span id="trace0_'+i_tem+'" class="ddot" style="background-color:'+(i_tem? '#a0a0a0' : 'white')+';" onClick="if (iss[0].playing){iss[0].gostop(iss[0].go(\'gostp0\'));setTimeout(\'iss[0].jumper('+[i_tem+1]+')\', 1000);}else{iss[0].jumper('+[i_tem+1]+');}" onMouseover="if (iss[0].playing){iss[0].gostop(iss[0].go(\'gostp0\'));setTimeout(\'iss[0].jumper('+[i_tem+1]+')\', 1000);}else{iss[0].jumper('+[i_tem+1]+');}" onMouseout="";><img src="/assets/pixelb.gif" alt="" \/><\/span><span id="rspan"></span>');
document.write('<\/div>')
</script>


And the relevant CSS is as follows:

#slidewrap {
width: 335px;
border: 0px solid red;
margin:0px auto auto 25px;
}

#slidewrap h1 {
font-size: 8pt;
margin:9pt auto 9pt auto;
color:#fff;
}

div#slidecontainer
{
margin-left: auto;
margin-right: auto;
text-align: center;
background: #ccc;
width:335px;
padding: 3px 0px;
}

input {display:none;}

.ddot {
cursorointer;
}

.ddot img {
width: 12px;
height: 12px;
}

#lspan, #rspan {
padding: 0px 3px;
}

[markth]

Jon, I thought you might be interested in seeing the final implementation your script in this project:

http://www.todd-herman.com/video/#miniatures

One question - I ended up using slimbox (tried thickbox and others) because it met my needs. I'm calling it from this line in ss_sai.js

slides.onclick="parent.window.Lightbox.show(this.href, '&copy; Todd Herman 2007');return false;"

But I need to find a way of passing the description as a variable since some of the pages need different descriptions for each image. I've tried lots of things, but it seems like this gets defined further down in the script and is not accessible at the point where slides.onclick is defined. Everything I've tried has resulted in the script failing. Is there something obvious that i'm overlooking here? Many thanks - Mark

[jscheuer1]

slides.onclick="parent.window.Lightbox.show(this.href, this.target);return false;"

For this to work there has to be an href in the array for each image, but you already have that covered. Also, there has to be a caption in the target field for each image in the array, ex:

slides[0]=["/video/miniatures/images/MIN01.jpg", "", "/video/miniatures/images/l/MIN01.jpg", "This here's the caption for this image"];

[OptimusGeorge]

I'd like to do this, but I want to have individual text links and/or image links instead of using either a little box or the items' numbers. Is there any way to do it?

Amazing script by the way... using it throughout an entire site I'm creating.