CODEWITHSUNDEEP
jqueryimagesrc
Yusaf Khaliq
Yusaf Khaliq

Reputation: 3393

How to add Image after hyperlink

this is the HTML on everypost

<div class="post-body">
<a href="http://www.google.com">google</a>
<a href="http://www.youtube.com">youtube</a>
<a href="http://www.facebook.com">facebook</a>
</div>

for each link for eg <a href="http://www.google.com">google</a> add an image with the same hyperlink in this case <a href="http://www.google.com">google</a> and within the image src add the hyperlink after http://open.thumbshots.org/image.aspx?url= so the outcome will be <img src="http://open.thumbshots.org/image.aspx?url=http://www.google.com" width="120px" />

the code below is the outcome for the html in every post.

 <div class="post-body">
    <a href="http://www.google.com">google</a>
    <a href="http://www.google.com"><img src="http://open.thumbshots.org/image.aspx?url=http://www.google.com" width="120px" /></a>


    <a href="http://www.youtube.com">youtube</a>
    <a href="http://www.youtube.com"><img src="http://open.thumbshots.org/image.aspx?url=http://www.youtube.com" width="120px" /></a>


    <a href="http://www.facebook.com">facebook</a>
    <a href="http://www.facebook.com"><img src="http://open.thumbshots.org/image.aspx?url=http://www.facebook.com" width="120px" /></a>
    </div>

Upvotes: 1

Views: 588

Answers (2)

David Thomas
David Thomas

Reputation: 253506

This is relatively simple:

$('.post-body a').each(
    function(){
        $('<img />').attr('src','http://open.thumbshots.org/image.aspx?url='+ this.href).insertAfter($(this));
    });

JS Fiddle demo.

Though it might be wise to run the website URLs through encodeURIComponent(), just to be on the safe side:

$('.post-body a').each(
    function(){
        $('<img />').attr('src','http://open.thumbshots.org/image.aspx?url='+encodeURIComponent(this.href)).insertAfter($(this));
    });

JS Fiddle demo.

Also, and just for the sake of demonstration, if not thoroughness, this doesn't really require jQuery; the same could be achieved using plain JavaScript (albeit in a rather less concise manner):

var container = document.getElementsByClassName('post-body')[0];
var links = container.getElementsByTagName('a');
var imgSrc = 'http://open.thumbshots.org/image.aspx?url=';

for (i = 0; i < links.length; i++) {
    var img = document.createElement('img');
    var linkURL = encodeURIComponent(links[i].href);
    img.src = imgSrc + linkURL;
    container.insertBefore(img,links[i].nextSibling);
}

JS Fiddle demo.

With regards to Floyd Pink's comment, I must confess that I missed the need for the image to be a link also. The following is a somewhat messy way of taking care of that, though I feel there must be a far tidier way:

$('.post-body a').each(

function() {
    $('<img />').attr('src', 'http://open.thumbshots.org/image.aspx?url=' + encodeURIComponent(this.href)).insertAfter($(this)).parent().find('img:last').wrap('<a></a>').closest('a').attr('href',this.href);
});

JS Fiddle demo.

Upvotes: 3

Brad Christie
Brad Christie

Reputation: 101614

I tend to like this approach better, but @David has a good answer, too.

$('a').each(function(){
    $(this).clone()
     .empty()
     .append(
        $('<img>',{
          width:120,
          src:'http://open.thumbshots.org/image.aspx?url='+encodeURIComponent(this.href)
        })
     )
     .insertAfter(this);
});

Upvotes: 2

Related Questions