Hey guys,
I am trying to use a JS zoom facility on my website. What i want to acheive is have a large image and when a user hovers over it, the zoom Js zooms into the image, and also have a number of thumbnails below the main image so when a user hovers over them it changes the main image..
Now the problem i am having is when i hover over the thumbnails it DOES change the main image but still zooms into the old image..
This may sound confusing so i have provided you with a link to my website so you can see what i mean:-
http://www.skindeepapparel.com/lou/mens.php?selection_id=2
Now the code i have is shown below. I am using test images to see if it works then eventually i will pull the images out from the database:-
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".jqzoom").jqzoom();
});
function loadImg(img){
var imgName = "mainImage";
var srcs = ["garments/pic2.jpg",
"garments/pic12.jpg",
"garments/pic11.jpg",
"garments/pic13.jpg",
];
document.images[imgName].src=srcs[img];
}
</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();
look at the images, they are linked to the JS, but why when i hover does it not zoom into the right image?
Regards