Un effetto insolito per animazione d'immagini in Joomla

Vuoi presentare le tue immagini in un modo diverso? Voui attirare attenzione del utente? Allora prova la nostra ricetta!

Questo script di JQuery  potrebbe essere utilizzato  per un sito Joomla o WP o un semplice sito html . Basterebbe collegare la libreria jQuery  al vostro templates. A questo punto ci restera solo di collegare altri due script che poi scaricare sotto articolo. 

Come creare una animazione insolita d'immagini in Joomla?

Vediamo subito un esempio per capire di che cosa si trattera nel articolo

Come inserire la nostra animazione in un articolo di Joomla.

L'immagine deve essere collocata in un div con la class = "panel" o potete atribuire al contenitore della immagine qualche altra classe, importante dopo nel codice jQuery inserire la classe del contenitore giusta

<div class="panel">/*contenitore con la classe panel*/
    <img src="/la vostra immagine img.jpg">/*la nostra immagine d'animazione*/
</div>

Collegare gli sript e la libreria jQuery.

<script src="/js/jquery.js"></script>
<script src="/jquery.image-jigsaw.min.js"></script>
<script src="/js/img.js"></script>
<script>/* qui comincia il nostro script che gestisce l'animazione */
$( document ).ready(function() {
    $(".panel").jigsaw({freq: 2000, x: 4, y: 4, margin: 3});
});
</script>

 Impostazioni d'animazione.

E adesso vediamo nel dettaglio come utilizzare il nostro nuovo script in un articolo Joomla o WP.

Prima di tutto dobiamo inserire le nostre fail di  java script, che potete scaricare sotto l'articolo nella cartella “js”  del vostro template  per esempio  o in una cartella qualsiasi, basta scivere in seguito in maniera coretta il percorso per arrivare a questi fail al interno del sito (come farlo abbimo spiegato nei corsi dedicati a Css e Html nonche CSS pratica )

Dopo di che nel articolo o nel modulo di joomla inserire una immagine racchiusa in un tag div o semplicemente tag “p” del paragrafo e attribuire a questo tag "div" o "p"  classe "panel".

E puoi con aiuto del plugin Sourcerer se utilizzi Joomla per esempio (altrimenti i vosti tag per collegamento di java script  verano eliminati dalla joomla e un dato di sicurezza per il tuo  sito ) inserire il percorso per i nostri plugin jquery.js , jquery.image-jigsaw.min.js , img.js.

Importante di seguire sequenza indicata cio è prima deve essere caricata la libreria jQuery dopo query.image-jigsaw.min.js e img.js puoi lo script della animazione  con parametri che posiamo sempre cambiare, per esempio velocita e divisone della imagine per rige e colonne, spazio fra i quadrati.

Nel mio caso in questo articolo il codice del percorso è questo

Okey! Adesso puoi presentare le tue immagini in modo diverso !

Letto 1752 volte