CODEWITHSUNDEEP
jqueryhtmlcssfancybox
user2596635
user2596635

Reputation: 381

Dynamically pull an image out of content to put in the href for fancy box

I have a gallery page on the website I'm working on and I can't touch the HTML for the most part including the images. I put fancy box onto the page because I want the images to pop after clicking the thumbnails. Here is what my css looks like:

<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3">
    <a class="thumbnail fancybox" rel="lightbox" href="#">
         <img src="images/gal1.jpg" class="img-responsive">
    </a> 
</div>

in order to get this structure I had to add this bit of script:

$('.col-sm-8 img').addClass('img-responsive');
$('.col-sm-8 img').wrap('<a class="thumbnail fancybox" rel="lightbox" href="#"></a>');
$('a.thumbnail.fancybox').wrap('<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3"></div>');
$('div.col-sm-4.col-xs-6.col-md-3.col-lg-3').wrapAll('<div class="list-group gallery"></div>');

This all works great except for the image pop - because of the way fancy box works it needs the image link in the href of the anchor tag wrapped around the thumbnail. Is it possible to select the image in the content and place it in the href making it look like this effectively:

<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3">
        <a class="thumbnail fancybox" rel="lightbox" href="images/gal1.jpg">
             <img src="images/gal1.jpg" class="img-responsive">
        </a> 
    </div>

Thanks

Upvotes: 0

Views: 213

Answers (1)

Newtt
Newtt

Reputation: 6190

This snippet should do what you asked.

$('a.thumbnail').each(function(){
    var a = $(this).find('img').attr('src');
    $(this).attr('href', a);
});

Edited to match your comment.

Upvotes: 3

Related Questions