Hey,
I am using JS to alternate the images on my website.. Basically i have a main image and several thumbnails below it whihc i caan hover over which changes the main image to that i have just hovered over, you can see here:-
http://www.skindeepapparel.com/lou/mens.php?selection_id=2
But these images are currently default images that i have used for testing purposes, but now i want to pull these images from a database. I have the folllowing code:-
<script type="text/javascript">
$(function() {
$(".jqzoom").jqzoom();
});
function loadImg(img){
$('.main-image').hide();
$('#main-image-'+img).show();
}
$(function(){
loadImg(0);
});
</script>
include("conn.php");
$query = "SELECT * FROM category_selection WHERE selection_id = '".$_GET['selection_id']."'";
$result = mysql_query ($query);
while($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
echo "<h2>$row[item_name]</h2>";
echo "<p class='img-container'><a href='garments/pic2.jpg' class='jqzoom' title='$row[item_name]'><img src='garments/pic2.jpg' border='1;' width='320' height='350' class='left' id='mainImage'/></a>";
echo "<br />";
echo "<a href='garments/$row[main_image]' rel='lightbox'><img src='garments/pic2.jpg' border='1;' width='50' height='50' class='left' onMouseOver='loadImg(0)'/></a>";
echo "<a href='garments/$row[main_image]' rel='lightbox'><img src='garments/pic12.jpg' border='1;' width='50' height='50' class='left' style='margin-left:-4px' onMouseOver='loadImg(1)'/></a>";
echo "<a href='garments/$row[main_image]' rel='lightbox'><img src='garments/pic11.jpg' border='1;' width='50' height='50' class='left' style='margin-left:-4px' onMouseOver='loadImg(2)'/></a>";
echo "<a href='garments/$row[main_image]' rel='lightbox'><img src='garments/pic13.jpg' border='1;' width='50' height='50' class='left' style='margin-left:-4px' onMouseOver='loadImg(3)'/></a>";
echo "<img src='images/mag.png' alt='' style='padding-top:20px;width:30px;margin-left:15px;'><em><BR>hover to zoom</em>";
echo "</p>";
echo "<p class'right' style='padding-top:20px'><h2 style='margin-top:-15px;'>Product Information</h2>$row[item_description]<BR><BR>";
echo "<span style='font-size:10px;color:#25aae1'>Available Colours: </span>$row[colours]<BR><BR>";
echo "<span style='font-size:20px;'>Price: </span><span style='font-size:20px;color:red'>£$row[item_price]</span><BR><BR>";
echo "<span>View stockists or contact us now to buy.</span>";
echo "</p>";
echo "<div class='clearer'></div>";
}
mysql_close();
As you can see my images are currently using default images such as pic1.jpg etc..
I want to use $row[image_1], $row[image_2], $row[image_3], $row[image_4]
How can i change the code to do this??
Regards
