jQuery » Sviluppo » Javascript » Internet

jQuery footer caption Plugin: aggiungere didascalie alle immagini

giovedì 22 gennaio, 2009

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>' });

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , , ,

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