slidequery.jpg

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 &amp; 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.