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:

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

Uso

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  2. <script type="text/javascript">google.load("jquery", "1.3")</script>
  3. <!-- carica l'ultima versione di jquery footer caption -->
  4. <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():

PLAIN TEXT
JavaScript:
  1. $('div#provadiv').footerCaption({bgcolor: '#f90', color:'#222'});
  2. $('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
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL