jQuery footer caption Plugin: aggiungere didascalie alle immagini

jquery.footercaption.js è un Plugin per jQuery in grado di aggiungere dinamicamente delle didascalie alle immagini e ad altri elementi della pagina (clicca qui per una demo). jquery.footercaption.js preleva il testo della didascalia direttamente daglii attributi title o alt, se presenti. In alternativa è possibile fornire un testo personale insieme ad una serie di parametri aggiuntivi come:

1
2
3
4
5
6
7
 * @option        height        Caption height (default 32px)
 * @option        alpha         Caption alpha opacity (default 0.7)
 * @option        bgcolor       Caption background color (default #000)
 * @option        color         Caption font color (default #fff)
 * @option        font          Caption font family name (default Verdana)
 * @option        fontSize      Caption font size (default 10px)
 * @option        text          Custom text. If setting title and alt are ignored (default '')

Uso

1
2
3
4
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3")</script>
<!-- carica l'ultima versione di jquery footer caption -->
<script type="text/javascript" src="http://undolibrary.googlecode.com/svn/trunk/jquery/jquery.footercaption/jquery.footercaption.js"></script>

Al completamento della pagina è possibile usare il nuovo metodo footerCaption():

1
2
$('div#provadiv').footerCaption({bgcolor: '#f90', color:'#222'});
$('img#myid').footerCaption({ bgcolor: '#eee', color: '#000', text: 'Custom caption <a href="#">click here</a>' });

Non ci sono commenti per questo Post

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL