Develop Reference

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>

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>

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.

Assign a divs id to a variable

I have built rock paper scissors to run in a terminal/console window using prompts and alerts. I am now in the process of converting the game into something that is playable in a web browser with the use of the jQuery library.
To accomplish this I have made images of each of the hands: Rock paper & scissors. Now, I want a user to click on one of the hands and assign that move to a variable named move. Here is my code:
HTML:
<div class="grow pic">
<img src="rock.png" class=id="rock" alt="rock" height="75" width="75">
</div>
<div class="grow pic">
<img src="paper.png" id="paper" alt="paper" height="75" width="75">
</div>
<div class="grow pic">
<img src="scissor.png" id="scissors" alt="scissors" height="75" width="75">
</div>
And the jQuery I'm trying to implement:
var move;
$( "#id" ).click(function() {
move = $(this).attr('id');
});
So the question here, is how exactly do I make the id of an image assign to a variable named move. I keep getting an error saying "Uncaught ReferenceError: move is not defined(…)".

This makes no sense:
$( "#id" ).click(function() {
It attempts to select an element with the ID value 'id'. Instead, target images that are descendants of elements with a common class:
$('.pic img').click(function() {
Now your function should work as it is.

You may use this like:
$("div img").click(function(){
var move = $(this).attr('id');
});

var move;
$( ".id" ).click(function() {
move = $(this).attr('id');
$('#result').html(move);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grow pic">
<img src="rock.png" class=id id="rock" alt="rock" height="75" width="75">
</div>
<div class="grow pic">
<img src="paper.png" class=id id="paper" alt="paper" height="75" width="75">
</div>
<div class="grow pic">
<img src="scissor.png" class=id id="scissors" alt="scissors" height="75" width="75">
</div>
<div id=result></div>
Run the click event against the class

try
var move = document.getElementsByTagName(this).getAttribute("id");

how to add variable in the img src html tag

<script>
var domain_name="www.abc.com"
</script>
<div id="tp_otherinfo" style="top: 558px;">
<div class="cls_footerImg" id="divFooterMainqqqq">
<div id="footerimgDiv1">
<img src=domain_name+"/images/place1a.svg"><span id="id_places" class="clsFooterHead">1 Places</span></div>
<div class="footerimgDiv2">
<img src=domain_name+"/images/calendara.svg"><span id="id_days" class="clsFooterHead">3 Days</span></div>
<div class="footerimgDiv2">
<img src=domain_name+"/images/photos1a.svg"><span id="id_photos" class="clsFooterHead">8 Photos</span></div>
<div class="footerimgDiv2">
<img src=domain_name+"/images/reviews1a.svg"><span id="id_review" class="clsFooterHead">7 Reviews</span></div>
<div class="footerimgDiv2">
<img src=domain_name+"/images/timea.svg"><span id="id_date" class="clsFooterHead">6th February 2014</span></div>
</div>
</div>
I want to add a variable in img src.
I have many img src like this ..i cant keep on changing the domain change so i wanted to add a variable in place of relative image path

You can use below work around to replace your domain_name for src attributes.
First correct your markup and put src value with domain_name in double quotes like below
<img src="domain_name/images/place1a.svg">
Use jQuery to replace all domain_name with variable value -
<script>
var domain_name="www.abc.com"
$(function(){
$('#tp_otherinfo').find('img').each(function(){
var srcpath = $(this).attr('src');
srcpath = srcpath.replace('domain_name',domain_name);
$(this).attr('src',srcpath);
});
});
</script>

If you are using Razor Engine you can write it like this:
#{ string domain_name = "www.abc.com"; }
....
<img src="#domain_name/images/etc."

Here is for php language. You can write your div in html, and inside img tag place like this.
<?php echo "http://" . $_SERVER['SERVER_NAME'] ."and here you add your image.png or whatever" ?>

try this :
<script>
//have an array with all the domains
var domain_names = ["domain1.com", "domain2.com", "domain3.com", "domain4.com", "domain5.com", "domain6.com", "domain7.com"];
//now set them
$(document).ready(function () {
var i = 0;
$("#tp_otherinfo img").each(function () {
var src = $(this).attr('src');
src = domain_names[i] + src;
$(this).attr('src', src);
i++;
});
});
</script>
<div id="tp_otherinfo" style="top: 558px;">
<div class="cls_footerImg" id="divFooterMainqqqq">
<div id="footerimgDiv1">
<img src="/images/place1a.svg"><span id="id_places" class="clsFooterHead">1 Places</span>
</div>
<div class="footerimgDiv2">
<img src="/images/calendara.svg"><span id="id_days" class="clsFooterHead">3 Days</span>
</div>
<div class="footerimgDiv2">
<img src="/images/photos1a.svg"><span id="id_photos" class="clsFooterHead">8 Photos</span>
</div>
<div class="footerimgDiv2">
<img src="/images/reviews1a.svg"><span id="id_review" class="clsFooterHead">7 Reviews</span>
</div>
<div class="footerimgDiv2">
<img src="/images/timea.svg"><span id="id_date" class="clsFooterHead">6th February 2014</span>
</div>
</div>
</div>

How to get each element and assign them an inline style contained inside the child

I've been looking for an elegant solution for a day now and I am pretty new to jQuery.
I would like to get each .figure and assign them an inline style where the value is contained inside the child element via a custom data- attribute :
<div>
<a href="#">
<div class="figure">
<img class="thumbnail" data-thumbnail="images-01-thumbnail.png" src="images-01.png" />
</div>
<div class="content">
<h3>Sale</h3>
<h4>Discover our latest styles</h4>
</div>
</a>
<a href="#">
<div class="figure">
<img class="thumbnail" data-thumbnail="images-02-thumbnail.png" src="images-02.png" />
</div>
<div class="content">
<h3>Free Shipping</h3>
<h4>When you buy xxxxxx</h4>
</div>
</a>
<a href="#">
<div class="figure">
<img class="thumbnail" data-thumbnail="images-03-thumbnail.png" src="images-03.png" />
</div>
<div class="content">
<h3>Free Shipping</h3>
<h4>When you buy xxxxxx</h4>
</div>
</a>
</div>
In other words, the results would be :
...
<div class="figure" style="background: url(images-01-thumbnail.png);">
...
<div class="figure" style="background: url(images-02-thumbnail.png);">
...
<div class="figure" style="background: url(images-03-thumbnail.png);">
...
Also, I'm always ready something about jQuery so if you have any books about JavaScript or jQuery to suggest, that is always appreciated.

You can iterate over all .picture elements, find the image descendant and read its data attribute:
$('.figure').css('background', function() {
return 'url(' + $(this).children('img').data('thumbnail') + ')';
});
Some methods, like .css even accept functions so that you can iterate over the selected elements implicitly.
Reference: .css, .children, .data

you can iterate over each item with the class thumbnail and set the css property to the closet div.
$('.thumbnail').each(function() {
var $this = $(this),
$background = $this.data('thumbnail');
$this.closest('.figure').css({background : $background} )
});

This should work
$("[data-thumbnail]").each(function ()
{
var $this = $(this), url = $this.data("thumbnail");
$this.parents(".figure").css("background-image", 'url("' + url + '")');
});

How about this (Working code example: http://jsfiddle.net/jpbH2/2/):
var pathToImages = "/";
$(".figure img").each(function(){
$(this).parent().css({"background": "url(" + pathToImages + $(this).data('thumbnail') +")"})
});
Edit
I actually didn't notice the data-thumbnail. Edited my answer above

jQuery Newbie, need a little help

Okay, so I am in the process of recreating this feature:
http://www.w3.org/html/logo/#the-technology
I current have it so when you click on a link, it will add a class to the image that relates to that link (href="#one" on the <a> and then id="#one" on the <img>), however it is currently not going through each <a> tag and only one. And also it is not removing the class I requested.
Code follows:
JS
$(document).ready(function() {
var container = '#portfolio #text_container';
var img_container = '#portfolio #image_container';
$(container).children('a').bind('click', function() {
var this_attr = $(this).attr('href');
var this_img = $(img_container).find('img').attr('id');
if(this_attr == this_img) {
//$(img_container).find('img').hasClass('current').removeClass('current');
// ^^^ This line isn't working, any ideas? :/
$(img_container + ' img[id*="' + this_attr + '"]').addClass('current');
}
else {
alert(this_img + ' this img');
alert(this_attr + ' this attr');
}
});
});
And the HTML is as follows
<div id="portfolio">
<div id="image_container">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" class="current" id="#one" />
<img src="http://static.jquery.com/files/rocker/images/btn_downloadLarge.gif" alt="" id="#two" />
</div>
<div id="text_container">
Item 1
Item 2
<p id="#one" class="current">A bunch of text!</p>
<p id="#two">The second bunch of text!</p>
</div>
</div>
Please let me know if you need any more information :)
rcravens fixed this with the following code..
JS
$(document).ready(function() {
$('#text_container a').click(function(evt) {
evt.preventDefault();
$('.current').removeClass('current');
var href = $(this).attr('href');
$("." + href).addClass('current');
});
And the HTML..
<div id="portfolio">
<div id="image_container">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" class="one current" />
<img src="http://static.jquery.com/files/rocker/images/btn_downloadLarge.gif" alt="" class="two" />
</div>
<div id="text_container">
Item 1
Item 2
<p class="one current">A bunch of text!</p>
<p class="two">The second bunch of text!</p>
</div>
</div>

My interpretation of what you are trying to do is here:
http://jsfiddle.net/rcravens/wMhEC/
The code is changed a bit. You shouldn't have multiple elements with the same id.
Bob

The reason this isn't working:
if(this_attr == this_img)
is because this_attr is a URL and this_img is an ID attribute value.