Dividere le immagini in CSS e jQuery!

Oggi vi presento uno script in  CSS e  jQuery che ci permette di dividere le immagini in più parti in base alla modalità selezionata sfruttando una sola proprietà CSS: background-position.

RISULTATO FINALE

Ketek - Dividere immagini in CSS e jQuery

Ecco come l'ho realizzato:

HTML

<div id="imm_divisa">
	<ul>
    </ul>
    <div id="mode">
        <div class="mode" id="griglia">Griglia</div>
        <div class="mode" id="verticale">Verticale</div>
        <div class="mode" id="orizzontale">Orizzontale</div>
	</div>
</div>
</div>
<div id="footer">
	<div id="imgs">
    	<ul>
        <li><img src="dividere_immagini/Pearly Water.jpg" /></li>
        <li><img src="dividere_immagini/Retina-Wallpapers-008.jpg" /></li>
        <li><img src="dividere_immagini/6999573235_543d2e6b12.jpg" /></li>
        <li><img src="dividere_immagini/Retina-Wallpapers-007.jpg" /></li>
        </ul>
    </div>
</div>

CSS

Niente di particolare, il css serve solo per gestire il posizionamento delle immagini all'interno della pagina:

 
html,body
{
                margin:0; padding: 0;
                height: 100%;
                text-align:center;
}
#wrap {height: auto; min-height: 100%;}
ul
{
                position:relative;
                list-style:none;
}
#imm_divisa
{
                text-align:start;
                min-height:100%;
                height:100%;
                height:auto !important;
                padding-bottom:290px;
                padding-top:40px;
}
#footer
{
                width:100%;
                text-align:center;
                position: relative;
                 margin-top: -290px; /* valore negativo dell'altezza del footer */
                height: 280px;
                clear:both;
}
 
 
#imm_divisa ul
{
                width:490px;
                height:490px;
                margin-left:auto;
                margin-right:auto;
                margin-top:30px;
                text-align:center;
}
#imm_divisa ul li
{
                display:inline-block;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                margin-right:20px;
                margin-top:20px;
}
.block
{
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                border-color:#32281c;
}
#footer ul li
{
                display:inline-block;
                width:166px;
                height:166px;
                margin-right:50px;
                margin-top:40px;
                border:5px solid #443726;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
}
#footer ul li img
{
                width:166px;
                height:166px;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                opacity:0.7;
}
 

jQUERY

Eccoci arrivati al codice che gestirà la nostra animazione!

 
window.onload = function (){
 
     var nomeImm = ''; // immagine corrente
     var mode_current = ''; // modalità corrente
     var setting =
     {
      // mode_tab : [row,cols,width,height]
      // mode : [background_position]
      'griglia_tab' : ['2','2','200px','200px'],
      'griglia' : ['0px 0px','200px 0px', '0px 200px','200px 200px'],
      'verticale_tab' : ['1','3','133px','400px'],
      'verticale': ['0px 0px','266px 0px','133px 0px'],
      'orizzontale_tab' : ['3','1','400px','133px'],
      'orizzontale' : ['0px 0px','0px 266px','0px 133px']
     }
 
     $('#footer ul li img').mouseenter(function(){
       $(this).stop().animate({'opacity':'1'},200);
     });
     $('#footer ul li img').mouseleave(function(){
       $(this).stop().animate({'opacity':'0.7'},200);
     });
      $('#footer ul li').click(function()
     {
         changeImage($(this).children('img').attr('src'));
     });
 
     $('.mode').click(function()
     {
         changeMode($(this).attr('id'));
     });
 
     // default
     mode_current = 'griglia';
     changeMode('griglia');
     changeImage('');
 
     function changeImage(nomeImmagine) // cambio l'immagine
     {
         if (nomeImmagine == ''){
             nomeImm = 'dividere_immagini/Pearly Water.jpg'; // immagine di default
         }
         else
         {
             nomeImm = nomeImmagine;
         }
             i=0;
         var width= setting[mode_current+'_tab'][2]; // width di .block
         var height = setting[mode_current+'_tab'][3]; // height di .block
         // riempio blocchi --> CICLO FONDAMENTALE
         $('#imm_divisa ul li').each(function()
         {
            $(this).html('
'+nomeImm+'');background-position:'+setting[mode_current][i]+';width:'+width+';height:'+height+';">
');
            i++;
         });
 
      }
 
      function changeMode(mode) // cambia modalità
      {
          var i =0;
          $('#imm_divisa ul').stop().animate({'opacity':0},0);
          // genero blocchi in base al tipo di divisione
          var cols= setting[mode+'_tab'][0];
          var rows = setting[mode+'_tab'][1];
          var blochi;
          $('#imm_divisa ul').html('');
          for (i=0; i)
          {
              $('#imm_divisa ul').append('');
          }
 
          mode_current = mode;
          changeImage(nomeImm);
          $('#imm_divisa ul').stop().animate({'opacity':1},2000);
          }
      }
      

Nonostante l'uso dei commenti che dovrebbe  semplificare la comprensione del codice,  ne riassumo i punti chiave:

• Le variabili nomeImm e mode_current servono a contenere i nomi dell'immagine e della modalità attualmente in uso;
• La variabile setting contiene i parametri di tutte le modalità di divisione dell'immagine, parametri fondamentali per un' ordinata e corretta gestione dell'animazione;
•  La funzione changeImage() serve a cambiare immagine e a dividerla nei blocchi presenti in base alla modalità selezionata.
• La funzione changeMode() serve appunto a cambiare la modalità di visualizzazione modificando la struttura HTML.