I'm struggling with cloning the URL string from the src attribute of an image. My goal is to store the string as a variable so that I can use it to update the background-image CSS property. ... Taking an image and setting it as a background in another element.
I've attempted this within a $(window).load event, as I believe the image needs to be fully loaded before its URL can be accessed in the DOM. However, I've hit a roadblock. I can successfully alert(imgURL); but I cannot get it to apply to the background of the target element.
Below is my current attempt. Any assistance would be much appreciated. Thank you!
$(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>