How to control the Lightbox image viewer with a select

[Eidher]

1) Script Title: Lightbox image viewer 2.03a

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

3) Describe problem:

I need to control the Lightbox image viewer with a select form or with a javascript function using the onchange event of the select. How to do that?

In the example is used this:


<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>


But I dont have a link or thumbnail, I have a select like this:


<SELECT name="images" onchange="viewer();">
<OPTION VALUE=1>Value1</OPTION>
<OPTION VALUE=2>Value2</OPTION>
</SELECT>

Thanks.

[jscheuer1]

As far as I know, you would still need links, at least that would be the easiest approach. They could be in a division with the style display:none; though. That way they wouldn't be seen, ex:


<div style="display:none">
<a id="im1" href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<a id="im2" href="images/image-2.jpg" rel="lightbox" title="my caption">image #2</a>
</div>

You can have as many of those as you need for all of your images. Then the select could be run like so:


<select
onchange="if(this.selectedIndex!=0)
myLightbox.start(document.getElementById(this.options[this.selectedIndex].value));">
<option>Select Image</option>
<option value="im1">Image 1</option>
<option value="im2">Image 2</option>
</select>