251 users online (0 members and 251 guests)  

  Results 1 to 2 of 2


  1. Swap Image then Open Lightbox    Forum: Javascript Forum
    Replies: 0
  2. image swap    Forum: CSS Forum
    Replies: 1
  3. image swap with links???    Forum: Javascript Forum
    Replies: 4
  4. How do I swap an image for BOTH an image and a sound?    Forum: Website Scripts Forum
    Replies: 1
  1. #1
    zero1973's Avatar
    New User

    Join Date
    Aug 2009

    Image swap and Lightbox

    I am working on a project where I have thumbnails and a main picture. When a user mouses over the thumbnail the main picture changes (to the large version of the thumb). I have that part working where I struggle is that I'd like the large picture clickable to bring up the "lightbox version". I'm not sure how the <a href...rel...title...> tag can get teh dynamic content.

    I attatched a sample of code that shows the image swap and a hardcoded lighbox <A> tag but I want it dynamic... thank you much


    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>

    <script type="text/javascript">

    var curImage;

    function showImage(imgName) {
    curImage = document.getElementById('currentImg');
    var thePath = '';
    var theSource = thePath + imgName;
    curImage.src = theSource;
    curImage.alt = imgName;
    curImage.title = imgName;



    <a href="main1.png" rel="lightbox[gallery]" title="about pic">
    <img id="currentImg" src="main_drive_AC.png"> </a>

    <img src="thumb1.png" onMouseOver="showImage('main1.png');">
    <img src="thumb2.png" onMouseOver="showImage('main2.png');">


  2. #2
    jthayne's Avatar

    Join Date
    Aug 2008

    Re: Image swap and Lightbox

    Look at the script here.

Tags for this Thread