Hello and welcome to our community! Is this your first visit?
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
    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!

    <script type="text/javascript">
     function replaceImg(path) {
     	var imgDest = document.getElementById('image');
    	var imgSrc = path;
    	imgDest.setAttribute("src", imgSrc);
        <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>');

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