the Forum

How to Automatically Add Captions to Images using Jquery

Posted on April 13, 2012 by Michael Rosario
Total Posts: 33 | Join date: 03-12-11

So I wanted to automatically generate the captions from the ALT parameter of the images (on all images in my Column2 DIV. Here is how I did it:

[removed]
   $(document).ready(function(){
    $("#Column2 img").each( function(){
     var img_txt = $(this).attr("alt");
     $(this).wrap('<div class="Image" ></div>');
     $(this).after('<div class="Caption" ><p>' + img_txt + '</p></div>');
     $(this).parent().hover(function(){ $(this).find('.Caption').stop(true,true).slideDown(); },function(){ $(this).find('.Caption').hide(); }
     );
    });
   });
[removed] 

Here are the corresponding styles:

<style>
#Column2 .Image { position: relative; margin: 0 0 15px 0;  }
#Column2 .Image IMG { margin: 0 0 0 0; }
#Column2 .Caption P { margin: 0; padding: 0; color: #FFF; font-size: 70%;}
#Column2 .Caption { background-color: #000;  padding: 10px;  border: 1px solid; z-index: 1000; position: absolute; bottom: 0;  }
</style> 

Tags: There are no tags for this entry.

There are no answers yet. Add yours below.

add your answers here

comments powered by Disqus

Amazon.com Widgets

the Forum

How to Automatically Add Captions to Images using Jquery

There are no answers yet. Add yours below.

add your answers here

Trending Threads

Tags