CODEWITHSUNDEEP
image-manipulation
Mike
Mike

Reputation: 223

jqZoom change image source

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

Upvotes: 6

Views: 11967

Answers (6)

Guillaume
Guillaume

Reputation: 581

With the last version of jQZoom you can create galleries (jQZoom can manage it for you).

1.Attach the gallery ID to your main anchor "rel" attribute.

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

2.Manage your thumbnails "class" and "rel" attributes.

The class zoomThumbActive is attached to your thumbnails by jQZoom. By default specify this class to the selected thumbnail (it should be the same image in your 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 thumbnail rel attribute is very important.

The base elements are :

  • gallery: the ID of the gallery to which it belongs,
  • smallimage: the path to the small image (loaded when you click on the thumbnail),
  • largeimage: the path to the big image.

Upvotes: 0

Ionnini
Ionnini

Reputation: 11

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

Upvotes: 1

Ahmed Galal
Ahmed Galal

Reputation: 1228

Removing the main image and re-appending 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 });
    });

Upvotes: 0

otaviocarvalho
otaviocarvalho

Reputation: 61

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.

Upvotes: 1

KPV
KPV

Reputation: 156

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

Upvotes: 8

Onur
Onur

Reputation: 31

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

Upvotes: 3

Related Questions