How to get data-src attribute with jquery?

Question

Actually I want to do when I hover off the first image must be appear again I want to share my structure with you

<div class="tur-list-box">

    <div class="tur-list-content">
        <figure>
          <img data-src="img/assets/tourlist-2.jpg" class="lazy" src="img/assets/placeholder.png" alt="tur sayfası">
          <a href="#" class="figure-overlay">
              <p class="tour-price">
                <span class="price-big">73,</span>
                <span class="price-little">40</span>
                <span class="price-unit">TL*</span>
                <span class="price-block">‘den itibaren</span>
              </p>
          </a>
        </figure><!-- tur resim-->

        <div class="tur-details">
          <h3><a href="#">Hafta Sonu Turları</a></h3>
          <p>15 farklı program</p>
          <i class=" open-tur-toggle fa fa-chevron-down" aria-hidden="true"></i>
        </div><!-- tur detay-->

    </div><!-- tur list content-->

    <div class="tur-list-toggle">
      <ul class="list-unstyled">
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/orta/2016-02/otel_buyuk-abant-oteli_vPYKBnet58y0itPrkpce.jpg">Kakava ( Hıdırellez ) Şenlikleri Alaçatı <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/orta/2016-10/otel_abant-palace-hotel_FTfyg8HYVB9lNeOUMA76.jpg">Ot Festivali Urla Enginar Festivali Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_adana-portakal-cicegi-karnavali_3eO46CjOg4k34ooQM2mA.jpg">Adana Portakal Çiçeği Karnavalı Isparta <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_Ue7lCTZhtuNk6DHTOy5C.jpg">Gül Hasadı Ve Göller Yöresi Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-03/tur_manisa-mesir-macunu-senligi-turu_ElEY2IdzFOfHLe6do7ja.jpg">Manisa Mesir Macunu Şenliği Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_KN8aDpGyF4O6gKABF5d4.jpg">Uçaklı Festival Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
      </ul>
    </div><!-- acilir kapanir alan-->

 </div><!-- tur list box-->
<script>
$(".tur-list-box").hover(
    function(){
        $(this).find(".tur-list-toggle").stop().slideDown();
        $(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-down").addClass("fa-chevron-up");
    },
    function(){
        var getDefaultImg = $(this).find("figure img").data(".lazy");
        console.log(getDefaultImg);
        $(this).find(".tur-list-toggle").stop().slideUp();
        $(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-up").addClass("fa-chevron-down");
    }
);

$('.tur-list-toggle ul li a').hover(
    function(e) {
      e.preventDefault();  
      var getAttr = $(this).attr("data-img");
      $(this).parents(".tur-list-box").find("figure img").attr("src",getAttr);
    },
    function(e) {

    }
);
</script>

and I want to share with you demo link to see how to work

by the way if you can't see data-src on inspect element try to check out on source code (ctrl+U for chrome)

Possible duplicate of [How to get the data-id attribute?](http://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute) — Andrew, Oct 24 '16 at 08:30
Please create a *minimal* version that shows your issue - there's too much code that appears to be completely irrelevant. Please read this [mcve] — freedomn-m, Oct 24 '16 at 08:50
Has your problem been solved? Please mark an answer or ask for more help — Andrew, Oct 24 '16 at 13:27

XYZ · Accepted Answer · 2020-05-26T05:12:50.237

8

 $(this).attr("data-src")

You can check this link for more info How to get the data-id attribute?

edited May 26 '20 at 05:12

answered Oct 24 '16 at 08:28

XYZ

4,450
2
15
31

Try giving an id to your image and then $("#ifOfTheImage").data('src'); – XYZ Oct 24 '16 at 08:34
I know how to get id but I just want to get value of data-src attribute and if I replace attr with data nothing change – ani_css Oct 24 '16 at 08:36
shall I give an id or class all images ? – ani_css Oct 24 '16 at 08:36
You can fetch using both id and class ,bt if it is a dynamically added image please check http://stackoverflow.com/questions/17857880/read-dynamically-created-elements-data-attribute-in-jquery – XYZ Oct 24 '16 at 08:38
my all images has `.lazy` class and I changed with them but nothing changed again and I updated code you can se above – ani_css Oct 24 '16 at 08:43
1

$(this).find("figure img").data(".lazy") What is this .lazy inside data()? – XYZ Oct 24 '16 at 08:48
lazy plugin gave me a data-src attribute I use that is why and gave me this class if I use with #id nothing change or I didn't understand – ani_css Oct 24 '16 at 08:51
$(this).find("figure img.lazy").data("src"); is this you are trying?? – XYZ Oct 24 '16 at 08:53
I added codepen demo here you are: http://codepen.io/cowardguy/pen/KgJxPy – ani_css Oct 24 '16 at 10:13
Your data-src is lost when you are calling lazy();.save the default image src in another data variable also.Then check if the selector you specify is correct by console.log($('selector')); – XYZ Oct 24 '16 at 11:02

Andrew · Answer 2 · 2017-05-10T14:12:02.027

7

$(selector).data("src") will fetch the value of the data-src attribute

https://api.jquery.com/data/

edited May 10 '17 at 14:12

answered Oct 24 '16 at 08:29

Andrew

763
7
21

score 2 · Answer 3 · answered Oct 24 '16 at 08:28

2

You can try using the following line:

var getDefaultImg = $(this).find("figure img").data("src");

More about data function here: https://api.jquery.com/data/

answered Oct 24 '16 at 08:28

arnabkaycee

1,634
13
26

Theodore K. · Answer 4 · 2016-10-24T08:42:07.810

0

You actually want to get the src not the data-src attribute in order to find the source of the image after hover, as you code indicates, so it's var getDefaultImg = $(this).find("figure img").attr("src");.

That's because the lazy load images plugin that you use, replaces the data-src with the src one when loading of the image completes.

For example (taken from the plugin's demo)

<!--image 6 load is complete-->    
<img class="lazy img-responsive" src="images/6.jpg?t=1477297898" style="display: block;">

<!--image 7 not loaded yet-->
<img class="lazy img-responsive" data-src="images/7.jpg?t=1477297898" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">

edited Oct 24 '16 at 08:42

answered Oct 24 '16 at 08:34

Theodore K.

5,058
4
30
46

but if I get src it's give me another images ? by the way I have links item bottom of the box and if hover any links, images chancing with relevant image – ani_css Oct 24 '16 at 08:41
Check this demo I wrote, that's what I suggest: http://codepen.io/8odoros/pen/zKZLyL – Theodore K. Oct 24 '16 at 08:57
No I understand but I have to get data-src not src. because src has placeholder.png and if I hover.off my main image must be default image – ani_css Oct 24 '16 at 10:29

How to get data-src attribute with jquery?

4 Answers4