Changing src of dynamically loaded images with jquery

Question

I have a div that is loaded dynamically with one or more images. Initially, all these images are crops. The aim is, when a when a user clicks on a cropped image, its src is replaced by the full sized version. Click the full sized version to return to the cropped image. I have no knowledge of the file names of the image, other than that they are all numbers, except the full version has a "L" as the first character in the file name.

This code works, but I'm sure there must be a simpler way:

$('#class').on('click', '> img', function() { var src = $(this).attr('src'); var test_src = src.match(/L/g); var img_id = src.replace(/L/g, ''); var big_img = src.replace('/images/', '/images/L'); if (test_src == undefined) { $(this).attr('src', big_img) } else { $(this).attr('src', img_id); } });

The problem I only managed to overcome with this code was, if I simply got the img src and added an 'L', after the first click, the img src was changed to something like '/images/L123345.jpg', and so, clicking it again with the aim of returning to the original src ('/images/12345.jpg') just added a second L.

I'm sure I've missed something really obvious. Thanks for any suggestions.

Have you tried if (test_src == null) instead of if (test_src == undefined) — dkasipovic
– dkasipovic, Commented Apr 3, 2014 at 22:41
No - but as mentioned, this code works fine. I just have the idea that it's a very complicated way to do something simple. — sideroxylon
– sideroxylon, Commented Apr 3, 2014 at 22:45
How much control do you have over the generation of the img tags? Can you store the number in the id attribute? I can think of some much simpler ways if you initially had e.g. <img id="12345" class="class" src="/images/12345.jpg"> — Michael
– Michael, Commented Apr 3, 2014 at 23:45
Yes, I can add an id = [image id]. For some reason that now escapes me, I was hoping to avoid doing that. — sideroxylon
– sideroxylon, Commented Apr 4, 2014 at 0:59

Michael · Accepted Answer · 2014-04-04 04:05:10Z

When you can add other attributes to your images, one option is to store the base image filenames in either the id, or in a data-* attribute if you're using HTML5. With images such as

<img src="/images/1234.jpg" class="class" data-id="1234"> <img src="/images/L5678.jpg" class="class" data-id="5678">

the following function will build a new src attribute required to swap the size from its current value. It does this first by retrieving the ID, then defining a variable lg that is an empty string if the current source includes an 'L', and equal to 'L' otherwise. Finally, it strings the two together, along with the path and file extension.

$('.class').on('click', '> img', function() { var id = $(this).attr('data-id'); var lg = ($(this).attr('src').match(/L/) !== null) ? '' : 'L'; $(this).attr('src', '/images/' + lg + id + '.jpg'); });

jmiller · Accepted Answer · 2014-04-04 01:17:55Z

You could try using jQuery class methods. Not sure if it's simpler, but I find it easier to read.

$('#class').on('click', '> img', function() { var src = $(this).attr('src'); if ($(this).hasClass('small')) { src.replace('/images/', '/images/L'); $(this).removeClass('small'); $(this).addClass('large'); } else if ($(this).hasClass('large')) { src.replace('/images/L', '/images/'); $(this).removeClass('large'); $(this).addClass('small'); } $(this).attr('src', src); });

manzo128 · Accepted Answer · 2017-11-16 20:26:41Z

This might work...

var $img = $("<img>"); $img.on('load', function (e) { this.$photoImageManager.attr('src', e.target.src); }.bind(this)); $img.attr('src', "../../users/" + userId + "/" + userId + "-photo.png");

Collectives™ on Stack Overflow

Changing src of dynamically loaded images with jquery

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related