jQuery: due effetti di divisione e scomposizione delle immagini

jQuery non può effettivamente dividere le immagini, ma può sovrapporre alle immagini degli elementi che, tramite CSS e animazioni, daranno l'illusione della divisione dell'immagine. I due esempi che seguono sono simili e al tempo stesso diversi. Nel primo esempio, infatti, all'immagine si sovrapporranno quattro blocchi di uguale dimensione aventi un colore di sfondo semitrasparente. Nel secondo, invece, l'immagine principale verrà quadruplicata in quattro miniature poste ai quattro lati dell'immagine principale. Vediamo insieme i dettagli.

Esempio n. 1

Partiamo da questa marcatura:

<div id="container">
	<img src="1.jpg" alt="" id="test" />
</div>

Useremo questi stili sulle quattro parti in cui verrà scomposta l'immagine:

#container {
	width: 533px;
	height: 350px;
	margin: 2em auto;
	position: relative;
}
#test {
	width: 533px;
	height: 350px;
	display: block;
	cursor: pointer;
}

.part1 {
	background: yellow;
	left: 0;
	top: 0;
}
.part2 {
	background: silver;
	top: 0;
	right: 0;
}
.part3 {
	background: #f90;
	bottom: 0;
	left: 0;
}
.part4 {
	background: teal;
	bottom: 0;
	right: 0;
}

.part {
	position: absolute;
}

.part p {

   width: 100px;
   height: 100px;
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -50px 0 0 -50px;
   text-align: center;
   line-height: 100px;
   font: 1.5em Arial, sans-serif;

}

I blocchi verranno generati dal seguente plugin:

(function($) {


    $.fn.divide = function(options) {
    
       var that = this;
       
       var defaults = {
       
       		parent: that.parent(),
       		parts: 4,
       		speed: 500,
       		content: '',
       		opacity: 1
       
       };
       
       options = $.extend(defaults, options);
    
       return that.each(function() {
              
       var i = 0;
       var width = Math.floor(that.width() / 2);
       var height = Math.floor(that.height() / 2);
       
             
       
       do {
       
           i += 1;
           
           var part = '<div class="part part'+ i + '"/>';
           
           $(part).appendTo(options.parent).animate({
               width: width,
               height: height,
               opacity: options.opacity
           }, options.speed, function() {
           
               $(this).html(options.content);
           
           
           });
       
       
       } while(i < options.parts);
       
       
       
       });
        
    
    
    
    };


})(jQuery);

Il plugin opera sull'immagine, ma gli elementi da lui generati vanno ad inserirsi nel contenitore dell'immagine. Possiamo usare questo plugin nel modo seguente:

$(function() {


    $('#test').click(function() {
    
    
        $(this).divide({
        
          speed: 700,
          content: '<p>Test</p>',
          opacity: '0.6'
        });
    
    });
    
    setTimeout(function() {
    
    	$('#test').click();
    
    
    }, 1000);



});

Potete visionare il primo esempio in questa pagina.

Esempio n. 2

La marcatura del secondo esempio è la seguente:

<div id="image">

	<img src="1.jpg" alt="" id="main" />

</div>

Si tratta di una marcatura identica a quella dell'esempio precedente. Anche il CSS è molto simile:

#image {
	width: 500px;
	height: 333px;
	margin: 0 auto;
	position: relative;
}

#image #main {
	width: 100%;
	height: 100%;
	display: block;
}

#image #thumb-1,
#image #thumb-2,
#image #thumb-3,
#image #thumb-4 {
	position: absolute;
	width: 125px;
	height: 85px;
	display: none;
}

#image #thumb-1 {
	top: 0;
	left: 0;
}

#image #thumb-2 {
	top: 0;
	right: 0;
}

#image #thumb-3 {
	bottom: 0;
	left: 0;
}

#image #thumb-4 {
	bottom: 0;
	right: 0;
}

Ancora una volta opereremo sul genitore dell'immagine corrente:

$(function() {

  var src = $('#image #main').attr('src'), i, len = 5;
  
  for(i = 1; i < len; i += 1) {
  
    $('<img/>').attr({src: src, width: 125, height: 85, id: 'thumb-' + i}).appendTo('#image');
  
  
  }
  
  var interval = setTimeout(function() {
  
  
    $('#main').animate({
      opacity: '0.5'
    }, 1000, function() {
    
    
      $(this).nextAll().show(1000);
    
    });
  
  
  }, 2000);


});

Potete visionare il secondo esempio in questa pagina.

Analisi tecnica

Le tecniche presentate non scompongono di fatto le immagini, ma aggiungono al loro genitore degli elementi che, una volta posizionati con i CSS e mostrati con determinati effetti jQuery, creeranno l'illusione della scomposizione. Quindi:

1. Create un posizionamento contestuale per gli elementi posizionati usando position: relative sul genitore dell'immagine corrente
2. Assegnate a questi elementi un'altezza e una larghezza ottenuti dividendo l'altezza e la larghezza dell'immagine per il numero degli elementi da inserire. Potete arrotondare questi valori usando i metodi round() o floor() dell'oggetto Math.
3. Generate dinamicamente questi elementi creando un ciclo avente come limite il numero massimo di elementi da inserire.
4. Inserite questi elementi nel genitore dell'immagine corrente.
5. Posizionate questi elementi in modo assoluto affinchè si dispongano seguendo lo schema che sceglierete.
6. Assegnate pure altri stili a questi elementi o inserite del contenuto effettivo al loro interno.
7. Giocate sulla loro opacità o sull'opacità dell'immagine corrente per creare degli effetti di transizione.
8. Create un evento al cui interno richiamerete il vostro codice.