Scarica l'articolo in formato PDF

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.

Bellissima galleria di immagini realizzata in jQuery con effetto prima e dopo

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:

effetto prima dopo jquery

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]