Qualche tempo fa stavo navigando su abc.net , in particolare stavo guardando le conseguenze del disastro accaduto a Fukushima in Giappone.
Oltre ad un senso di sconforto, avevo notato questa galleria che permetteva di farsi un idea su quel che era prima e quel che è rimasto dopo, creando così una sorta di effetto before/after.
La vista di questa galleria mi aveva particolarmente incuriosito quindi mi sono messo alla ricerca per scoprire come è stata realizzata.
Diciamo che ho trovato diverse proposte, ti mostrerò quella che per me è la più semplice, realizzata da Kevin Liew.
Vediamo come realizzarla:
Il codice HTML è molto semplice, basta un div con 2 immagini. Abbiamo bisogno del valore dell’ attributo ALT per visualizzare una didascalia e l’altezza della prima immagine, che sarà utilizzata per il calcolo, quindi, è obbligatorio definirla.
Codice Html:
1 2 3 4 | < div class = "beforeafter" > < img src = "immagine-1.jpg" alt = "Prima" width = "500" height = "280" > < img src = "immagine-2.jpg" alt = "Dopo" width = "500" height = "280" > </ div |
In realtà, dopo l’elaborazione con Javascript, il nostro contenitore prenderà questa forma:
1 2 3 4 5 6 7 | < div class = "beforeafter" > < div class = "ba-mask" > </ div > < div class = "ba-bg" > </ div > < div class = "ba-caption" > </ div > < img src = "immagine-1.jpg" alt = "Prima" width = "500" height = "280" > < img src = "immagine-2.jpg" alt = "Dopo" width = "500" height = "280" > </ div > |
Il codice CSS non è complicato come sembra, per farvi un idea fate riferimento a questa immagine:
Codice CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | #container {width:500px; margin:0 auto;} /* width and height for the block */ .beforeafter {width:500px; height:280px;} /* The following is the mandatory styling for the plugins */ .ba-mask { /* first image */ position:absolute; top:0; left:0; z-index:100; border-right:4px solid #000; overflow:hidden; box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.6); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6); -moz-box-shadow: 5px 0 7px rgba(0, 0, 0, 0.6); } .ba-bg { /* second image */ position:absolute; top:0; left:0; z-index:0; } .ba-caption { /* caption */ /* mandatory */ position:absolute; bottom:10px; left:10px; z-index:120; /* customizable styling */ background:#000; color:#fff; text-align:center; padding:5px; font-size:12px; font-family:arial; filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } |
Codice jQuery:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | (function($){ $.fn.extend({ //plugin name - qbeforeafter qbeforeafter: function(options) { var defaults = { defaultgap: 50, leftgap: 10, rightgap: 10, caption: false, reveal: 0.5 }; var options = $.extend(defaults, options); return this.each(function() { var o = options; var i = $(this); var img_mask = i.children('img:eq(0)').attr('src'); var img_bg = i.children('img:eq(1)').attr('src'); var img_cap_one = i.children('img:eq(0)').attr('alt'); var width = i.children('img:eq(0)').width(); var height = i.children('img:eq(0)').height(); i.children('img').hide(); i.css({'overflow': 'hidden', 'position': 'relative'}); i.append('<div class="ba-mask"></div>'); i.append('<div class="ba-bg"></div>'); i.append('<div class="ba-caption">' + img_cap_one + '</div>'); i.children('.ba-mask, .ba-bg').width(width); i.children('.ba-mask, .ba-bg').height(height); i.children('.ba-mask').animate({'width':width - o.defaultgap}, 1000); i.children('.ba-mask').css('backgroundImage','url(' + img_mask + ')'); i.children('.ba-bg').css('backgroundImage','url(' + img_bg + ')'); if (o.caption) i.children('.ba-caption').show(); }).mousemove(function (e) { var o = options; var i = $(this); pos_img = i.position()['left']; pos_mouse = e.pageX; new_width = pos_mouse - pos_img; img_width = i.width(); img_cap_one = i.children('img:eq(0)').attr('alt'); img_cap_two = i.children('img:eq(1)').attr('alt'); if (new_width > o.leftgap && new_width < (img_width - o.rightgap)) { i.children('.ba-mask').width(new_width); } if (new_width < (img_width * o.reveal)) { i.children('.ba-caption').html(img_cap_two); } else { i.children('.ba-caption').html(img_cap_one); } }); } }); })(jQuery); |
Usarlo è estremamente semplice, basterà richiamare il plugin in questo modo:
1 2 3 4 | $(function () { $('.large').qbeforeafter({defaultgap:50, leftgap:0, rightgap:10, caption: true, reveal: 0.5}); $('.small').qbeforeafter({defaultgap:20, leftgap:5, rightgap:10, caption: false}); }); |
Puoi scaricare il plugin con un esempio da qui.
Ti è piaciuto questo plugin jQuery? Non dimenticare di condividere l’articolo con i tuoi amici!
[adsense]
2 Giugno 2011 il 11:50
Dovresti cambiare l’aspetto del cursore sulle immagini usando la proprietà cursor, perchè in questo modo l’utente si accorge del fatto che muovendo il mouse si scopre il secondo stato dell’immagine:
var defaults = {
//…
cursor: ‘move’
}
così usi il metodo css() per permettere all’utente di scegliere, se vuole, anche un cursore custom:
http://www.w3schools.com/css/pr_class_cursor.asp
2 Giugno 2011 il 11:53
Ciao Gabriele, ogni suggerimento è ben accetto! Grazie mille per il tuo intervento 🙂 a presto!
2 Giugno 2011 il 13:56
wow, bellissimo plugin 🙂 grazie per la segnalazione
2 Giugno 2011 il 14:05
Grazie a te per la visita! 😉