#Dynamic Title
This plugin allows you to show 'title' or 'alt' attributes of images as animated sticker: floating, collapsing, having its own Titles, above, beneath or inside of image etc, with lot of settings.
Download the javascript file of version 0.1.0, css file, collapse icon and expand icon, or simply download zip archive with all needed files.
In your web page:
<link rel="stylesheet" type="text/css" href="dynamictitle.css" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="dynamictitle.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.content img').dynamictitle({
changePositionSpeed:500,
collapseSpeed: 150,
margin: 5,
leftOffset: 50,
});
});
</script>Why "$(window).load()" instead of "$(document).ready()"? It is because of Google Chrome and Safari can not calculate size of an image until it's loaded. If you are sure all your images have "widht" and "height" attributes, you can use "$(document).ready()".
In some CMS, for example, Drupal 7, you need to wrap your code in the jQuery.noConflict() function:
<script type="text/javascript">
var $dr = jQuery.noConflict();
$noConf(window).load(function(){
$noConf('.content img').dynamictitle({
changePositionSpeed:500,
collapseSpeed: 150,
margin: 5,
leftOffset: 50,
});
});
</script>##Settings
| Feature | Description | Type | Default | Example |
|---|---|---|---|---|
| tagattr | 'title' or 'alt' attributes. | String | 'title' | 'alt' |
| titleSplitter | Separator header and content of the Dynamic Title, must be in the attribute 'title' or 'alt'. | String | '::' | <img src="demo.jpg" title="PLUGIN DYNAMIC TITLE::This plugin allows you to show..."/> |
| stickWinWidth | The width of the Dynamic Title. If 'lageElementSize' not set to 0, it will be applied to 'small' pictures only. | Integer | 300 | 300 |
| lageElementSize | If the picture is larger than this value, the Dynamic Title is set to entire width of the picture, and don't respond to mouse movements. | Integer | 500 | 300 |
| margin | Vertical indent from the image. | Integer | 5 | 5 |
| speedTitleShow | Rate of appearance of the Dynamic Title. | Integer | 300 | 300 |
| changePositionSpeed | Speed of the image moving up and down while scrolling. | Integer | 500 | 200 |
| collapseSpeed | Speed of collapsing of the Dynamic Title by clicking on the "Collapse" button. | Integer | 150 | 150 |
| expandSpeed | Speed of expanding of the Dynamic Title by clicking on the "Expand" button. If it is not set this speed equal to the collapsing. | Integer | null | 100 |