Develop Reference

Using an attribute value to add custom links for each images in my wordpres gallery

I'm using Elementor Pro for my photography website and i want to set custom links for each image in the gallery. By default, i can only set a global link which is the same for each image so that's not great.
In fact, i want to set a custom link which will redirect the user to the shop page of the specific image.
I found some code online (thanks to elementhow !) and it's really close to what i want, but i still need to change some things. The thing is a have to manually write all the links in an array and it's not convenient (close to 100 files and growing, if i change the order, i have to reorder the links, etc).
Here's the code i currently use :
<style>.e-gallery-item{cursor: pointer;} </style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var filteredImages = document.querySelectorAll('.e-gallery-item');
//Edit the links HERE
var links = [
'https://www.mywebsiteurl.com/product/product-name1/',
'https://www.mywebsiteurl.com/product/product-name2/',
'https://www.mywebsiteurl.com/product/product-name3/',
'https://www.mywebsiteurl.com/product/product-name4/',
];
var _loope = function _loope(i) {
filteredImages[i].addEventListener('click', function () {
location = links[i];
});
};
for (var i = 0; i < filteredImages.length; i++) {
_loope(i);
}
});
</script>
I would like to use an attribute value in the algorithm to generate the link automatically for each image. I have the process in my mind, but i don't know how to code this...
Here's the code of one image ,i can set what value i want in "alt".
<div class="e-gallery-image elementor-gallery-item__image e-gallery-image-loaded" data-thumbnail="......" data-width="1024" data-height="768" alt="product-name";"></div>
I would like to use the "alt" attribute to create a unique url for each file, with this format :
'https://www......com/product/product-name/'
"product-name' will take the value of the "alt" attribute of each image.
I tried to change this part of the code (replace "links[i]" by trying to get the attribute value using filteredImages[i].getAttributes) but without success...
var _loope = function _loope(i) {
filteredImages[i].addEventListener('click', function () {
location = links[i];
});
};
Can someone give me some tips about how to do that ? I spend 2 years without coding so i'm a bit rusty...

I think this does what you'd like it to, as you have already done you can cycle through each image link using a class.
You can get the value of alt using the .attr() function and then replace the href value of the link.
DEMO
// Cycle through each image using common class
$(".e-gallery-image").each( function() {
// Get value of 'alt' for clicked item
alt = $(this).attr("alt");
// Update href value
$(this).attr("href", "https://www.mywebsiteurl.com/product/" + alt );
});
// Prove that its worked
$(".e-gallery-image").click( function() {
// Confirm all is correct
console.log($(this).attr("href"));
// Assign url to window
location.href = $(this).attr("href");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="e-gallery-image" href="test.com" alt="product1">Product 1</div>
<div class="e-gallery-image" href="test.com" alt="product2">Product 2</div>
<div class="e-gallery-image" href="test.com" alt="product3">Product 3</div>
<div class="e-gallery-image" href="test.com" alt="product4">Product 4</div>
<div class="e-gallery-image" href="test.com" alt="product5">Product 5</div>

In fact it was really simple. I tried to target a parent element and it worked ! If anyone is interested, here's the code i use :
document.addEventListener('DOMContentLoaded', function () {
var filteredImages = document.querySelectorAll('YOUR_SELECTOR');
var _loope = function _loope(i) {
filteredImages[i].addEventListener('click', function() {
location = "YOUR_WEBSITE_URL" + filteredImages[i].querySelector("YOUR_SELECTOR").getAttribute("alt");
});
};
for (var i = 0; i < filteredImages.length; i++) {
_loope(i);
}
});

Replace every onclick of the page with img src link?

I use a webpage where I want to replace the onclicks, of a bunch of links, with the modified src link of the <img> each link contains.
For example, the Greasemonkey script should change this:
<p class="listphotos">
<a onclick="alert('I'm a really annoying function! X'); return false;" href="#">
<img alt="photo" src="http://.../min/x.jpg">
</a>
<a onclick="alert('I'm a really annoying function! Y'); return false;" href="#">
<img alt="photo" src="http://.../min/y.jpg">
</a>
</p>
To this:
<p class="listphotos">
<a onclick="http://.../max/x.jpg" href="http://.../max/x.jpg">
<img alt="photo" src="http://.../min/x.jpg">
</a>
<a onclick="http://.../max/y.jpg" href="http://.../max/y.jpg">
<img alt="photo" src="http://.../min/y.jpg">
</a>
</p>
I've tried this (see also this jsFiddle):
var link = $("p.listphotos a img").prop("src").replace("min", "max");
$("p.listphotos a").prop("onclick", link);
$("p.listphotos a").prop("href", link);
but the right pictures do not get linked.

Setting onclick to a link is an error. onclick needs to be valid javascript. But, since it looks like you're trying to "delink" those photos, best to remove the onclicks altogether.
Also, you can't set the href that way (unless you want every link to go to the same photo). You need to loop. jQuery's .each() should do the trick. Like so:
$("p.listphotos a img").each ( function () {
//-- `this` is each target image, one at a time
var jThis = $(this);
//-- More robust replace
var bigLink = jThis.prop ("src").replace (/\bmin\b/i, "max");
//-- The img parent is the link we're after.
jThis.parent ().prop ("href", bigLink).removeProp ("onclick");
} );
Note that prop and removeProp are the correct way to kill an onclick. But, if you inspect the page source in some browsers, the attribute will still be there. Don't worry, the onclick will no longer function.

I think you can try something like this
var numberClick=0;
var Images= ['image1.png','image2.png'];
function changeIndex(index){
if (index >=0 && index < Images.length){
$("p.listphotos a img").attr("src", Images[index]);
return true;
}
return false;
}
then you can use it in this way
function showImage(){
if (changeIndex(numberClick)){
numberClick+=1;
}
else{
numberClick=0;
}
}
and then
$("p.listphotos a img").click(function(){
showImage();
return false;
});

How to update 'src' attributes of multiple images?

I have the following source:
<body>
<div class="slideshow_top">
<img class="slideshow_image" src="img/cycle/putritos.jpg">
</div>
<div class="slideshow_mid">
<img class="slideshow_image" src="img/cycle/stage.jpg">
</div>
<div class="slideshow_bot">
<img class="slideshow_image" src="img/cycle/marketing.jpg">
</div>
...
</body>
Assuming I have three generated new src values such as:
var src1="img/cycle/newimage1.jpg
var src2="img/cycle/newimage2.jpg
var src3="img/cycle/newimage3.jpg
How can I change the source values of the already existing images? I'm unsure because I know the surrounding divs of the images are uniquely named, but the class of the images themselves are shared. Is it still possible to update each source attribute with Javascript given this?

Looks like part of your question has to do with selecting images only if they are a child of a slideshow_top/mid/bot div element. There's a few ways to do this...
In jQuery, you could do this:
$('.slideshow_top img').attr('src',src1);
$('.slideshow_min img').attr('src',src2);
//etc.
That's just a simple Sizzle CSS-style selector. You can also use jQuery's .children() method, if you want:
$('.slideshow_top').children('img').attr('src',src1);
In plain old JavaScript it's a little more wordy, but you can still do it:
var slideShowTop = document.getElementsByClassName('slideshow_top'),
slideShowTopImage = slideShowTop[0].getElementsByTagName('IMG');
slideShowTopImage[0].setAttribute('src',src1);
//etc.
Note though, that getElementsByClassName isn't supported in version of IE less than 9, so you'll have to write your own little function to, say, loop through all elements by tag name and filter them by className, etc. jQuery might be the way to go on this one...

You can do something like:
var new_images = $.map([1,2,3], function(x) { return "newimage" + x + ".jpg"; })
$("img").each(function(i, x) { x.src = new_images[i]; })

var src_array=["img/cycle/newimage1.jpg","img/cycle/newimage2.jpg","img/cycle/newimage3.jpg"]
$(".slideshow_image").each(function(index){
$(this).attr("src",src_array[index])
})

Try
.each( function(index, Element) )
Iterate over a jQuery object, executing a function for each matched element.
//create array of images
var arrSrc = ['img/cycle/newimage1.jpg','mg/cycle/newimage2.jpg','img/cycle/newimage3.jpg'];
$('.slideshow_bot .slideshow_image').each(function(i, el){ //to loop through images
el.prop('src',arrSrc[i]); //set image here
});
.prop( propertyName, value )

.attr('href') returning undefined

I am using a simple JQuery solution to get the href from a link and apply it to a click event. This works in Webkit and Gecko browsers, however Internet Explorer (7 & 8) keeps displaying the href location as undefined. Anyone got a fix for this? Can help me solve this? Much appreciated if so.
$('table tr').click(
function () {
var element = $(this).attr("class");
var hrefLocation = $('#'+ element +' .deal-holder a').attr('href');
alert(hrefLocation)
window.location.href = hrefLocation;
return false;
}
);
HTML is simple:
<tr class="QRG">
<td class="blue">QRG</td>
<td>Company Sale</td>
<td>Technology</td>
</tr>
<div class="deal" id="QRG">
<p><span class="js">Overview</span><span class="no-js">Enham</span></p>
<div class="deal-holder">
<div class="image-holder">
<img src="../assets/images/enham.gif" alt="" height="70" width="150" />
</div>
<p>Enham is a charity established in 1918, which delivers a wide range of essential services that provide choice and empowerment to disabled people to make their own decisions about their lives. Enham is a charity established in 1918, which delivers a wide range of essential services that provide choice and empowerment to disabled people to make their own decisions about their lives</p>
<a class="moreInfo" href="individual.html">More Information</a>
</div>
</div>

Nothing jumps out at me at being wrong.
First make sure your using the latest version of jQuery as that can sometimes help.
I change your code so the link within the tr has the click event:
$('table tr a').click(function (e) {
var element = $(this).closest('tr').attr("class"),
hrefLocation = $('#'+ element +' .deal-holder a').attr('href');
alert(hrefLocation)
window.location.href = hrefLocation;
e.preventDefault();
});
I did a demo here and it works in IE 7,8 and 9. Hope this helps.

Without knowing the rest of your html code is difficult to know exactly what's your problem, the behaviour depends greatly on how your html is structured... But doing a quick test here it works: Example, just uses the $(this) pointer to get the child link.

You may need to select the first element in the group of hyperlinks.
$('table tr').click(
function () {
var element = $(this).attr("class");
var hrefLocation = $('#'+ element +' .deal-holder a').eq(0).attr('href');
alert(hrefLocation)
window.location.href = hrefLocation;
return false;
}
);

Try wrapping it in the ready function.
IE could be trying to add the event to the object, before it's in the DOM:
$(document).ready(function(){
$('table tr').click(
function () {
var element = $(this).attr("class");
var hrefLocation = $('#'+ element +' .deal-holder a').attr('href');
alert(hrefLocation);
window.location.href = hrefLocation;
return false;
});
});

Javascript hide/show - more elegant way to do this?

I'm looking for a more elegant way to make a hide/show of divs using inline Javascript.
If you mouse over the orangish/yellow circle logos over the cars the tag should appear. When moused out they should disappear.
URL:
http://174.120.239.48/~peakperf/
<div class="second">
<div id="speech2" style="display: none">
<img src="<?php bloginfo('template_url'); ?>/images/speech2.png" width="334" height="50">
</div>
<a id="various2" href="#inline2,javascript:HideContent('speech1')" title="" onmouseover="HideContent('speech1'); return true;">
<img src="<?php bloginfo('template_url'); ?>/images/clicker.png" width="62" height="50" onmouseover="document.getElementById('speech2').style.display = 'block'" onmouseout="document.getElementById('speech2').style.display = 'none'">
</a>
</div>
Here's the pastebin of the code used:
http://pastebin.com/JsW6eJRZ

The more elegant solution is to utilize JQuery.
Once you include the library into a file, a div show is done using the following selector
$('#idOfDiv').show();
Or if there are no ids but rather classes
$('.ClassName').show();
Now instead of having onclick events in the html as you have right now, you just bind them in jquery in the ready() method like so:
$(document).ready(function()
{
$('#idOfDiv').bind('click', function()
{
//do work here in this anonymous callback function
});
});
All of this can be done in a external js file so that will significantly clean up your html code
and put all your javascript logic into one location.
EDIT:
Example applied to your situation
$(document).ready(function()
{
$('#various1').mouseover(function()
{
$('#speech1').show();
});
$('#various1').mouseout(function()
{
$('#speech1').hide();
});
});
If you get crafty and utilize a for loop then you could just append the number to the end of the string that represents the selectors like so
$(document).ready(function()
{
for(var i = 1; i < 7; i++)
{
$('#various' + i).mouseover(function()
{
$('#speech' + i).show();
});
$('#various' + i).mouseout(function()
{
$('#speech' + i).hide();
});
}
});
The mouseout and mouseover functions are just the explicit version of using like so
$('selector').bind('mouseover', function()
{
});
$('selector').bind('mouseout', function()
{
});

Have you looked into using jQuery for this? Also, why does the code need to be inlined?
I would recommend doing something like this: http://jsfiddle.net/4N9ym/2/
Note that I have things inverted here (you would probably want to animate in instead of animating out).