Changing the src attribute on images (jQuery)?

Question

JavaScript

Good evening.

Given a page with a bunch of thumbnail pictures. On a click on any of the thumbnails, you need to add a function that changes the src of this thumbnail. I can write separate functions for every single image, but there are dozens of them.

A little more detail:

Let's say there is a huge amount of such garbage on the page, where X is a variable (the file format also varies).
img src="files/img/X.jpg"

Clicking on any of these images in src should load another value:
img src="files/img/full/X.jpg"

How to implement? If anything, each image has its own unique ID attribute.

To be honest, I would be incredibly happy with a ready-made function and instructions for use, since I am not on friendly terms with JS and jQ at all.

Many thanks in advance!

Answer 1

For example like this:

<img src="files/img/X.jpg" data-full="files/img/full/X.jpg">
...
$('img').each( function(){ this.src = this.getAttribute('data-full'); } );

Answer 2

You must have a class for img.
For example:
Next, add an event for this class, where you change the src:
$('.my-img').click(function() {
$(this).attr('src', '...');
}

Answer 3

$('img').each( function(){$(this).attr('src', $(this).attr('src').replace('img/', 'img/full/')); })
Not tested

Answer 4

as an alternative, you can render the page with both images at once. They have css classes preview and full. Full class is hidden by default. On a click simply we change visibility . image tags. It doesn't seem to affect page loading. If the element is hidden in the css properties, then it does not participate in the rendering. And the image doesn't load right away. I'm not sure about the latter, but I don't think so. (probably they don’t load because in the forums, when you open a spoiler with a picture, the picture starts to slowly draw).
Just changing the src attribute seems slightly incorrect to me. Still, after all, the main attribute of the tag. I'm not sure that some browsers will adequately handle the replacement of the crc attribute

Answer 5

$('img').click(function () {
$(this).attr('src', $(this).attr('src').replace('img/', 'img/full/'));
});

Answer 6

Sori, the first comment was not well written ...
You must have a class for img.
For example:


Next, add an event for this class, where you change the src:
$('.my-img').click(function() {
$(this).attr('src', '...');
}


Answer 7

var toggle = 0;
$('.thumb_img').click(function() {
if(toggle == 1) {
$(this).attr('src', $(this).attr('src').replace('img/full/', 'img/'));
var toggle = 0;
} else {
$(this).attr('src', $(this).attr('src').replace('img/', 'img/full/'));
var toggle = 1;
}
})

What you see is my pathetic attempt at toggle. Doesn't work, of course. Any ideas?