La forza del sogno è quella di disegnare qualcosa
dove gli altri vogliono essere.
jQuery Captify Plugin: Aggiungere didascalie alle immagini
15dic2009 Scritto da MaiNick / Archiviato in jQuery
Captify è un plugin jQuery in grado di visualizzare le didascalie delle immagini in modo alternativo al semplice rollover.
Funzionante in tutti i principali browser: Firefox, Chrome, Safari, Opera e tutte le versioni di Internet Explore.
Quello che differenzia Captify da tutti gli altri plugin che permettono lo stesso effetto è la facilità d’uso e la leggerezza dello script di soli 2.3kb.
Opzioni
Il seguente script javascript inizializza il plugin con le opzioni personalizzabili:
$(function(){
$('img.captify').captify({
// velocità dell'effetto mouseover
speedOver: 'fast',
// velocità dell'effetto mouseout
speedOut: 'normal',
// tempo nascondere la didascalia dopo mouseout (millisecondi)
hideDelay: 500,
// animazioni possibili: 'fade', 'slide', 'always-on'
animation: 'slide',
// text/html da inserire all'inizio di ogni didascalia
prefix: '',
// opacità della didascalia
opacity: '0.7',
// classe CSS da applicare al box della didascalia
className: 'caption-bottom',
// posizione della didascalia (top o bottom)
position: 'bottom',
// dimensione larghezza didascalia rispetto all'immagine (in %)
spanWidth: '100%'
});
});
Utilizzo
Prima di tutto, se non l’avete già fatto, scaricate Captify 1.1.3.
Inserite nell’intestazione (<head>…</head>) del vostro documento il plugin, appena scaricato, e la libreria jQuery, seguiti dallo script illustrato sopra.
Inotre è necessario scrivere nel vostro foglio di stile le seguenti regole CSS riguardanti solo la visualizzazione della didascalia:
.caption-top, .caption-bottom {
color: #ffffff;
padding: 1.2em;
font-weight: bold;
font-size: 13px;
font-family: arial;
cursor: default;
border: 0px solid #334143;
background: #000000;
text-shadow: 1px 1px 0 #202020;
}
.caption-top {
border-width: 0px 0px 8px 0px;
}
.caption-bottom {
border-width: 8px 0px 0px 0px;
}
.caption a, .caption a {
border: 0 none;
text-decoration: none;
background: #000000;
padding: 0.3em;
}
.caption a:hover, .caption a:hover {
background: #202020;
}
.caption-wrapper {
float: left;
}
br.c { clear: both; }
Queste sono le uniche operazioni un pò più difficili da eseguire per l’integrazione di Captify al vostro documento, infatti per utilizzarlo sulle immagini bisogna seguire una dei seguenti metodi:
- Utilizzando l’attributo alt:
<img src="image.jpg" class="captify" alt="Testo didascalia" />
- Inserire il testo della didascalia in un div con id collegato all’attributo rel dell’immagine:
<img src="image.jpg" class="captify" rel="caption1" /> <div id="caption1">Testo didascalia</div>
- Tags: caption, didascalia, immagini, jQuery, plugin jquery
Altri articoli
- Iscriviti al Feed RSS
- 20 iscritti
Lascia un commento