Geek Answers Handbook

JqZoom change image source

I have a gallery of 5 thumbnails and one enlarged image. I have jqZoom attached to a large image, so when you hover over it, you can see a larger version. I am having problems when the user clicks an alternative thumbnail. I can resize a larger image, but the enlarged image remains original. I can not get jqZoom to change the enlarged image to fit the thumbnail. Here is an example of what I'm trying to do. You click on the text and change the thumbnail, but the larger image jqZoom remains unchanged. How to change this so that jqZoom uploads a new image to the zoom area?

<script type="text/javascript"> $(function() { var options = { zoomWidth: 250, zoomHeight: 250, showEffect: 'fadein', hideEffect: 'fadeout', fadeinSpeed: 'fast', fadeoutSpeed: 'fast', showPreload: true, title: false, xOffset: 100 }; $(".jqzoom").jqzoom(options); }); function changeImgSrc() { document.getElementById('bigImage').src = '4.jpg'; document.getElementById('smallImage').src = '3.jpg'; var options = { zoomWidth: 400, zoomHeight: 400, showEffect: 'fadein', hideEffect: 'fadeout', fadeinSpeed: 'fast', fadeoutSpeed: 'fast', showPreload: true, title: false, xOffset: 100, containerImgSmall: '3.jpg', containerImgLarge: '4.jpg' }; $(".jqzoom").jqzoom(options); } </script> </head> <body> <div id="content" style="margin-top:100px;margin-left:100px;"> <a id="bigImage" href="2.jpg" class="jqzoom" style="" title="Product Zoom"> <img id="smallImage" src="1.jpg" title="Product Zoom" style="border: 0px none;"> </a></select> <br> <div id="img" onClick="document.getElementById('bigImage').src = '4.jpg';changeImgSrc();">click here to change source</div> </div>

Thanks for the help!

+6
image-manipulation
source share
6 answers

An easy way is to untie jqZoom whenever the image changes and then relink it as soon as you change the source code of the main page

 var jqzoomOptions = { zoomWidth: 438, zoomHeight: 390, title: false } $("#mainPic").jqzoom(jqzoomOptions); /* image thumbs */ $("#productPicThumbs a").click(function(){ // change pic source here $("#mainPic").unbind(); $("#mainPic").jqzoom(jqzoomOptions); return false; });
+8
source share

I had a similar problem with yours ... I have important tips from this site, please check this out ... http://paul.leafish.co.uk/articles/drupal/quick_and_dirty_jqzoom_with_drupal_ecommerce_and_imagecache

+3
source share

Old but good js plugin.

I solved this problem with jQuery by changing the jqimg attribute to the image source:

 $("#foto_produto").attr("jqimg", "domain-url.com/sample3.jpg");

Further:

 <img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample2.jpg" alt="domain-url.com/sample1.jpg">

Finally, we get:

 <img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample3.jpg" alt="domain-url.com/sample1.jpg">

You can also use the jQuery attr function to change the src and alt of this div.

+1
source share

Here's how you can clear data from jqzoom :

 $('.jqclass').removeData('jqzoom');

Since jqzoom stores data in this object:

 $(el).data("jqzoom", obj);
+1
source share

Removing the main image and re-adding it should make it work, here is an example

 $('a.main_thumb').jqzoom({ title: false }); $("a.thumb").click(function (e) { e.preventDefault(); var thumbUrl = $(this).attr("href"); var thumbImg = $(this).find("img").attr("data-img"); $(".main_thumb").remove(); $(".current_thumbnail").append("<a href='" + thumbUrl + "' class='main_thumb'><img src='" + thumbImg + "' /></a>"); $('a.main_thumb').jqzoom({ title: false }); });
0
source share

In the latest version of jQZoom you can create galleries (jQZoom can manage it for you).

1. Enter the gallery ID in your main attribute "rel".

 <a href="images/big-1.jpg" class="zoom" rel="gallery-1"> <img src="images/small-1.jpg" /> </a>

2. Set the "class" and "rel" attributes of your thumbnails.

The zoomThumbActive class zoomThumbActive attached to your jQZoom sketches. By default, set this class for the selected sketch (it must be the same image in the main anchor element)

 <ul> <li> <a class="zoomThumbActive" href="javascript:void(0);" rel="{ gallery: 'gallery-1', smallimage: 'images/small-1.jpg', largeimage: 'images/big-1.jpg' }"> <img src="images/thumbnail-1.jpg"> </a> </li> <li> <a href="javascript:void(0);" rel="{ gallery: 'gallery-1', smallimage: 'images/small-2.jpg', largeimage: 'images/big-2.jpg' }"> <img src="images/thumbnail-2.jpg"> </a> </li> <li> <!-- ... --> </li> </ul>

The structure of the rel sketch attribute is very important.

Basic elements:

  • gallery : identifier of the gallery to which it belongs,
  • smallimage : path to a small image (loaded by clicking on thumbnail),
  • largeimage : the path to a large image.
0
source share

More articles:


All Articles