Question

I would like to change the image path directory or append the the image file by adding a class to the parent container.

Example: If I add a class of “large” to the parent img container, I would like it to either append the img file name or change the img path.

   src="/images/services/image.jpg" changed to src="/images/services/image-large.jpg"

   or

   src="/images/services/image.jpg" changed to src="/images/services/large/image.jpg"

   ...............................................................................



     default, no class:

        <div>
            <img src="/images/services/image.jpg" alt="" />
        </div>

     Option 1, with class:

        <div class="large-image">
            <img src="/images/services/image-large.jpg" alt="" />
        </div>


     Option 2, with class:


        <div class="large-image">
            <img src="/images/services/large/image.jpg" alt="" />
        </div>

Answer 1

For example like this, using lastIndexOf

$function() {
  var img = $(".large-image > img").each(function() { // for each img found
    var src = $(this).attr("src"); // get the src
    var path = src.substring(0,src.lastIndexOf('/')); // get the path from the src 
    var fileName = src.substring(src.lastIndexOf('/')); // and filename
    var newSrc = path+"/large"+fileName; // re-assemble   
    // or change filename:
    // var newSrc = path+"/"+fileName.replace(".jpg","-large.jpg"); // re-assemble   

    $(this).attr("src",newSrc);
  });
});