jquery - Replace img attribute -
i have following img tag part of larger html page. first image tag in document. change first image (white.png) data-original
attribute.
<img width="676" height="450" src="http://somewebsite/white.png" data-original="http://somewebsite/shutterstock_197488871-676x450.jpg" class="lazy attachment-post-thumbnail wp-post-image" alt="(shutterstock*)" />
here html
<div style="font-size: 12pt; color: #ccc; margin-top: 5px; margin-bottom: 5px;"><span id="author">natural news</span> | <span>sat, 16 aug 2014 13:06:21 pm</span> </div> <img width="676" height="450" src="http://somewebsiteimages/white.png" data-original="http://somewebsite/shutterstock_197488871-676x450.jpg" class="lazy attachment-post-thumbnail wp-post-image" alt="(shutterstock*)" /> <noscript> <img width="676" height="450" src="http://somewebsite/shutterstock_197488871-676x450.jpg" class="attachment-post-thumbnail wp-post-image" alt="(shutterstock*)" /> </noscript>
the implementation chose this
$(document).ready(function () { $('img') .first() .attr('src', $('img').first().data('original')); });
i added document ready function , create anonymous function in work. first selected of 'img' elements , using 'first()' method limit our method first img element in document. change 'src' attribute of image value of 'original' location on same 'img' element.
if refine selector use class of image may have better results
$('img.wp-post-image')
you change jquery selector to
$('img.wp-post-image:first')
and remove .first() function call. leave in .ready function:
$('img.wp-post-image:first').attr('src', $('img.wp-post-image:first').data('original'));
references: jquery :first selector jquery .data() method
Comments
Post a Comment