CODEWITHSUNDEEP
jquery
denza
denza

Reputation: 1298

Trying to change the data-zoom-image attribute of an dynamically created <img>

I am trying to change the data-zoom-image attribute of a dynamically created tag but its unsuccesful here is the code bellow:

here is where i create(it's an onclick event) the tag: 

$("#ImageBingingDiv").html('<img id="toZoom" style=" box-shadow: 3px 3px 1px #ccc;" src="'+id+'"   data-zoom-image="'+ id+'" width="'+widthD+'px" height="'+heightD+'" margin="10px"alt=""/>');
$("#ImageBingingDiv").css('height',heightD+12+'px').css('vertical-align','center');
$("#toZoom").on('click', function(){
       $("#toZoom").elevateZoom({

        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500
});  
});

and here is on the other click where it should change:

$("#toZoom").fadeOut('fast', function () {
      $("#toZoom").attr('src', id);
      $("#toZoom").attr('data-zoom-image', id); 
      $("#toZoom").fadeIn('fast');
 });

So everything changes as it should except the zoom is keeping the old data-zoom-image value. I am using elevatezoom plugin.

Upvotes: 3

Views: 4410

Answers (3)

tungns
tungns

Reputation: 96

Maybe it is too late to add my answer, but today I meet this problem like you, and I find a cool and simple solution in this link :

  1. Open jquery.elevatezoom.js file

  2. You can find this line on top:

    self.imageSrc = self.$elem.data("zoom-image") ? self.$elem.data("zoom-image") : self.$elem.attr("src");

  3. Replace it with code below:

    self.imageSrc = self.$elem.attr("src");

  4. Clear your browser cache and enjoy.

Note: this solution is only useable if your big and small image are one.

Upvotes: 0

denza
denza

Reputation: 1298

$("#ImageBingingDiv").html('<img id="toZoom"  style=" display:none;box-shadow:3px 7px 7px rgba(0, 0, 0,0.5);'+curs+' '+marginD+'"  src="./somepath/'+id+'.'+$("#"+id).data("typeim")+'"   data-zoom-image="./somepath/'+ id+'.'+filetype+'" width="'+widthD+'" height="'+heightD+'" alt=""/>'+infoDiv);
$("#ImageBingingDiv").css('height',heightD+12+'px').css('vertical-align','center');

if($("#"+id).data("hwtype")=="h"){
$("#toZoom").on('click', function(){
    if($(".zoomContainer").length == 0 && $( window ).height()<1010) {
     if($("#"+id).data("hwtype")=="w"){
             $("#toZoom").elevateZoom({
              zoomType: "lens",
              lensShape : "rechtangle",
              lensSize    : 200 

            });         
         }
     else{
      $("#toZoom").elevateZoom({
                zoomWindowFadeIn: 500,
                zoomWindowFadeOut: 500,
                lensFadeIn: 500,
                lensFadeOut: 500
            });         
     }
     $("#toZoom").off('click');
    }
}); 
setTimeout(function (){
 $("#toZoom").css("cursor", "url(./images/css/zoom1.png),auto"); 
     },100); 
}   

$("#toZoom").fadeIn(300);
});

Upvotes: 1

Adam Jenkins
Adam Jenkins

Reputation: 55613

Changing an attribute won't do anything. What you want to do is to tell the plugin to actually change the zoom for you.

Looking at the plugin documentation itself, I can't see any specific method you should call, I so I would suggest that you try to re-init the plugin after you've changed the zoom attribute, like so:

$("#toZoom").fadeOut('fast', function () {
      $(this)
        .attr('src',id)
        .attr('data-zoom-image',id)
        .elevateZoom({ /* your default zoom options here */ })
        .fadeIn('fast');
 });

Upvotes: 0

Related Questions