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:

Demo BaseDemo VerticalDemo Fade

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

Demo BaseDemo VerticalDemo Fade

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.

Per scaricare il file completo devi condividere l'articolo su un social network.

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!

Lascia la tua opinione

4 comments

×