Accesible News Slider

Publicado por Nikko el dia 3 Oct 2008 - Guardado en 1,339 Views jQuery, Javascript, Scripts, Diseño Web 1,339 Views

Accesible News Slider, otra alternativa para montar Slide Horizontales basados en jquery. Puede ser una buena forma de resaltar post, si se animan a adaptarlo a worpdress o para montar una sección de productos que se encuentren ofreciendo desde sus blogs.Ver demo - Descarga - Mas Info Reindel

Uso.

Descargar todos los archivos, alojarlos en nuestro servidor y realizar la llamada a ellos, copiando y pegando el siguiente código dentro de nuestra etiqueta < head >…

PLAIN TEXT

JavaScript:

<link rel="stylesheet" href="jquery.accessible-news-slider.css" type="text/css" media="screen, projection" />
<script language="javascript" type="text/javascript" src="jquery-1.1.3.1.pack.js"></script>
<script language="javascript" type="text/javascript" src="jquery.accessible-news-slider.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$(".computers_technology").accessNews({
newsHeadline: "Computers & Technology",
newsSpeed: "normal"
});
/*
newsHeadline: "Top Stories" (String) | Each unique slider (id) or set of sliders (class) can receive a headline.
newsSpeed: "normal" (String/Integer) | "slow","normal","fast", or an integer, with 1 being the fastest animation.
*/
});
</script>

Nuestra estructura

PLAIN TEXT

HTML:

<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 src="images/prev.gif" width="16" height="16" alt="Previous" title="Previous" env="images" /></a>
<a href="#" class="next"><img src="images/next.gif" width="16" height="16" alt="Next" title="Next" env="images" /></a>
<div class="news_items">
<a name="skip_to_news_1"></a>
<div class="container fl">
<div class="item fl">
<a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Titulo Producto o articulo</a><br />
Descripcion detallada del post o articulo...etc etc etc
</div>
</div>
<div class="item fl">
<a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Titulo Producto o articulo</a><br />
Descripcion detallada del post o articulo...etc etc etc
</div>
</div>
</div>
</div>
</div>

El aspecto lo pueden modificar por completo, desde la hoja de estilo que acompaña a los archivos.

delicious, digg, barrapunto, meneame, digg , technorati , stumble it!

Kevin Maschke

3 - 10 - 2008


Hola ^^

Este script me gusta mucho, pero... Seria posible modificarlo para poder incluir las noticias desde una base de datos?

Por ejemplo, si se usa un CMS, incluir las noticias (los resumenes) del CMS... O por ejemplo, si se usa phpbb3, vbulletin, invision, etc... Si se usa alguna modificacion para que las noticias aparezcan en la pagina web... Se podria incluir dentro del slider?
Crea un news Slider per Blog e siti web.

3 - 10 - 2008


[...] Via | Xyberneticos [...]
Slide Horizontales basados en jquery | ZyruS WeB

3 - 10 - 2008


[...] la página de Nikko, xiberneticos.com, me he encontrado con esta utilidad muy buena para cuando quieras implementar una opcion Slide a tu [...]
Julio Lozano

3 - 10 - 2008


Buenisimo, ya lo estoy trabajando para traer la información desde Mysql con PHP. gracias tan pronto lo termine lo publico para todos los que quieran utilizarlo

Xyberneticos

Accesible News Slider