Working with src and alt to replace an image - javascript

I have a part in my site that dedicated to changing the language.
Right now, in a circle button, i have united-kingdom flag. This is the default option.
<a class="nav-link-language js-language-trigger">
<img src="http://my-site.test/wp-content/uploads/2018/04/260-united-kingdom.png" alt="">
For example i have an option for German Language
<div class="nav-link-language-holder">
<a><img src="http://my-site.test/wp-content/uploads/2018/04/260-germany.png" alt=""><i>German</i></a>
</div>
How can i set with javscript, when user click on the icon for Germany, it will be replaced for the default option (right now is united-kingdom)
Thanks a lot

Here's a quick way to change your img src :
<img id="Your_IMG_ID" src="olg-img-src.png">
<button onclick="change_img_src()">Change SRC</button>
<script>
function change_img_src() {
document.getElementById("Your_IMG_ID").src = "new-img-src.png";
}
</script>
To generalize what you're looking for and further simplify it, here's a way to do it :
<!--- Your main flag --->
<img id="main-flag" style="cursor:pointer" src="img.png"/>
<!--- Rest of flags --->
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img.png"/>
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img-2.png"/>
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img-3.png"/>
<!----Other flags---->
<script>
function Change_flag(_src) {
document.getElementById("main-flag").src = _src;
}
</script>

Related

How to handle: When image is clicked identical image generated using Javascript

The code below works to make one copy of the image clicked. I am needing the code below to work for multiple images.
For example if I click 5 images on the screen, the same 5 images should generate at the bottom of the page. The user should be able to select 5 out of 10 images. Any thoughts? Thanks!
JS:
function changeImage() {
var imgSrc = 'http://placehold.it/150';
if (document.getElementById('myImage').src === imgSrc) {
document.getElementById('new').src = imgSrc;
}
}
HTML
<a href="#" onClick="changeImage()">
<img id="myImage" src="http://placehold.it/150"></a>
<img id="new" src="http://placehold.it/200">
You can use JQuery clone() function
$('img').click(function() {
$('body').append($(this).clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50/000000/ffffff">
<img src="http://placehold.it/50x50/1C90F3/ffffff">
<img src="http://placehold.it/50x50/F2BB7C/ffffff">
you can use jquery to do that
HTML
<a href="#" id="my-image">
<img id="myImage" src="http://placehold.it/150"></a>
<img id="new" src="http://placehold.it/200" />
JS
$('#my-image').click(function(){
//setting attribute src to be equal as src from #myImage
$('#new').attr('src', $('#myImage').attr('src'));
//returning false in order to avoid default action
return false;
});
So that is it :)
Just remember to put this code after your html or into
$(document).ready(function(){ ..... });
I hope this helps.

Using a Lazy Load inside a popover

I tried to implement a Lazy Load inside a popover.
For the lazyload, I use Echo.js (http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/)
In a table, I've cells like this :
<td>
<a id='pop-ID' class='pop'>
<img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
</a>
</td>
As you can see, in my cell, i can see a loading gif, and according to the position the thumb is loaded.
Works pretty well
Now I want to load in a popover the full size image
I want to use quite the same technique to avoid the loading of all the full size images of my page
I keep the same table/cell thing, and add in my page an hidden div including
<td>
<a id='pop-ID' class='pop'>
<img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
</a>
</td>
<div style='display: none;' id='pop-ID_content' class='popSourceBlock'>
<div class='popTitle'>PopOver Title</div>
<div class='popContent'>
<img src='loader.gif' data-echo='image.jpg' class='img-rounded'>
</div>
</div>
And I'm stuck here, I only see the loading gif inside the popover, not the image.jpg I should be able to see
Here is the JS I use for the popover
$(".pop").each(function() {
var $pElem= $(this);
$pElem.popover(
{
placement: 'left',
trigger: 'hover',
html : true,
title: getPopTitle($pElem.attr("id")),
content: getPopContent($pElem.attr("id"))
}
);
});
function getPopTitle(target) {
return $("#" + target + "_content > div.popTitle").html();
};
function getPopContent(target) {
return $("#" + target + "_content > div.popContent").html();
};
Do you see what's wrong or what I missed ?
This is pretty my first attempt on this subject,
so I've read the others threads about, but I couldn't find a way to reproduce the results in my configuration
Using the comment above, I just changed a bit the line related to the image.jpg
<td>
<a id='pop-ID' class='pop'>
<img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
</a>
</td>
<div style='display: none;' id='pop-ID_content' class='popSourceBlock'>
<div class='popTitle'>PopOver Title</div>
<div class='popContent'>
<img data-src='image.jpg' class='lazyload img-rounded'>
</div>
</div>
Now it works, thanks !
I'll try now to use lazysizes more widely to solve my problems

jQuery find closest

I'm trying to get the a href of an list item.
HTML
<div class="popup" style="display: none;">
<div class="product">
<div class="photo">
<a href="" class="sendkleur" id="link69"> <!-- href im trying to reach -->
<img id="product-collection-image-69" src="" alt="Test kleur" class="popup-image69">
</a>
</div>
<a href="" class="sendkleur" id="link69">
<strong>Test kleur</strong>
</a>
<span class="swatchLabel-category">Kleur:</span>
<p class="float-clearer"></p>
<div class="swatch-category-container" style="clear:both;" id="ul-attribute137-69">
<img onclick="listSwitcher();" src="" id="a137-32" class="swatch-category" alt="Beige" width="12px" height="12px" title="Beige">
<img onclick="listSwitcher();" src="" id="a137-36" class="swatch-category" alt="Zwart" width="12px" height="12px" title="Zwart">
</div>
<p class="float-clearer"></p>
</div>
</div>
There are multiple popups on the site and thats what makes it difficult. At first I used this code
var link = jQuery('.photo').find('a')[0].getAttribute("href");
But this ofcourse only returns the href of the first popup. Then I tried this code:
var link = jQuery('.photo').closest('a').attr("href");
But this returned undefined
Then I tried this:
var link = jQuery(this).closest('a').attr("href");
But that also returns undefined
Edit
Here is the whole jQuery code snippet
jQuery(document).ready(function(){
jQuery('.swatch-category-container img').click(function(){
var kleur = jQuery(this).attr('title');
var link = jQuery('.photo').find('a').attr("href");
console.log(link);
link += "?kleur="+kleur;
console.log(link);
jQuery('.photo').find('.sendkleur').attr("href", link);
});
});
Working from the .swatch-category-container img element, you can traverse the DOM to find the required a like this:
$('.swatch-category-container img').click(function() {
var link = $(this).closest('.popup').find('.photo a').prop('href');
// do something with link here...
});
If this is the .swatch-category-container img element then, the anchor is the previous to previous sibling of the ancestor swatch-category-container element
var link = jQuery(this).closest('.swatch-category-container').prev().prev().attr("href");
Since you said multiple popups, the idea would be like this.
1. Get all popups
2. From each popup in all popups
Get the photo href item
$('.popup').each(function() {
var hrefItem = $(this).find('.photo a').attr('href');
//Do your processing with href item
});

JQuery Change Image in a Group of images

I have a dynamic list with each row containing 6 image icons. Code Below...
<div class='list_body'>
<div class='lister1'>
<img data-icon_no='1' data-job_id='"+job_id+"' data-icon_status='"+split_stats[0]+"' src='"+path+stat1+"' class='q1' />
<img data-icon_no='2' data-job_id='"+job_id+"' data-icon_status='"+split_stats[1]+"' src='"+path+stat2+"' class='q1' />
<img data-icon_no='3' data-job_id='"+job_id+"' data-icon_status='"+split_stats[2]+"' src='"+path+stat3+"' class='q1' />
<img data-icon_no='4' data-job_id='"+job_id+"' data-icon_status='"+split_stats[3]+"' src='"+path+stat4+"' class='q1' />
<img data-icon_no='5' data-job_id='"+job_id+"' data-icon_status='"+split_stats[4]+"' src='"+path+stat5+"' class='q1' />
<img data-icon_no='6' data-job_id='"+job_id+"' data-icon_status='"+split_stats[5]+"' src='"+path+stat6+"' class='q1' />
</div>
<div class='lister'>"+name+"</div>
<div class='lister'>"+time+"</div>
<div class='lister'><a href='javascript:void(0);'>View Appointment & Actions</a>
</div>
</div>
</div>
Each icon has a status number and a different coloured icon image for each status. What I need to do is change the icon when the icon status value changes in the main database.
I am struggling to identify the icon with jquery selectors. I have tried:
$('.q1 img[data-job_id='+job_identifier+']').eq(0).attr('src', path+icon_url1);
(this was to hopefully change the first icon but did not work.)
I basically need to:
a: identify the row of icons based on the job-id
b: reset the icons with the correct img src
c: do this in the quickest way possible.
I hope this makes sense
Write it with double quote -
$('.q1 img[data-job_id="+job_identifier+"]').eq(0).attr('src', path+icon_url1);
use this:
$('.list_body .lister1 img[data-job_id="+job_identifier+"]').attr('src', path+icon_url1);
you dont need eq() as you are filtering using id.

Changing the image source depending on the parent link?

I've looked into Javascript for this solution but I'm afraid my knowledge for this is just too limited. I'm guessing the solution to this issue would have to be solved with "nodes" but I just can't wrap my mind around how...
I'm looking to bypass image removal on the following website by changing the image source.
Website link
<a href="/music/King+Crimson/In+the+Court+of+the+Crimson+King" class="g3 album-item-cover link-hook" itemprop="url">
<div class="cover-image cover-image--no-content" style="background-image: url('http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png');">
<img class="cover-image-image" src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="" />
<div class="text-over-image ">
<span class="text-over-image-text">In the Court of the Crimson King</span>
<br/>
<span class="text-over-image-text text-over-image-text--secondary">148,881 listeners</span>
</div>
</div>
</a>
Now I've tried very basic functions like 'replace.' but I got no results for that. Is there a way to change the following,using JavaScript, depending on the URL at the top of the code?
Example:
<a href="/music/King+Crimson/URL-A">
...
<img class="cover-image-image" src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="" />
...
</a>
<a href="/music/King+Crimson/URL-B">
...
<img class="cover-image-image" src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="" />
...
</a>
Into:
<a href="/music/King+Crimson/URL-A">
...
<img class="cover-image-image" src="COVERFORA.JPG" alt="" />
...
</a>
<a href="/music/King+Crimson/URL-B">
...
<img class="cover-image-image" src="COVERFORB.JPG" alt="" />
...
</a>
I apologize for the little material I'm offering myself but I'm just wondering if there's actually a solution to this.
Thanks for taking the time to read this post.
Cheers!
Edit:
A few examples of the source code from the following website: http://www.last.fm/music/King+Crimson/+albums
<a href="/music/King+Crimson/In+the+Court+of+the+Crimson+King" class="g3 album-item-cover link-hook" itemprop="url">
<img src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="Album cover for In the Court of the Crimson King" class="rounded" width="220" height="220" />
</a>
<a href="/music/King+Crimson/Red" class="g3 album-item-cover link-hook" itemprop="url">
<img src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="Album cover for Red" class="rounded" width="220" height="220" />
</a>
Now, the idea is to insert my own image sources into each of these but obviously it's trickier because all of the links have the same image as default.
Not entirely sure what you want to do
var albumCover = document.querySelectorAll('.g3.album-item-cover.link-hook'), // get all links
i = albumCover.length,
a, img,
dict = { // link dictionary, href : src
'/music/King+Crimson/In+the+Court+of+the+Crimson+King' : 'http://photobucket.com/InTheCourt.jpg',
'/music/King+Crimson/Discipline' : 'http://photobucket.com/Discipline.jpg'
};
while( --i >= 0 ) { // loop over each link
a = albumCover[i]; // that link
img = a.getElementsByTagName('img')[0]; // that image
img.src = dict[a.getAttribute('href')] // replace src on that image based on that link
|| img.src; // else no change
}
$('a.album-item-cover > img.rounded'​).each(function(e) {
    var $this=$(this);
    $this.attr('src',this.parentElement.href
.replace(/^.*\/([^\/]+)$/,'Cover_for-$1.jpg'));
    }
    )​​​​​;
$1 here is string after last /

Categories