Simple jQuery Spy Effect

En este artículo vamos hablar sobre un script que nos permite tener en nuestra Web un visor dinámico de artículos, noticias o lo que fuera de forma vertical.

Se trata de un módulo que se podría incorporar fácilmente a una columna de nuestra Web o en el contenido ya que su estilo css es muy fácil de modificar.

El script tiene el añadido de que estamos iterando un tabla de artículos de la base de datos mediante PHP donde mostramos la imagen, título, fecha de inserción, autor, etc.

Para implementar el script es necesario incluir las librerías de jQuery y disponer del siguiente código jQuery:

<script type="text/javascript" charset="utf-8">
$(function () {
    $('ul.spy').simpleSpy();
});

(function ($) {

$.fn.simpleSpy = function (limit, interval) {
    limit = limit || 4;
    interval = interval || 4000;

    return this.each(function () {
        // 1. setup
            // capture a cache of all the list items
            // chomp the list down to limit li elements
        var $list = $(this),
            items = [], // uninitialised
            currentItem = limit,
            total = 0, // initialise later on
            height = $list.find('> li:first').height();

        // capture the cache
        $list.find('> li').each(function () {
            items.push('<li>' + $(this).html() + '</li>');
        });

        total = items.length;

        $list.wrap('<div />').parent().css({ height : height * limit });

        $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

        // 2. effect        
        function spy() {
            // insert a new item with opacity and height of zero
            var $insert = $(items[currentItem]).css({
                height : 0,
                opacity : 0,
                display : 'none'
            }).prependTo($list);

            // fade the LAST item out
            $list.find('> li:last').animate({ opacity : 0}, 1000, function () {
                // increase the height of the NEW first item
                $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);

                // AND at the same time - decrease the height of the LAST item
                // $(this).animate({ height : 0 }, 1000, function () {
                    // finally fade the first item in (and we can remove the last)
                    $(this).remove();
                // });
            });

            currentItem++;
            if (currentItem >= total) {
                currentItem = 0;
            }

            setTimeout(spy, interval)
        }

        spy();
    });
};

})(jQuery);
</script>

El código anterior jQuery es necesario para poder generar el efecto en movimiento vertical.

El código PHP para mostrar el listado de artículos es el siguiente:

<div id="sidebar">
      <ul>
            <?php           
            $consulta = "SELECT idNoticia, titulo, DATE_FORMAT(fecha_insercion, '%d-%m-%Y') as fecha, resumen, imagen FROM noticias ORDER BY fecha_insercion desc";
            $rs = mysql_query($consulta, $con);
            while ($row = mysql_fetch_array($rs)) {
            ?>
                <li>
                    <?php
                    if (isset($row['imagen']) && $row['imagen'] != "") {
                        ?>
                        <a href="#" title="View round"><img width="70" height="70" src="../../../images/noticias/<?=$row['imagen'];?>" title="<?php echo $row['titulo']; ?>" /></a>
                        <?php
                    }
                    else {
                        ?>
                        <a href="#" title="No existe imagen"><img width="70" height="70" src="images/no-image.jpg" title="La imagen no está disponible" /></a>
                        <?php
                    }
                    ?>
                        <h5><a href="#" title="View round"><?php echo $row['titulo']; ?></a></h5>
                        <p><?php echo $row['fecha']; ?> por <a href="https://www.jose-aguilar.com/" title="Visita la p&aacute;gina oficial de Jose Aguilar">Jose Aguilar</a></p>
                        <p class='rating four'>4 estrellas</p>
                        <p><a href="#" title='Ver m&aacute;s informaci&oacute;n'>Ver m&aacute;s</a></p>
                </li>
            <?php
            }
            ?>
        </ul>
    </div>

Para realizar la consulta que mostramos anteriormente es necesario conectar con la base de datos para obtener los resultados de la query.

Recorremos mediante un bucle todos los registros de la tabla «noticias» obteniendo los campos: titulo, fecha, resume, imagen para mostrarlos dentro de una lista html con <ul> y <li>.

Ver ejemplo en funcionamiento