Question 36699 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

JS/jQuery Dynamically Replace each/multiple IMG on page using thumbnail image from API

I’m struggling to write the proper function to replace each img instance inside the wrapper div’s. The page I’ll be implementing this on will have a dynamic number of wrappers with thumbnails and Vimeo links. I’m trying to dynamically apply the thumbnail, by pulling it from the API, to each img instance accordingly.

Here is a styled page for reference where the first instance works correctly: https://rapt3.webflow.io/projects/tbe-banner-video-22

Here is a codepen with the latest snippet.

var ele = '#wrap';

    $.each($(ele), function()
    {
        var vimeoLink = $("a#vimLink").attr("href");
        var vAPIprefix = "https://vimeo.com/api/oembed.json?url=";
        var url = vAPIprefix + vimeoLink;
        var vURL;
        var img_url;



        $.getJSON( url, function( data ) {
        console.log(data);
        img_url = data.thumbnail_url;
        console.log(`IMG URL: ${img_url}`);
        jQuery('#titleID').replaceWith(img_url);
        $('#thumb').attr("srcset",img_url);

        });

    });
.wrapper {display: flexbox; flex-direction: column;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>



<div id="wrap" class="wrapper">
<div id="titleID">Test</div>
<a id="vimLink" href="https://vimeo.com/566613630">View on Vimeo</a>
<img id="thumb" src="">
</div>

<div id="wrap" class="wrapper">
<div id="titleID">Test</div>
<a id="vimLink" href="https://vimeo.com/747740403/7c08c6505a">View on Vimeo</a>
<img id="thumb" src="">
</div>

<div id="wrap" class="wrapper">
<div id="titleID">Test</div>
<a id="vimLink" href="https://vimeo.com/747740344/d1cc0af377">View on Vimeo</a>
<img id="thumb" src="">
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Okay I've solved it myself after some help from Kinglish. First change was using classes instead of ID's

    You cannot use the same ID tag more than once. The reason why only the first one works is because it is the first instance of the ID. Instead, use classes. So, loop through the .wrapper and use the find() method to target the elements within each wrapper.

    But the other issue was that $.getJSON runs async, causing the replace actions such as $(this).find('.thumb').attr("src", img_url); to fail to run. By moving the replace calls outside of the $.getJSON AND adding this snippet $.ajaxSetup({async: false});, the $.each works properly.


  2. 0

    You cannot use the same ID tag more than once. The reason why only the first one works is because it is the first instance of the ID. Instead, use classes. So, loop through the .wrapper and use the find() method to target the elements within each wrapper.

    I can’t test this, but it should work

    var ele = '.wrapper';

$.each($(ele), function() {
  var vimeoLink = $(this).find("a.vimLink").attr("href");
  var vAPIprefix = "https://vimeo.com/api/oembed.json?url=";
  var url = vAPIprefix + vimeoLink;
  var vURL;
  var img_url;

  $.getJSON(url, function(data) {
    console.log(data);
    img_url = data.thumbnail_url;
    console.log(`IMG URL: ${img_url}`);
    $(this).find('.titleID').html(img_url);
    $(this).find('.thumb').attr("src", img_url);

  });

});
    .wrapper {
  display: flexbox;
  flex-direction: column;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div class="wrapper">
  <div class="titleID">Test</div>
  <a class="vimLink" href="https://vimeo.com/566613630">View on Vimeo</a>
  <img class="thumb" src="">
</div>

<div class="wrapper">
  <div class="titleID">Test</div>
  <a class="vimLink" href="https://vimeo.com/747740403/7c08c6505a">View on Vimeo</a>
  <img class="thumb" src="">
</div>

<div class="wrapper">
  <div class="titleID">Test</div>
  <a class="vimLink" href="https://vimeo.com/747740344/d1cc0af377">View on Vimeo</a>
  <img class="thumb" src="">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search