jqZoom change image source

11,914

Solution 1

A simple way is to unbind the jqZoom whenever the image changes and then re-bind it once you've changed the source of your main pic

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

Solution 2

I had similar problem with your... I've got important tips from that site, please check it... http://paul.leafish.co.uk/articles/drupal/quick_and_dirty_jqzoom_with_drupal_ecommerce_and_imagecache

Solution 3

Old but good js plugin.

I have solved this problem with jQuery, changing the jqimg attribute on the picture source:

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

On the following :

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

Finally obtaining:

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

You can also applies the jQuery "attr" function to change the "src" and "alt" of that div.

Solution 4

This is how you can clean the data from jqzoom:

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

Because jqzoom keeps the data in this object:

$(el).data("jqzoom", obj);

View more solutions

11,914

Author by

Mike

Updated on August 15, 2022

Comments

Mike over 1 year

I have a gallery of 5 thumbnails and one larger image. I have jqZoom tied to the large image so when you mouse over it, you can see a zoomed in version. I'm having trouble when a user clicks an alternate thumbnail. I can get the larger image to change, but the zoomed in image remains the original image. I can't make jqZoom change the zoomed in image to match the thumbnail. Here is an example of what I'm trying to do. You click on the text and the thumbnail changes, but the larger jqZoom image remains the same. How do I change this so that jqZoom loads the new image in 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 your help!!