Slidedshow de imagenes y noticias con Accesible News Slider

Accesible News Slider es una de las tantas alternativas que podemos utilizar para crear Slideshow con imagenes y links. Se puede usar para post destacados o mas visitados, o lo que ustedes imaginen. En la página oficial pueden ver una demo y mas información sobre esta herramienta.(http://www.reindel.com)


Cómo lo instalamos?

Bueno,

Primero: hay descargar los archivos y subirlos a nuestro servidor. Descargar

Segundo: copiar y pegar el siguiente código justo arriba de la etiqueta < / head >.


Script:

<link href='http://iggna.net78.net/scripts/jquery.accessible-news-slider.css' media='screen, projection' rel='stylesheet' type='text/css'/>


<script language='javascript' src='http://iggna.net78.net/scripts/jquery-1.1.3.1.pack.js' type='text/javascript'/>

<script language='javascript' src='http://iggna.net78.net/scripts/jquery.accessible-news-slider.js' type='text/javascript'/>

<script language='javascript' type='text/javascript'>

$(function() {

$(&quot;.computers_technology&quot;).accessNews({

newsHeadline: &quot;Computers &amp; Technology&quot;,

newsSpeed: &quot;normal&quot;

});

/*

newsHeadline: &quot;Top Stories&quot; (String) | Each unique slider (id) or set of sliders (class) can receive a headline.

newsSpeed: &quot;normal&quot; (String/Integer) | &quot;slow&quot;,&quot;normal&quot;,&quot;fast&quot;, or an integer, with 1 being the fastest animation.

*/

});

</script>

grabamos y vamos a a agregar "Elementos de página" elemento HTML, y copiamos este código:

<!-- Example 1 [ Begin ] -->

<div class="news_slider computers_technology">
<div class="messaging">
Please Note: You may have disabled JavaScript and/or CSS. Although this news content will be accessible, certain functionality is unavailable.
</div>
<a href="#skip_to_news_1" class="skip">Skip to news content.</a>
<a href="#" class="prev"><img env="images" width="16" alt="Previous" src="http://ignablog.googlepages.com/prev.gif" height="16" title="Previous"/></a>
<a href="#" class="next"><img env="images" width="16" alt="Next" src="http://ignablog.googlepages.com/next.gif" height="16" title="Next"/></a>
<div class="news_items">
<a name="skip_to_news_1"></a>
<div class="container fl">
<div class="item fl">
<a href="/"><img width="75" alt="" src="http://ignablog.googlepages.com/photo.gif" class="fl" height="75"/></a>
<div class="fl">
<a href="/">Etiam Porttitor Adipiscing</a><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img width="75" alt="" src="http://ignablog.googlepages.com/photo.gif" class="fl" height="75"/></a>
<div class="fl">
<a href="/">Praesent Ac Ligula Ac Orci Tempor Blandit</a><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img width="75" alt="" src="http://ignablog.googlepages.com/photo.gif" class="fl" height="75"/></a>
<div class="fl">
<a href="/">Etiam Porttitor Adipiscing</a><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img width="75" alt="" src="http://ignablog.googlepages.com/photo.gif" class="fl" height="75"/></a>
<div class="fl">
<a href="/">Praesent Ac Ligula Ac Orci Tempor Blandit</a><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img width="75" alt="" src="http://ignablog.googlepages.com/photo.gif" class="fl" height="75"/></a>
<div class="fl">
<a href="/">Etiam Porttitor Adipiscing</a><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img width="75" alt="" src="http://ignablog.googlepages.com/photo.gif" class="fl" height="75"/></a>
<div class="fl">
<a href="/">Praesent Ac Ligula Ac Orci Tempor Blandit</a><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img width="75" alt="" src="http://ignablog.googlepages.com/photo.gif" class="fl" height="75"/></a>
<div class="fl">
<a href="/">Etiam Porttitor Adipiscing</a><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
</div>
</div>
</div>

<!-- Example 1 [ End ] -->

Si todo sale bien debería tener un slideshow como en la demo, también pueden ver como me quedó a mi en el blog de pruebas.