Question

I have to build a site that has multiple color options but it also has to have the ability to give the ‘Zoom’ impression. This is why I need all images on page so I am able to increase their size.

The only problem I have is I am not sure how to add a certain prefix to all images on the page via one link.

E.G. Click Pink/White and it adds a prefix _pw to all images on the page..

Any help would be great

Answer 1

The other solutions posted so far work, but are horribly inefficient. Here’s a better solution:

var isZoom = false;
$('#some-link').click(function(e) {
  e.preventDefault();
  $('img').each(function() {
    this.src = isZoom ? this.src.replace('_pw.jpg', '.jpg') : this.src.replace('.jpg', '_pw.jpg');
  });
  isZoom = !isZoom;
});

This assumes that all images have the same .jpg extension.

Alternatively, you could use .attr instead of .each:

var isZoom = false;
$('#some-link').click(function(e) {
  e.preventDefault();
  $('img').attr('src', function(i, src) {
    return isZoom ? src.replace('_pw.jpg', '.jpg') : src.replace('.jpg', '_pw.jpg');
  });
  isZoom = !isZoom;
});