CODEWITHSUNDEEP
jquery
Mark
Mark

Reputation: 33571

jquery image links turns into image tags

Is there a jquery plugin that turns recognizes image urls and turns them into image links, much like how http://videojs.com/ works for video or jquery media works http://jquery.malsup.com/media/#overview

Apparently none of these plugins support images???

Upvotes: 0

Views: 97

Answers (1)

prodigitalson
prodigitalson

Reputation: 60413

Well its not too hard to implement. In a ver raw (and untested) form itd be something like this:

(function($){
  $.fn.imageTag = function(options){
    var o = $.extend({}, $.fn.imageTag.options, options||{});

    this.each(function(){
      var selections = $.map(o.formats, function(e,i){
         return 'a[href$=.'+e+']';
      }).join(',');

      $(selections, this).each(function(){
         var img = $('<img />').attr('src', $(this).attr('href'));
         var tag;
         if(o.wrapper){
            tag = $(o.wrapper).append(img);
         } else {
            tag = img;
         }

         if(o.css){
           tag.css(o.css);
         }

         $(this).replaceWith(tag);
      });
    });

    return this;
  };

  $.fn.imageTag.options = {
    'formats': ['png','gif','jpg'],
    'wrapper': null, // null or a tag like '<div></div>'
    'css': null  // null or a hash of css properties to be used as an arg for css()
  };

})(jQuery);

Of course that doent handle tranferring the id/classes and other attributes you might need to transfer from the a to the img or optional wrapping element.

Upvotes: 2

Related Questions