Grow your CSS skills. Land your dream job.

Using using Lightbox inside a manual slideshow?

  • # May 13, 2012 at 1:55 pm

    Can anyone tell me if this is possible?

    I want to do a slideshow like this (with the “back” and “next” feature), but let’s say you have the slideshow designed inside a horizontal box, but the images are both horizontal and vertical. Since the vertical images will look a lot smaller compared to the horizontal, I want the viewer to have the option of enlarging that vertical image, and that’s where the lightbox come in. But the way the code is designed for the lightbox, I’m not sure how to combine them.

    The lightbox effect: Here.

    Well, here are some screen caps to kind of explain what I’m saying:
    Horizontal
    Vertical

    You can’t fully appreciate the vertical, it appears much smaller inside the box. If I could add the cool lightbox effect, the viewer could simply click that image and it will pop out much larger.

    The SLIDESHOW CODES ( A Javascript file)

      var num=1
    img1 = new Image ()
    img1.src = "IMAGE LINK HERE"
    img2 = new Image ()
    img2.src = "IMAGE LINK HERE"
    img3 = new Image ()
    img3.src = "IMAGE LINK HERE"

    text1 = "Text for Picture One"
    text2 = "Text for Picture Two"
    text3 = "Text for Picture Three"
    text4 = "Text for Picture Four"


    function slideshowUp()
    {
    num=num+1
    if (num==5)
    {num=1}
    document.mypic.src=eval("img"+num+".src")
    document.joe.burns.value=eval("text"+num)
    }


    function slideshowBack()
    {
    num=num-1
    if (num==0)
    {num=4}
    document.mypic.src=eval("img"+num+".src")
    document.joe.burns.value=eval("text"+num)
    }

    The LIGHTBOX CODES

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    test




    Is this possible, and can someone help me?

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".