Search code examples
javascripthtmljquerysrc

How to change src to data-src in certain div


Page with issue: https://373834.myshoptet.com/80-104-cm/

JS code on page:

<div class="slider-in-80-104-cm">&nbsp;</div>
<script>$(".slider-in-80-104-cm").load("/ #products-27")</script>

Load tab content from: https://373834.myshoptet.com - Tab under id #products-27 (see in source code on page)

In Shoptet.cz is possible add products in TITLE PAGE to bs tabs - see in title page. I Need this products in categories (like 80-104-cm etc.)

I use jquery $load content from title page tabs to certain pages (products categories), but on categories pages is loaded ONLY first 4 products with images, but next products is loaded WITHOUT images.

If i change position of products in shoptet admin, always not displayed image on fifth and next products.

I need change src do data-src, because in certain images shoptet load src, but i need display real images in data-src.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://cdn.myshoptet.com/usr/373834.myshoptet.com/user/shop/detail/682_ergonomicke-nositko-fidella-fusion-baby-size-cubic-lines-rustred.jpg?5f592575" alt="Ergonomické nosítko Fidella Fusion BABY SIZE - Cubic Lines Rustred" data-micro-image="https://cdn.myshoptet.com/usr/373834.myshoptet.com/user/shop/big/682_ergonomicke-nositko-fidella-fusion-baby-size-cubic-lines-rustred.jpg?5f592575">

I use many jquery codes from here, but nothing dosen´t function. Thank you.


Solution

  • Try this...

    //lets say your image looks like this, give it an id
    // <img src="something" id="image"/>
    
    //to give it a data attribute you do this
    
    setTimeout(function(){
      $('.slider-in-80-104-cm .image img').each(function(){ 
        $(this).attr('src', $(this).attr('data-src'));
      });
    },1000);