Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question thumbnail image select missing href for lightbox

    Hello, I would like some help with a two stage display of thumbnails. I have managed to display all thumbnail product images of my targetId in a scrolling div from the contents of my targetId image folder. I have also managed to display the thumbnail as a larger image in a html image. I would now like to apply a href link to the larger image so that I can display using jsquery lightbox, but I can't figure out what code i need and where it should go. Please help!

    Code:
    <head>
    <script type="text/javascript">
     function replaceImg(path) {
     	var imgDest = document.getElementById('image');
    	var imgSrc = path;
    	imgDest.setAttribute("src", imgSrc);
    	}
    </script>
    
    </head>
    <body>
    
        <div class="productimage"><img id="image" img src="product_images/<?php echo $targetID; ?>/<?php echo $targetID; ?>.jpg" width="253" height="378" border="0" /></div>
    
        <div class="gallerypics"><?php
    		$counter = 0; 
         foreach (glob("product_images/$targetID/thumb/*.jpg") as $pathToThumb)
        {
            $filename = basename($pathToThumb);
            echo ('<div class="gallerypicsframe"><a href="javascript:replaceImg(\'product_images/'.$targetID.'/'.$filename.'\')"><img src="'.$pathToThumb.'"" width="60" height="90" border="0"/></a></div>');
            $counter++;
        }
    ?>
    
    </body>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Usually jQuery lightBox takes the following markup
    Code:
    <div id="container">
       <a href="LARGEIMAGE.jpg"><img src="SMALLIMAGE.jpg"/></a>
       <a href="LARGEIMAGE.jpg"><img src="SMALLIMAGE.jpg"/></a>
       ...
    </div>
    So if you manage to get your markup into this format, you can have lightBoxes with just
    Code:
    $('#container a').lightBox();


  •  

    LinkBacks (?)


    Tags for this Thread

    Posting Permissions

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