CODEWITHSUNDEEP
javascriptjqueryhtmldynamic
M21
M21

Reputation: 343

Dynamically loaded image use as background for containing div

I've got a complex dynamic image gallery, images loaded by php, layed out by jquery... and what I need to do, is use whatever image is loaded into the lightbox as the background for the containing div (in addition to displaying like normal)... I cant really add a class to the image itself, but I can target it via .lightbox img

any help is appreciated:

<div class="container">
<div class="lightbox">
<img src="image.jpg"><!--php dynamic loaded image-->    
</div>
</div>

Upvotes: 0

Views: 367

Answers (1)

Zsw
Zsw

Reputation: 4107

You can just modify the background-image css attribute for your main container, using the source of the image you loaded.

var $img = $('.lightbox img');
var $container = $('#main-container');
$container.css('background-image', 'url(' + $img.attr('src') + ')');

Upvotes: 3

Related Questions