Automatically add image names as CSS class to the images

[srikat]

Hello,

Is it possible to automatically add backstretch image names (w/o the file extension) as classes to the images in the generated HTML?

Ex.:

<img style="position: absolute; margin: 0px; padding: 0px; border: none; width: 1920px; height: 1276.8px; max-height: none; max-width: none; z-index: -999999; left: 0px; top: -372.9px;" src="http://example.com/wp-content/uploads/2016/02/minimography_009_orig.jpg">

should be

<img style="position: absolute; margin: 0px; padding: 0px; border: none; width: 1920px; height: 1276.8px; max-height: none; max-width: none; z-index: -999999; left: 0px; top: -372.9px;" src="http://example.com/wp-content/uploads/2016/02/minimography_009_orig.jpg" class="minimography_009_orig">

This would help me in individually adjusting the position of the images for smaller devices using CSS.

I tried using the following jQuery but it works only for the very first image which appears on the page load since the others are not present in the DOM yet.

$('.backstretch img').each(function(i, el) {
    var filename = $(el).prop('src').split('/').pop();
    $(el).addClass(filename);
});

Thanks in advance.

[jamesburgos]

Thanks for posting this inquiry, Sridhar.