thumbnail image select missing href for lightbox

JSanday · 06-01-2011, 11:34 PM

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>

devnull69 · 06-02-2011, 08:59 AM

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();