Possiamo sviluppare un progetto jQuery senza plugin? Il più delle volte ciò è possibile, ma la tentazione di usare codice già pronto è molto forte quando le tempistiche di realizzazione sono strette. Ma se abbiamo tempo, perché non provare con gli oggetti?
Il progetto
Abbiamo una serie di immagini sparse in un documento e vogliamo trasformarle in una galleria di tipo lightbox. Quando si clicca su un'immagine apparirà un elemento di overlay con la galleria, che mostrerà come prima immagine l'immagine corrente. Le immagini dovranno essere navigabili.
La marcatura
Useremo la seguente marcatura per le immagini:
<a href="percorso/image.jpg" class="gallery">
<img src="percorso/thumb-image.jpg" alt="Testo" />
</a>
Con jQuery creeremo la seguente struttura da aggiungere all'elemento body:
<div id="overlay"></div>
<div id="gallery">
<div id="gallery-wrapper">
<img id="first-image" />
</div>
<div id="gallery-nav"></div>
</div>
Il codice CSS
Useremo il posizionamento assoluto per l'overlay e la galleria. Imposteremo l'altezza totale dell'overlay con jQuery:
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
display: none;
}
#gallery {
width: 500px;
height: 400px;
border: 5px solid #eee;
position: absolute;
top: 50%;
left: 50%;
margin: -210px 0 0 -260px;
background: #fff;
display: none;
}
#gallery-wrapper {
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -200px;
}
#gallery-nav {
height: 2em;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: #f6f6f6;
border-top: 1px solid #eee;
text-align: center;
}
#gallery-nav a {
display: inline-block;
height: 1.6em;
width: 1.6em;
line-height: 1.6;
margin: 0.2em 0.5em 0.2em 0;
text-align: center;
text-decoration: none;
color: #333;
background: #ddd;
}
#gallery-wrapper img {
max-width: 100%;
display: none;
}
#gallery-wrapper > img:first-child {
display: block;
}
Il codice jQuery
Con jQuery dobbiamo:
- creare un metodo helper per ottenere il percorso ed il testo alternativo dell'immagine corrente
- creare un metodo helper per inserire le altre immagini nella galleria
- creare un metodo per generare la struttura HTML della galleria
- creare un metodo per generare la navigazione, facendo in modo che ciascun link faccia riferimento ad un'immagine
- creare un metodo per popolare e visualizzare la galleria
- creare un metodo per gestire la navigazione
- creare un metodo che chiuda la galleria e ne ripristini la struttura iniziale.
Ecco il nostro oggetto:
var Gallery = {
utils: {
getCurrentImage: function(element) {
var $img = $('img', element),
src = $img.attr('src'),
alt = $img.attr('alt');
return {
src: src,
alt: alt
}
},
insertOtherImages: function(element) {
var parent = element.parents('#content');
var links = parent.find('a.gallery').not(element);
links.each(function() {
var $link = $(this);
var image = Gallery.utils.getCurrentImage($link);
$('<img/>').attr({
src: image.src,
alt: image.alt
}).appendTo('#gallery-wrapper');
});
}
},
fn: {
createGallery: function() {
$('<div id="overlay"/>').
css('height', $(document).height()).
appendTo('body');
$('<div id="gallery"/>').insertAfter('#overlay');
$('#gallery').html('<div id="gallery-wrapper"></div><div id="gallery-nav"></div>');
$('<img id="first-image"/>').appendTo('#gallery-wrapper');
},
populateGallery: function() {
$('a.gallery').each(function(i) {
$('<a/>').attr({
href: '#',
'data-image': i
}).text(i + 1).appendTo('#gallery-nav');
});
},
showGallery: function() {
$('a.gallery').on('click', function(e) {
e.preventDefault();
var $a = $(this);
var image = Gallery.utils.getCurrentImage($a);
$('#first-image').attr({
src: image.src,
alt: image.alt
});
Gallery.utils.insertOtherImages($a);
$('#overlay').fadeIn(400, function() {
$('#gallery').fadeIn(400);
});
});
},
navigate: function() {
$('a', '#gallery-nav').live('click', function(e) {
e.preventDefault();
var index = $(this).data('image');
$('img', '#gallery-wrapper').eq(index).fadeIn(600).siblings('img').hide();
});
},
closeGallery: function() {
$('#overlay').on('click', function() {
var overlay = $(this);
$('#gallery').fadeOut(400, function() {
overlay.fadeOut(400);
$('#first-image').show().attr({
src: '',
alt: ''
}).siblings('img').remove();
});
});
}
},
init: function() {
this.fn.createGallery();
this.fn.populateGallery();
this.fn.showGallery();
this.fn.navigate();
this.fn.closeGallery();
}
};
Quindi inizializziamo il nostro oggetto:
$(function() {
Gallery.init();
});