CODEWITHSUNDEEP
jqueryimageembed
JCHASE11
JCHASE11

Reputation: 3941

How to create embeddable images

I am developing a site that encourages other bloggers to take a image and post it in their blog. More or less advertisements. I want to be able to develop a page that has a series of images with an embed code below them, so users can copy the html embed code and paste it into their files.

Typically, I would just send the image, or provide users with the actual image link ( eg: http://sitenamehere.com/images/ad.jpg ) but I think there is a much better way of letting site visitors securely embed content from my site to theirs. In this case, it will just be embeddable gifs or jpgs. Are there any great tools or services out there to help with this subject?

Upon review, this seems like a dumb question because a simple image path would suffice...but perhaps there are tools that generate textareas with the code pre-inserted in them for easy copy/paste...Any suggestions? Jquery solutions encouraged!

Upvotes: 0

Views: 220

Answers (2)

Naftali
Naftali

Reputation: 146302

you can do something using a jquery dialog:

$('img').click(function(){
   var htmlText = 'To embed use url: '+$(this).attr('src');
   $('<div>').dialog({
      modal: true,
      beforeClose: function(){ $(this).remove(); }
   }).html(htmlText);
}).hover(function(){
   //use some tooltip to show that you can click to see embed
})

or something like that to display the embed url to your users :-)

Upvotes: 2

user657496
user657496

Reputation: 

$(document).ready(function() {
    $('img.advertisements').each(function() {
        $('<input type="text"></input>').val('<a href="YOURSITE"><img src="'+$(this).attr('src')+'" alt="SITENAME"></a>').bind('click', function() {
            $(this).focus();
        }).insertAfter($(this));
    });
});

give your images the class 'advertisements' and you're done! You will get a small inputfield with value: <a href="YOURSITE"><img src="THE SRC OF THE IMG" alt="SITENAME"></a>

Upvotes: 0

Related Questions