CODEWITHSUNDEEP
jqueryimagehyperlinkaddition
João Colucas
João Colucas

Reputation: 249

jQuery auto add href equal to the image adress

I have a div with some images, which open on a lightbox (prettyphoto). Using one jquery code i made those images open automatically on the lightbox, giving the rel attribute to all the div elements. With css I selected the thumbnails width/height.

Now i need a similar code, in order to automatically add a link to themselves. Is this possible?

I mean, I would only need to upload the images through the backoffice, without needing to upload a thumbnail, then a full-size image and finally add the link.

Here's the html:

<div id="tab2" class="tab_content" style="text-align:center">
           <img src="images/img1_thumb.jpg" alt="image1"/>
        </div>

jquery:

$(document).ready(function(){

            $('div.tab_content a').attr('rel', 'prettybox[grandsuite]')

            $("div.tab_content a").prettyPhoto({animation_speed:'normal',theme:'facebook',slideshow:false, autoplay_slideshow: false, social_tools:false, show_title:false, overlay_gallery:false});

        });

Thank you!

Upvotes: 0

Views: 748

Answers (1)

bflesch
bflesch

Reputation: 583

Okay, so you need to:

  • get each Element from the Dom
  • fetch its "href"-Attribute
  • replace "_thumb.jpg" with ".jpg"
  • and finally create a surrounding Element with "href" set to the original image location

Let's do this:

// Wrap all <img> with an <a> tag and set the link target to the image's src
$("div.tab_content img").wrap(function(){
    return '<a href="' + $(this).attr('src').replace('_thumb.jpg', '.jpg') + '"/>';
});

Upvotes: 1

Related Questions