CODEWITHSUNDEEP
jqueryjquery-data
kamran shah
kamran shah

Reputation: 117

jQuery switching the value of Data Attribute

I am having some trouble with updating the value of data attribute. I have a large image and below it few thumbnails. What I wanted to do is when any of the thumbnail is clicked then it would update the image source and data attribute value for the big image. So far I am able to change the source but not the data attribute. I did see some similar questions and tried there solutions but so far non worked for me.

Here is my code:

HTML (I am using dummy image source just to explain my code)

<div class="bigImage">
  <img id="zoom_Photo" src="NormalSize.jpg" data-zoom-image="BigSize.jpg" />
</div>
<div id="additional-Photos">
    <img src="thumb1.jpg" data-pop="NormalSizeThumb1.jpg" />
    <img src="thumb2.jpg" data-pop="NormalSizeThumb2.jpg" />
    <img src="thumb3.jpg" data-pop="NormalSizeThumb3.jpg" />
</div>
         // This Script Triggers the Zoom Effect on Big Image
         <script>
            $('#zoom_Photo').elevateZoom({
              zoomType: "inner",
              cursor: "crosshair",
              zoomWindowFadeIn: 500,
              zoomWindowFadeOut: 750
           }); 
        </script>

jQuery

$('#additional-Photos .product-thumb').click(function(){
    var imgSrc = $(this).data('pop');
    $('#zoom_Photo').attr('src',imgSrc);
    $('#zoom_Photo').data('zoom-image',imgSrc);
});

The image source for image ID #zoom_Photo is changing when clicked but its data attribute data-zoom-image is not updating.

I am using a jQuery plugin to zoom the images and the data-zoom-image attibute is required by it. The plugin is Elevate Zoom.

Upvotes: 0

Views: 610

Answers (2)

Erik Philips
Erik Philips

Reputation: 54638

I am having some trouble with updating the value of data attribute.

Per the jQuery documentation for .data().

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

Thus the attribute in the DOM never changes using this method. If you need to change the attribute, use .attr().

yes this as well $('#zoom_Photo').attr('data-zoom-image', imgSrc) but the source code is still showing the previous value. data-zoom-image value triggers the zoom effect for that image. that has to be updated as well

Yes because the source code never changes, it's the source of the document, not the current value.

Upvotes: 1

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

EDIT

Your «I forgot to mention» leads to something else...
What said earlier is still true.

But since there is a plugin instantiated on that element, whatever you change to it won't reflect in the plugin instance.

Now... The plugin is creating new elements. It is not you original <img> that is showing.

Look for the "gallery" feature... And come back with a new question if there is an issue.

Previous answer

Both are uptating...

But for the second one, the data value, it isn't reflecting in the view-source. That's all.

If your try a console.log($('#zoom_Photo').data('zoom-image')); after the update, you will have the right value. To have it reflecting in the view-source, you would have to update the attribute itself...

Upvotes: 2

Related Questions