jQuery Zoom plugin for image zoom

[billy_111]

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

 

 

[rhodesa]

Look at the documentation for jqzoom...there should be something to rebuild the widget with the new image source.

 

The other (and probably better option) is to have all 4 big images on the page, and use CSS to hide/show the one you want...instead of changing the image source.

[billy_111]

Hey,

 

Thanks, is there any examples/tutorials i can have a look at regarding the option you suggested via the CSS hide/show option..?

 

If i use this way woull i be able to use the image zoom on the visible image?

 

Regards

[rhodesa]

it's tough writing working code since i can't run your code. but you just need to put the the code for the big image in a DIV...then repeat that for all the images. hide all but the first DIV with CSS. Then change your loadImg function to show the write DIV...like so:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
function loadImg(img){
  $('.main-image').hide();
  $('#main-image-'+img).show();
}
$(function(){
  loadImg(0);
});
</script>
<div id='main-image-0' class='main-image'><a href='garments/pic2.jpg' class='jqzoom' title='$row[item_name]'><img src='garments/pic2.jpg' border='1;' width='320' height='350' class='left' /></a></div>
<div id='main-image-1' class='main-image'><a href='garments/pic12.jpg' class='jqzoom' title='$row[item_name]'><img src='garments/pic12.jpg' border='1;' width='320' height='350' class='left' /></a></div>
<div id='main-image-2' class='main-image'><a href='garments/pic11.jpg' class='jqzoom' title='$row[item_name]'><img src='garments/pic11.jpg' border='1;' width='320' height='350' class='left' /></a></div>
<div id='main-image-3' class='main-image'><a href='garments/pic13.jpg' class='jqzoom' title='$row[item_name]'><img src='garments/pic13.jpg' border='1;' width='320' height='350' class='left' /></a></div>

<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>
<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>
<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>
<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>

[billy_111]

Hey,

 

I dont know what this code is doing, when i load the page it shows all the images, and does not hide anything (think i need to hide 3 of the using css whihc i dont know how to do)

 

But the zoom JS does not work when i hover over the main image..

 

See here:-

 

http://www.skindeepapparel.com/lou/mens.php?selection_id=2

 

My code is shown below:-

 

<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" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">

$(function() {
$(".jqzoom").jqzoom();
});

function loadImg(img){
  $('.main-image').hide();
  $('#main-image-'+img).show();
}
$(function(){
  loadImg(0);
});
</script>

 

And then in PHP i have the following code to relate to the JS:-

 

			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'>";

			echo "<div id='main-image-0' class='main-image'><a href='garments/pic2.jpg' class='jqzoom' title='$row[item_name]'><img src='garments/pic2.jpg' border='1;' width='320' height='350' class='left' /></a></div>";
			echo "<div id='main-image-1' class='main-image'><a href='garments/pic12.jpg' class='jqzoom' title='$row[item_name]'><img src='garments/pic12.jpg' border='1;' width='320' height='350' class='left' /></a></div>";
			echo "<div id='main-image-2' class='main-image'><a href='garments/pic11.jpg' class='jqzoom' title='$row[item_name]'><img src='garments/pic11.jpg' border='1;' width='320' height='350' class='left' /></a></div>";
			echo "<div id='main-image-3' class='main-image'><a href='garments/pic13.jpg' class='jqzoom' title='$row[item_name]'><img src='garments/pic13.jpg' border='1;' width='320' height='350' class='left' /></a></div>";

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

 

Regards

[billy_111]

As im currently testing the code i have moved the page to the following:-

 

http://www.skindeepapparel.com/lou/test.php?selection_id=2

 

I hope you can help me with this, im in my final stages of the site, but this is something that my client has asked for 

 

Regards

[rhodesa]

Remove this line:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

...i had it in there for my testing (since i don't have jquery locally)

[billy_111]

Hey,

 

I have tried, and it is now doing something odd, im finding it hard to hover over the image, you can see the site to understand what i mean..

 

Should the Zoom work on the other images, it only works for one of the images..