jQuery Image Alt Attribute Enhancement Plugin - showimgalt

showimgalt is a small and lightweight jQuery plugin that automatically gets the "alt" attribute from an image that resides inside a custom html element.

Basic Usage:

1. Insert an image with alt attribute in your document.

<div class="demo"> 
<img src="demo.jpg" width="386" height="282" alt="It's a baseball!"> 
</div>

2. Include jQuery javascript library and jQuery showimgalt plugin in your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="jquery.showimgalt.js"></script> 

3. Call the plugin.

<script>
$(document).ready(function(){
$('img').showImgAlt();
});
</script>

4. By default, the plugin will add a span element with 'imgalt' class next to your image.

<div class="demo"> 
<img src="demo.jpg" width="386" height="282" alt="It's a baseball!">
<span class="imgalt">It's a baseball!</span>
</div>

5. Add some CSS to style your image and alt text.

.demo {
width: 386px;
height: 282px;
margin: 0 auto;
}
.demo img {
width: 386px;
height: 282px;
}
.imgalt {
background: #000;
width: 100%;
display: block;
height: 24px;
line-height: 24px;
margin-top: -24px;
}

6. Options.

<script>
$(document).ready(function(){
$('img').showImgAlt({
tag:'<span>', // custom html element
class:'imgalt', //  custom class name
before:false // insert some text before the image alt text
});
});
</script>

---

This awesome jQuery plugin is developed by kssfilo. For more Advanced Usages, please check the demo page or visit the official website.