Results 1 to 2 of 2

Thread: How to control the Lightbox image viewer with a select

  1. #1
    Join Date
    Mar 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default How to control the Lightbox image viewer with a select

    1) Script Title: Lightbox image viewer 2.03a

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/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:

    Code:
    <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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Eidher (03-10-2008)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •