Contenido deslizante con Auto-Reproducción

Publicado por Nikko el dia 21 Sep 2008 - Guardado en Diseño Web, Javascript, Scripts, jQuery, php Leido 6,920 Veces

contslider.jpg

Auto playing featured Content Slider, una divertida forma para mostrar gran cantidad de contenido en una pequeña área. Estaremos usando XHTML / CSS para la construcción y el estilo de widgets. Junto con las librerías jQuery y Coda Slider plugin para los efectos de animación. Este featured Content Slider, posee un contenido principal (grupos), que se desliza de izquierda a derecha mostrando cada uno de ellos un contenido único. Hay enlaces que actúan como menú de navegación que nos permitirá saltar rápidamente a cualquier grupo en particular. Estos vínculos pueden estar formados por hipervínculo de texto, miniatura, etc.

  • Diferentes tipos de contenido personalizado en los paneles. Se puede poner lo que queramos en los paneles, pero para que sea más fácil para nosotros mismos, habrá un par de diferentes formatos a respetar. Una imagen de fondo cubriéndolo por completo, pero con una superposición de textos.
  • Auto-play. Podemos hacer click en los paneles para saltar a cada grupo especifico, o dejar que las transiciones se produzcan de forma automática.
  • Flecha indicador. Sirve como indicador visual para resaltar el panel que estamos viendo actualmente, algo así como una pequeña flecha sobre las miniaturas que apunta en el panel.

Ver demo - Mas informacion y descarga Auto playing featured Content Slider - By css-tricks
Instalacion:

PLAIN TEXT
JavaScript:
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
    <script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
    <script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
    <script type="text/javascript">
        var theInt = null;
        var $crosslink, $navthumb;
        var curclicked = 0;
        theInterval = function(cur){
            clearInterval(theInt);
            if( typeof cur != 'undefined' )
                curclicked = cur;
            $crosslink.removeClass("active-thumb");
            $navthumb.eq(curclicked).parent().addClass("active-thumb");
                $(".stripNav ul li a").eq(curclicked).trigger('click');
            theInt = setInterval(function(){
                $crosslink.removeClass("active-thumb");
                $navthumb.eq(curclicked).parent().addClass("active-thumb");
                $(".stripNav ul li a").eq(curclicked).trigger('click');
                curclicked++;
                if( 6 == curclicked )
                    curclicked = 0;
            }, 3000);
        };
        $(function(){
            $("#main-photo-slider").codaSlider();
            $navthumb = $(".nav-thumb");
            $crosslink = $(".cross-link");
            $navthumb
            .click(function() {
                var $this = $(this);
                theInterval($this.parent().attr('href').slice(1) - 1);
                return false;
            });
            theInterval();
        });
    </script>

Agregando estilo

PLAIN TEXT
CSS:
/*
    SLIDER
*/
.slider-wrap                                { width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul                     { text-align: left; margin: 0 15px 0 30px; }
.stripViewer                                { position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer                { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel   { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav       { display: none; }
.nav-thumb      { border: 1px solid black; margin-right: 5px; }
#movers-row   { margin: -43px 0 0 62px; }
#movers-row div  { width: 20%; float: left; }
#movers-row div a.cross-link             { float: right; }
.photo-meta-data                            { background: url(images/transpBlack.png); padding: 10px; height: 30px;
                                              margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span          { font-size: 13px; }
.cross-link   { display: block; width: 62px; margin-top: -14px;
                                              position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb             { background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }

Contenido

PLAIN TEXT
HTML:
<div class="slider-wrap">
    <div id="main-photo-slider" class="csw">
        <div class="panelContainer">
            <div class="panel" title="Panel 1">
                <div class="wrapper">
                    <!-- REGULAR IMAGE PANEL -->
                    <img src="images/tempphoto-1.jpg" alt="temp" />
                    <div class="photo-meta-data">
                        Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
                        <span>"Free Tibet" Protest at the Olympic Torch Rally</span>
                    </div>
                </div>
            </div>
            <div class="panel" title="Panel 2">
                <div class="wrapper">
                    <!-- PANEL CONTENT -->
                </div>
            </div>
            <div class="panel" title="Panel 3">
                <div class="wrapper">
                    <!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
                    <img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
                    <h1>How to Cook a Scotch Egg</h1>
                    <ul>
                        <li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
                        <li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
                        <li>1/2 cup AP flour</li>
                        <li>1-2 eggs, beaten</li>
                        <li>3/4 cup panko-style bread crumbs</li>
                        <li>Vegetable oil for frying</li>
                    </ul>
                </div>
            </div>
            <div class="panel" title="Panel 4">
                <div class="wrapper">
                    <!-- PANEL CONTENT -->
                </div>
            </div>
            <div class="panel" title="Panel 5">
                <div class="wrapper">
                    <!-- PANEL CONTENT -->
                </div>
            </div>
            <div class="panel" title="Panel 6">
                <div class="wrapper">
                    <!-- PANEL CONTENT -->
                </div>
            </div>
        </div>
    </div>
    <!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
          AND THE CLASS="CROSS-LINK" ARE REQUIRED -->
    <a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
    <div id="movers-row">
        <div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
        <div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
        <div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
        <div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
        <div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
    </div>
</div>

Ver demo - Mas informacion y descarga Auto playing featured Content Slider - By css-tricks

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1098 posts en Xyberneticos - Leer todos mis articulos Nikko

Delicious / Digg / Barrapunto / Linkk / Technorati / Stumble it!
  1. Javier Murillo - Gravatar

    Javier Murillo

    21-09-2008

    Permalink

    Francamente interesante la demo que se propone y las posibilidades de este contenedor.

    Un saludo !

  2. Nicolás Georger - Gravatar

    Nicolás Georger

    21-09-2008

    Permalink

    Saludos!

    Existe algun plugin para Wordpress que sea idéntico a esto o similar? Estaría dispuesto hasta a donar algunos dólares para tenerlo, está increíble.
    Si alguien lo conoce, por favor me envíe un correo! Gracias

  3. blinkster05 - Gravatar

    blinkster05

    21-09-2008

    Permalink

    Hola!

    Usted tiene un buen Blog.
    Por es lo invito a pasar por mi blog Informatico si no es mucha molestia. No te tomara ni un minuto en pasar a dar un "ojo". Y talvez nos podriamos entrelazar.
    Tambien a todos aquellos que leen esto estan Bienvenidos en mi Blog.

    =D

    http://spam-en-vivo.blogspot.com

    Gracias!

    Saludos!

  4. davarciforum - Gravatar

    davarciforum

    21-09-2008

    Permalink

    Francamente interesante la demo que se propone y las posibilidades de este contenedor.

    Un saludo !



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: