html - clone img src to use as a div background via jquery -
i'm having trouble trying clone string of url in src= value of . i'm trying define string variable can append "background-image" css value said variable. ... taking , using background-image in
i'm doing in $(window).load event since think has rendered in dom in order it's url present. however, nothing seems working. can alert(imgurl); fail plug 's background.
here's have far. appreciated. thanks!
$(window).load(function() { var imgurl = $('.thumbnail img').each(function() { $(this).attr('src'); }); $('.fullsize').each(function() { $(this).css('background-image', 'url(' + imgurl + ')'); }); });
.fullsize { width: 200px; height: 200px; } .thumbnail img { width: 75px; height: 75px; float: left; cursor: pointer; }
<div> <div class="fullsize"></div> <div class="thumbnail"> <img src="http://twiki.org/p/pub/plugins/gnuplotplugin/bluewhalesample.png" /> </div> </div> <div> <div class="fullsize"></div> <div class="thumbnail"> <img src="http://twiki.org/p/pub/plugins/gnuplotplugin/rosenbrockfunctionsample.png" /> </div> </div>
instead of $(window).load(
use $(document).ready(function()...
ensure dom ready , iterate .fullsize
, find image inside thumbnail replace background. see below script
$(document).ready(function() { $('.fullsize').each(function() { var imgurl = $(this).next('.thumbnail').find('img').attr('src'); $(this).css('background-image', 'url(' + imgurl + ')'); }); });
Comments
Post a Comment