jQuery – Creare un news ticker orizzontale o verticale

Nello script jQuery di oggi vediamo come realizzare un fantastico news ticker orizzontale o verticale ideale per promuovere news o risorse del vostro sito.

Introduzione

In un mio recente progetto ho avuto la necessità di impostare un elemento che facesse scorrere dinamicamente dei messaggi (offerte particolari,news). L’idea era quella di creare un motore simile alle “breaking news” americane ovvero titoli di massimo risalto che scorressero dinamicamente e ciclicamente sullo schermo del visitatore.

Da qui è nato questo script, spero possa esservi utile. Ecco alcune demo utili per capire le funzionalità dello script jQuery:

[button link=”http://www.targetweb.it/tutorial/2012/targetweb-news-ticker/index.html” color=”blue” target=”blank” size=”large”]Demo Base[/button][button link=”http://www.targetweb.it/tutorial/2012/targetweb-news-ticker/verticale.html” color=”blue” target=”blank” size=”large”]Demo Vertical[/button][button link=”http://www.targetweb.it/tutorial/2012/targetweb-news-ticker/fade.html” color=”blue” target=”blank” size=”large”]Demo Fade[/button]

Uso dello script

Usare lo script è molto semplice: implementate per prima cosa le librerie jQuery e lo script targetbox-newsticker.js all’interno del vostro sito:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="js/targetbox-newsticker.js"></script>

Una volta fatto aggiungete il richiamo allo script nel documento, sotto le librerie appena inserite, in questo modo (vedi capitolo implementazione per maggiori info):

<script>
$(document).ready(function() {

   TargetwebNewsTicker("fade","850","130","orizzontale","4000");	

});//FINE DOM
</script>

Ecco i valori possibili da impostare nella funzione dello script:

TargetwebNewsTicker("animazione","larghezzainpx","altezzainpx","orientamento","timer");

Fade/Transition: Imposta il tipo di animazione. Opzioni impostabili tra le virgolette: fade / transition.

Width: Imposta la larghezza del box principale delle news a seconda delle tue esigenze. Espressa in px.

Height: Imposta l’altezza del box principale e dei relativi elementi al suo interno (li). Espressa in px.

Orientamento: Puoi scegliere tra orizzontale e verticale a seconda del tuo gusto. NOTA: se scegli effetto fade questo parametro non sarà preso in considerazione data la natura dell’animazione. Opzioni impostabili tra le virgolette: orizzontale / verticale.

Timer: Imposta il timing per lo scorrimento degli elementi.

Esempi di implementazione delle opzioni

Newsticker Default:

TargetwebNewsTicker("transition","850","130","orizzontale","4000");

Newsticker Fade:

TargetwebNewsTicker("fade","850","130","orizzontale","4000");

Newsticker Orizzontale:

TargetwebNewsTicker("transition","850","130","orizzontale","4000");

Newsticker Verticale:

TargetwebNewsTicker("transition","850","130","verticale","4000");

Newsticker Small Verticale:

TargetwebNewsTicker("transition","400","130","verticale","4000");

Struttura HTML

La struttura HTML prevede il container principale del box con all’interno gli elementi da visualizzare sotto forma di tag listato. Facile e veloce!

    <ul id="targetbox-news">

    	    <li>
                <img src="img_art.jpg" width="150" height="100" class="targetbox-news-img" />
                    <p class="targetbox-news-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </li>
    		<li>
                <img src="img_art2.jpg" width="150" height="100" class="targetbox-news-img" />
                    <p class="targetbox-news-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </li>
    		<li>
                <img src="img_art.jpg" width="150" height="100"  class="targetbox-news-img" />
                    <p class="targetbox-news-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </li>
    		<li>
                <img src="img_art2.jpg" width="150" height="100"  class="targetbox-news-img" />
                    <p class="targetbox-news-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </li>
    	    <li><p class="targetbox-news-txt">Prova testo singolo.</p></li>

    </ul><!--targetbox-->

Stile CSS indispensabile

Nel file zip è già presente il file css necessario.

ul#targetbox-news {
   overflow: hidden;
}

ul#targetbox-news  li {
   list-style:none;
   background:#fff;
   width: 100%;
  /* height: impostata tramite lo script uguale al box visibile ;*/
   padding: 15px;
   float:left;
   border: 1px solid #ccc;
}

ul#targetbox-news li a {
   color: #666;
}

ul#targetbox-news li span {
   display: block;
   color: #06C;
}

.targetbox-news-img{ float:left; margin-right:10px;}
.targetbox-news-txt{margin-right:30px;}

Download e Licenza

[button link=”http://www.targetweb.it/tutorial/2012/targetweb-news-ticker/index.html” color=”blue” target=”blank” size=”large”]Demo Base[/button][button link=”http://www.targetweb.it/tutorial/2012/targetweb-news-ticker/verticale.html” color=”blue” target=”blank” size=”large”]Demo Vertical[/button][button link=”http://www.targetweb.it/tutorial/2012/targetweb-news-ticker/fade.html” color=”blue” target=”blank” size=”large”]Demo Fade[/button]

Licenza e condizioni d’uso: Lo script è usabile liberamente in tutte le sue parti! E’ OBBLIGATORIO tenere almeno i riferimenti di targetweb.it sotto forma di commenti al codice (a voi non costa nulla!). Ovviamente è SEVERAMENTE vietata la ri-distribuzione (ancor peggio se a pagamento) sotto ogni forma senza previo consenso dell’autore.

[viral-download file1=”http://www.targetweb.it/download/2012/targetweb-news-ticker-jquery.rar” name1=”Scarica lo script!” url=”http://www.targetweb.it/news-ticker-jquery-orizzontale-verticale/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#jQuery – News ticker orizzontale o verticale” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]

Conclusioni

Come sempre vi invito a lasciare nei commenti o sulla nostra pagina Facebook un vostro feedback sullo script offerto, magari per migliorarlo (come avete fatto egregiamente per il mio form di contatti). Enjoy!

Ah dimenticavo, hai problemi a implementare lo script o semplicemente vuoi qualcosa di particolare fatto su misura per le tue esigenze? Contattami senza impegno!

  1. Grazie dello spunto, stavo cercando di capire come implementare una soluzione per scambiare informazioni per un workflow e proverò a gestirlo in modo simile.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Raccolta icone hand-drawn in formato PSD

Raccolta icone hand-drawn in formato PSD