Le immagini di grandi dimensioni non si aprono più in pagine separate:è arrivato LightBox
LightBox è un plugin Javascript che rende piacevole la visualizzazione di immagini di grandi dimensioni, senza aprirle in una nuova finestra.
Le versioni più comuni :
- rendono lo sfondo nero semi-trasparente
- visualizzano un’immagine .gif che simula il caricamento dell’immagine
- animano il ridimensionamento dell’immagine
- inserisce il contenuto della proprietà “title” dell’immagine come fosse una didascalia
- ha un bottone di chiusura
- ha bottoni per lo scorrimento delle immagini, nel caso che il Plugin sia applicato a più immagini
- In particolare stiamo parlando del plugin di casa jQuery.ScaricaLightBox.
Usarlo è semplicissimo:- E’ necessario scaricare anche la libreria JQuery standard(già presente nello zip del lightbox)
- Inserire tra i tag<head></head> i 2 script:
<script type=”text/javascript” src=”js/jquery.js” src=”js/jquery.js”>
<script type=”text/javascript” src=”js/jquery.lightbox-0.4.js” src=”js/jquery.lightbox-0.4.js”>
-
- includere nell’header anche il seguente file .css , responsabile di gestire lo stile di visualizzazione del lightbox
- <link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox-0.4.css” media=”screen” />
- attivare il plugin usando i selettori che fornisce jQuery, già discussi da me in un altro post
-
aggiungere al documento unlink a un immagine con una miniatura
<a href=”image1.jpg”><img src=”imaageMiniatura.jpg” width=”72″ height=”72″ alt=”" /></a>
- scrivere uno script da inglobare nei tag head(dopo il caricamento degli altri file),
selezionare la foto e chiamare il plugin LightBox<script type=”text/javascript”>$(function() {// Use this example, or...
$(‘a[@rel*=lightbox]‘).lightBox();
// Select all links that contains lightbox in the attribute rel
// This, or...
$(‘#gallery a’).lightBox();
// Select all links in object with gallery ID // This, or...
$(‘a.lightbox’).lightBox();
// Select all links with lightbox class // This, or...
$(‘a’).lightBox();
//Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>
- per asscosiare i vari link al lightbox, si possono usrae i selettori di classe, id, opppure definendo nel link la proprietà rel=”lightbox”
-
ora le vostre immagini acquisteranno un nuovo aspetto!!!
- includere nell’header anche il seguente file .css , responsabile di gestire lo stile di visualizzazione del lightbox
BUON DIVERTIMENTO!!!
