Adipoli jQuery Image Hover Plugin installato su Blogger.

Come installare il Plugin Adipoli Hover Effect in un blog su piattaforma Blogger. Sono disponibili numerosi effetti iniziali e altri che si mostrano al passaggio del mouse.

Non conoscevo il plugin Adipoli che mi è stato segnalato da una amica a cui non metto il link perché l'ho già citata un sacco di volte :) . Si tratta di uno dei tanti effetti basati sulla libreria JQuery che modificano le immagini al passaggio del mouse. Facendo una rapida ricerca anche in lingua inglese non ho trovato nessuno che abbia ancora adattato Adipoli JQuery Plugin a blog su piattaforma Blogger.

Il concetto è quello di selezionare un Effetto Iniziale tra i 4 proposti e un Effetto Hover tra i 16 proposti che comporta una modificazione dell'aspetto della immagine qualora venga puntata con il cursore. Ho postato in rete una dimostrazione di Adipoli JQuery Image Hover Plugin

Per la sua installazione, dopo aver salvato il template, si va su Modello > Modifica HTML > Procedi e si cerca la riga  </head>. Subito sopra si incolla questo codice

<link href='https://sites.google.com/site/scriptperilblog/javascript-2/adipoli.css' rel='stylesheet' type='text/css'/>       
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
        <script src='https://sites.google.com/site/scriptperilblog/javascript-2/jquery.adipoli.min.js' type='text/javascript'/>

Se avete un dominio personalizzato, scaricate i due file colorati di rosso incollandone l'URL sulla barra degli indirizzi e premendo su Invio, quindi caricateli su Dropbox o su un vostro hosting personale.

Adesso dovete scegliere gli effetti da impostare per le vostre immagini. La struttura del javascript è la seguente e il nome da riprendere poi nella classe della immagine può essere scelto a piacere

<script type='text/javascript'>
          //<![CDATA[ 
            $(function(){
                $('.effetto1').adipoli({
                    'startEffect' : 'normal',
                    'hoverEffect' : 'popout'
                });
            });
        //]]>    
</script>

Tale codice va sempre incollato nel modello sotto al codice precedente e prima della riga </head>. Quando si vuole inserire una immagine con questo effetto in un articolo, in una pagina statica o in un widget HTML/Javascript va usato questo codice

<img class="img-style effetto1" src="URL_IMMAGINE" />


Si possono scegliere vari Effetti Iniziali (startEffect) e vari Effetti Hover (hoverEffect). Riporto qui di seguito la lista completa. Possono essere sostituiti ai due colorati di viola inseriti come esempio:

START EFFECTS:

1. transparent
2. normal
3. overlay
4. grayscale

HOVER EFFECT:

1. normal
2. popout
3. sliceDown
4. sliceDownLeft
5. sliceUp
6. sliceUpLeft
7. sliceUpRandom
8. sliceUpDown
9. sliceUpDownLeft
10. fold
11. foldLeft
12. boxRandom
13. boxRain
14. boxRainReverse
15. boxRainGrow
16. boxRainGrowReverse

Si salva il modello e si crea la nostra galleria fotografica formata anche da più effetti in contemporanea. Per maggiore chiarezza vi posto il codice dei 5 effetti che ho realizzato per la demo

<script type='text/javascript'>
          //<![CDATA[ 
            $(function(){
                $('.nrmpop').adipoli({
                    'startEffect' : 'normal',
                    'hoverEffect' : 'popout'
                });
                $('.overslice').adipoli({
                    'startEffect' : 'overlay',
                    'hoverEffect' : 'sliceDown'
                });
                $('.transrandom').adipoli({
                    'startEffect' : 'transparent',
                    'hoverEffect' : 'boxRandom'
                });
                $('.overfold').adipoli({
                    'startEffect' : 'overlay',
                    'hoverEffect' : 'foldLeft'
                });
                $('.transreverse').adipoli({
                'startEffect' : 'transparent',
                'hoverEffect' : 'boxRainGrowReverse'
                });
                });      
             //]]>    
        </script>

dove i nomi colorati in rosso sono arbitrari e li ho inseriti per richiamare quel determinato javascript. Gli effetti scelti per ciascuna funzione sono invece colorati di viola. Come potete constatare non è presente l'effetto iniziale grayscale che mostra le immagini con solo grigi. Tale effetto infatti non ha funzionato nel modello che ho usato come prova. Funziona invece benissimo nella demo del creatore di Adipoli. Non posso dire se ci siano delle incompatibilità di grayscale con il template che ho usato come test o che il suo mancato funzionamento dipenda da qualche altra ragione. Se uno è interessato proprio a quell'effetto iniziale può inserirlo come 'startEffect' : 'grayscale' per vedere se funziona nel suo modello.

Passo a postare anche il codice che ho usato nel post di demo per realizzare la galleria fotografica Adipoli

<img class="img-style nrmpop" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhJjhuztEAKtSlPhViX8qGPt36_mF8BnZjTWs7OGzJtlVc9E02Xgt-eKNv7mEPyI8dEhPjFItAAahInHnZtVhUwLkQKRvAcCyOMEMGSF2ZlORKM8A8TjDdl8mSyaNZvgONNkvdTEUqn0Hk/s300/albero.jpg" /><br />
<img class="img-style nrmpop" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LXfq00t0np-ug3clc6rbdSN-avW89JQEpxdnpxDdxIopbRcsjH4o3OqJYB8cHnTrL6eH4obXyE9PkrZJhLRZWc-wxFy79EsNpZvYtjlas3U4ZoVHVwLkbeaqgTMiXC4GhID2Zu3tGW_V/s300/alci.jpg" /><br />
<img class="img-style nrmpop" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDNJU88zYoDYM4obXsVCKH2mz2-p8d8KcaDzKbUVAJCyULOyXsVTTuvbg0tdR1P1Qk5dpwOUQye-dYENe-Uv9ia2QkwyC6-CITIrhaRpsDJBJUI0_W4YCULjl0oBIKhpY5aNxCmLvulxMD/s300/bruco.jpg" /><br />
<img class="img-style overslice" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxaRQJ0rilTdoyZl3aLRSQMJiGwIRRi5Kylp7RmHV__Buyd8KEG6JmoW6n0qdx6F09dXXixGkSxGGShkHLhKy7XIIugSZwdhzi3iv8NsY6EFe-f5RyWFLNTyT7U8Ga_0b9YFMpZdLfKH-7/s300/corolla.jpg" /><br/>
<img class="img-style overslice" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUW21a7Wq7r9fZmXzfhkDhT-KLgpcVcvs7BTMIArPvYNtVS6e9esO2uM3q-hpbCvRTQ0QYY0PKeVZhTZ70QkajZR-qJ4xLi42acHGuYXHmgAuW4SaM2FRf5JGCLLw_5N7RYXy7Nw9h5WQ8/s300/elefante.jpg" /><br/>
<img class="img-style overslice" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhJjhuztEAKtSlPhViX8qGPt36_mF8BnZjTWs7OGzJtlVc9E02Xgt-eKNv7mEPyI8dEhPjFItAAahInHnZtVhUwLkQKRvAcCyOMEMGSF2ZlORKM8A8TjDdl8mSyaNZvgONNkvdTEUqn0Hk/s300/albero.jpg" /><br/>
<img class="img-style transrandom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw1VzsfFWPdA-5GBv1etQQGrodc0l7F6cY0hE7xnxmo5JfrQZ77u3-q2Com1oACgiOxQBHHLRSEXttIhFl2wlFOIqnH85yHhzeUHtP3nseB9U5c06qgf9ovt8mBGYUROfFdMv8pu5zqTWW/s300/insetti.jpg" /><br />
<img class="img-style transrandom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyFu0RHWnlgGf-7puPekKiFT3zjwsHlb5Vexho7E-WT5wTRavVFlAYoVXpOjaqdcMjat0g7RzWDxuaf2-l94XtO7KsS8V1w-U8tsIDV9aOPqi6k7w66JqOeMMhmiow5PX-12Zq3gdSRJ3X/s300/lucertola.jpg" /><br />
<img class="img-style transrandom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizziJd9kPPS76t_XeoHglsvrDc09W0Op6zr-qaxquMNLHWwrqBrt0GZH1Kfs1L1J5RlSQStp8mdLZ5P8y_tmo2laHSa1gbwoNhBAlT3Ki8RNewR1pWt_iykUoL0nhQs9sRZUEt9hnMufkb/s300/microscopio.jpg" /><br/>
<img class="img-style overfold" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm6ylLPWqOIiIjJDl95qa3spOwWDD7YTENDlzqYQh0rYy1kTaGnwvBrcd-A0OesHkBGldA167KXhBuk2MP5pMfO5rzty2eccMiT4WoRurGJ51WUordWyA6NN85-xQyIT0mZuXr2ODW7WLK/s300/orsi.jpg" /><br />
<img class="img-style overfold" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1vr1_vWUPkH128Xc8rWqhmqz7yg1mtKkfBPRalLG1PB2TAua-xCUve2jL2KcwAlkSGvx21Lx0de_1UFoo_NT8Z5jXcHXmR2efzLlOvC5SPWASnrLSM5AEN3NErUA8sWh8vNaQNcgnkpln/s300/rana.jpg" /><br />
<img class="img-style overfold" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV8mRhLPzo3haY7k3Kh4j4oYCbGk2xiPDQVDiWClH79P3vmwUfRVNxyug3G2AZxoXveKG_Ds0XGzsbFsJNjAiJkSDv0wCgqB8v6vojaA3R4CmwM52wSyB-a_ig1hYUCnXCwwN7Hdf4HLAc/s300/scimmia.jpg" /><br/>
<img class="img-style transreverse" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LXfq00t0np-ug3clc6rbdSN-avW89JQEpxdnpxDdxIopbRcsjH4o3OqJYB8cHnTrL6eH4obXyE9PkrZJhLRZWc-wxFy79EsNpZvYtjlas3U4ZoVHVwLkbeaqgTMiXC4GhID2Zu3tGW_V/s300/alci.jpg" /><br />
<img class="img-style transreverse" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9H4bJDnQ7CtQDx0-tKLaFP4Zi18r-A8Pl_nDiLvMmqhKmAiidkbG4eGuTs3LKyT9KDujEtrvk9xP_3K9iJp1Sbm-XnJkebCabhKoWK4opDQ1pTpuRQiMoIvq_3StiyNHfoB0nW66XO-H/s300/cavalli.jpg" /><br />
<img class="img-style transreverse" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUW21a7Wq7r9fZmXzfhkDhT-KLgpcVcvs7BTMIArPvYNtVS6e9esO2uM3q-hpbCvRTQ0QYY0PKeVZhTZ70QkajZR-qJ4xLi42acHGuYXHmgAuW4SaM2FRf5JGCLLw_5N7RYXy7Nw9h5WQ8/s300/elefante.jpg" />

Dove le espressioni in rosso sono assolutamente arbitrarie e devono riprendere il nome dell'effetto corrispondente nel codice precedente. I tag <br/> sono dei semplici salti di riga mentre le immagini sono inserite tramite URL e la loro dimensione può essere scelta a piacere. Se il nostro modello di Blogger introduce automaticamente dei bordi e delle ombre potrebbero manifestarsi degli inestetismi.