jQuery

jQuery Captify Plugin: Aggiungere didascalie alle immagini

captify.jpg

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:
[js]
$(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%’
});
});
[/js]

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:
[css]
.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; }
[/css]
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:

  1. Utilizzando l’attributo alt:
    [html]
    <img src="image.jpg" class="captify" alt="Testo didascalia" />
    [/html]
  2. Inserire il testo della didascalia in un div con id collegato all’attributo rel dell’immagine:
    [html]
    <img src="image.jpg" class="captify" rel="caption1" />
    <div id="caption1">Testo didascalia</div>
    [/html]

You might also like

LEAVE A REPLY

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.