We Keep Coding

How to add an attribute to an image with a specific class or alt text js/jquery?

I need to add an attribute to specific images by using JS or jQuery, but I can't figure it out.
I'm using WordPress and the images that I want to add the attribute are inside a slider, so I cannot add any class to those images.
I tried to add the attribute that I want by using the container class to find images, but it didn't work.
$('.dce-img > img').attr('rlskip', '1');
This how I want it to be:
<div class="dce-item">
<figure data-image-ratio="0.5" class="dce-img dce-fit-img">
<img src="../img/F4D13DA3-5351-4F69-8C33-0A1EF3BFDF67.webp" alt="Demo_ts_2" rlskip="1">
</figure>
</div>
Can you help me to find a solution please? I have to add the rlskip attribute to the images of the slider here.

The problem is that $ is not defined. Change $ to jQuery like below:
jQuery('.dce-img > img').attr('rlskip', '1');

Clicking a thumbnail to change the large image in a gallery

I'm trying to create the following gallery:
- One large image
- Thumbnails of gallery images below
- Large image should open all images on click in a lightbox gallery
I have the lightbox gallery working using PhotoSwipe and it fires when I click the large image. I also have the thumbnails in place below the large image. My question now is how do I change the large image when I click one of the thumbnails? I've seen a lot of examples (also quite simple ones), but none of them seem to work in my case.
Here's the code that I have for the thumbnail:
<a href="<?php echo $image['url']?>" data-size="<?php echo $image['width']?>x<?php echo $image['height']?>" data-index="0">
<img src="<?php echo $image['url']?>">
</a>
What I want is that when I click the href of the thumbnail that it changes the big image, which is display with this code:
<img class="bigimg" src="imageurl.jpg">
The thumbnail needs to have the href tag because this is required for the lightbox function to work.
I've seen some jQuery examples that replace the src of the bigimg with the src of the thumbnail, but I can't quite get it to work with the href also in place.
For reference,
this is the situation.
Example: JSFiddle

Try,
var thumbnailLinks = $('a.thumbnailLink') // Add class="thumbnailLink" where appropriate or use a different selector.
$('.thumbnailLink').click(function() {
$('.big a').attr('href', $(this).attr('href'));
$('.bigimg').attr('src', $(this).attr('href'));
});
here is the fiddle https://jsfiddle.net/91oq8ja2/2/
Is this what you are looking for?

I'm not intimately familiar with lightbox, but if I understand you correctly, you want it to just do what it's already doing, but in addition, change the src of your img.bigimg. If that's the case, it should work to add your own listener on the a tag as long as you don't prevent the default action. Something along the lines of this:
var thumbnailLinks = $('a.thumbnailLink') // Add class="thumbnailLink" where appropriate or use a different selector.
thumbnailLinks.on('click', function() {
$('img.bigimg').attr('src', $(this).attr('href')); // Set img.bigimg src attribute to the href attribute of the link that was clicked.
});
There may be some weaknesses to this. For example I'm not sure if this will work if a user tabs through links and activates it using the enter key, though it should be possible to add other events than just click to help with that. This is also untested code at the moment, but have a go and see if it works for you.

Getting data- value from sender in Polymer

I'm trying to create a lightbox component in Polymer, with it's child items being multiple <img> tags. These will have an src, which is a thumbnail and a data-fullimage attribute, which will contain the path to the full size image.
In the Polymer component, I've set the on-click tag on the image content selector, and any Javascript calls using sender.xyz return the content tag, not the image tag, thus not allowing me to retrieve the path to the full image. Is there any way to get the data-fullimage of the image that is clicked, or even the src value if need be?
Polymer Component
imageClick: function(event, detail, sender)
{
console.log(sender);
}
Implementation
<paper-lightbox>
<img src="img/one.png" data-fullimage="img/one-large.png"></img>
<img src="img/two.png" data-fullimage="img/two-large.png"></img>
</paper-lightbox>

No need to put click handlers on the img tags. Moreover this doesn't work, because they are not bound to functions in the paper-lightbox element. What you want is
event.path[0].getAttribute("data-fullimage")
But this only works if your light DOM elements consist of exactly one element. If your light DOM elements are more complex, but it should be possible to click them anywhere, use this expression instead
event.path[[].indexOf.call(event.path, sender) - 1].getAttribute("data-fullimage")

Try this
HTML:
<paper-lightbox>
<img src="img/one.png" on-tap="{{imageTap}}" data-fullimage="img/one-large.png"></img>
<img src="img/two.png" on-tap="{{imageTap}}" data-fullimage="img/two-large.png"></img>
</paper-lightbox>
JS:
imageTap: function(sender){
var fullImage = sender.target.attributes["data-fullimage"];
}

Pulling images from an html page in jQuery

I was given a task to pull images from an html page using only jQuery and nothing else.
The html page is a page with a lot of tables and a lot of different png's. In about 400 lines of html, there are about 80 images. My job is to get all of the images with a certain domain to the bottom of the page (the div class="code"> section), so I can then manually go through them to save them.
So far I am able to get the src of all of the images, but I am not sure how to get all of the actual images. I was thinking if I was to save the source in a variable, I could just redirect the each loop to an img tag and feed it the image source. So far it just returns a broken img link, so I think I have the right idea, but not the right code.
Here is my js
$(document).ready(function(){
$("img[src*='tieks']").each(function() { // src* so I only get certain images
imgsrc = this.src;
$(".code").append(imgsrc);
});
});
This is the code section
<div class="code">
<img src=imgsrc>
</div>
Does anyone know how I could tackle this?

If all you want is to clone all the images into one container:
$('.code').append( $("img[src*='tieks']").clone() );
clone() API Docs

The trick is to create a new element and append it to your div or whatever you prefer.
var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');
This is also answered in this thread from where the example above origins: How to create a new img tag with JQuery, with the src and id from a JavaScript object?

you are trying coding is correct.you are taken only image source.If u want to take all the original images and append to div with class 'code',you will try to change
$("img[src*='tieks']").each(function() {
$(".code").append(this);
});
just try it.

Make <div> link

I am having trouble making link.
I have a slide in a Magento store. Theme is responsive and slider is javascript.
This is the code i have:
<div id="camera_wrap" class="camera_wrap camera_orange_skin">
<div data-thumb="{{skin url='images/camera/slides/thumbs/slide1-thumb.png'}}" data-src {{skin url='images/camera/slides/b1.jpg'}}"></div>
</div>
Slider is showing picture and assosiated thumbnail. I want to make slider clickable but i cant get it working. Any ideas?
If i place
onclick="location.href='newurl.html';"
inside div, image is not showing :(
Any suggestions?

Don't use inline onclicks... Assign your div a class and a custom data attribute. Example:
<div class="onclick-link" data-href="mylink.html">Some content here...</div>
And then:
$('.onclick-link').unbind('click').click(function() {
window.location.href = $(this).attr('data-href');
});
This can be used for all div's you want to turn into a link, bu assigning the class and the data-href attribute.

My link
The easiest (and most semantic) way to make a link, is to use the <a> element.
If you REALLY want to go the javascript way, you can bind a handler using jQuery
$('#camera_wrap').on('click', function(){
// your code
});