martes, 9 de septiembre de 2014

Poner moderno Slider de imágenes usando Jquery en Blogger

Por fin!... Un post nuevo para Bloggers, Hoy hablaré o enseñaré ¿Cómo insertar un slider? este, hecho en Jquery, CSS y lógicamente HTML, este post hecho especificamente para un lector que comentó en un artículo anterior aunque el tipo de Slider que solicitaba era algo complejo algo hice a partir del siguiente párrafo.


En el siguiente link pueden ver un demo del Slider para imágenes:

http://bloggin-prueba.blogspot.com/

INSTALACIÓN DEL SLIDER

Muy bien llegamos a la parte más importante la instalación del Slider para ello se debe tener en cuenta algunos factores para que el slider sea independiente en nuestro blog; a qué va esto?.... a que los scripts y códigos sentenciados funcionen independientemente estos alojandolos en un hosting propio o citándolos directamente.

Si se quiere instalar rápidamente el slider siendo dependiente tan sólo será ir a Escritorio > Diseño > Añadir un gadget > HTML/JavaScript, posteriormente pegaremos el siguiente código:
<style type="text/css">
<!--

#slidebox{position:relative; border:1px solid #ccc; margin:40px auto;overflow:hidden;}
#slidebox, #slidebox ul {width:600px;height:300px;}
#slidebox, #slidebox ul li{width:600px;height:300px;}
#slidebox ul li{position:relative; left:0; background:#eee; float:left;list-style: none; padding:15px 28px;  font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#slidebox .next, #slidebox .previous{position:absolute; z-index:2; display:block; width:21px; height:21px;top:139px;}
#slidebox .next{right:0; margin-right:10px; background:url(http://oi61.tinypic.com/20jjsx.jpg) no-repeat left top;}
#slidebox .next:hover{background:url(http://oi61.tinypic.com/s41995.jpg) no-repeat left top;}
#slidebox .previous{margin-left:10px; background:url(http://oi62.tinypic.com/2wfplav.jpg) no-repeat left top;}
#slidebox .previous:hover{background:url(http://oi57.tinypic.com/15dp6yq.jpg) no-repeat left top;}
#slidebox .thumbs{position:absolute; z-index:2; bottom:10px; right:10px;}
#slidebox .thumbs a{display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px; background:url(http://oi61.tinypic.com/1zu05g.jpg); color:#fff;}
#slidebox .thumbs a:hover{background:#fff; color:#000;}
#slidebox .thumbs .thumbActive{background:#fff; color:#000; display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px;}
-->
</style>

<script src="https://dl.dropbox.com/s/3yyfmdy1zu2g2mz/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/s/k0sckxl69gvu9h3/jcarousellite_1.0.1c5.js" type="text/javascript"></script>
<script type="text/javascript">

$(function() {
    $("#slidebox").jCarouselLite({
        vertical: false,
        hoverPause:true,
        btnPrev: ".previous",
        btnNext: ".next",
        visible: 1,
        start: 0,
        scroll: 1,
        circular: true,
        auto:1000,
        speed:500,              
        btnGo:
            [".1", ".2",
            ".3", ".4"],
       
        afterEnd: function(a, to, btnGo) {
                if(btnGo.length <= to){
                    to = 0;
                }
                $(".thumbActive").removeClass("thumbActive");
                $(btnGo[to]).addClass("thumbActive");
            }
    });
});
</script>


<div id="slidebox">
<div class="next"></div>
<div class="previous"></div>
<div class="thumbs">
<a href="#" onclick="" class="1 thumbActive">1</a>
<a href="#" onclick="" class="2">2</a>
<a href="#" onclick="" class="3 ">3</a>
<a href="#" onclick="" class="4">4</a>
</div>
    <ul>
        <li><img src="URL IMAGEN" width="600" height="300" /></li>
        <li><img src="URL IMAGEN" width="600" height="300" /></li>
        <li><img src="URL IMAGEN" width="600" height="300" /></li>
        <li><img src="URL IMAGEN" width="600" height="300" /></li>
    </ul>
</div>
Sólo quedando guardar y este se verá en nuestro blog, consideraciones a tener en cuenta; lo que está en color azul son los scripts alojados en una cuenta de DropBox personal por ende lo que recomiendo para optimizar la velocidad de este gadget en nuestro blog es alojar dichos "Scripts" en un lugar personal Hosting etc. y citarlos, si quieren lograr esto pueden guiarse con este tutorial (CLICK AQUÍ).

Para bajar los dos archivos(scripts) click en cada enlace:
-Script 1           -Script 2


Por otra parte lo que se encuentra en color Naranja es el link de las imágenes y al lado está establecida la relación del tamaño que es igual a la del Slider (600x300).

De esta forma finalizo la sencilla instalación de nuestro Slider para imágenes, espero les guste.

Hasta la próxima BloggeRs :)

4 comentarios:

  1. Hola Andrès, muchas gracias por el post. Te enojarías conmigo si digo que aun no es lo que necesito? Lo cierto es que justo hoy buscando en la web encontré la solución y me vine para acá para decírtelo y me encontré con tu post =).
    Te enviarè como la vez anterior los link del blog en que lo vi y también el de pruebas mio para que lo veas, no te sorprendas mucho por lo que veas en el mio porque he hecho un montón de tonteras allí y casi destruí la plantilla xD.

    A propósito, vi la fecha del post y me di cuenta que me demorè un buen rato en pasar por aquí, por favor discúlpame, como estabas ocupado con tus estudios creí que tardarìas màs en responder, pero veo que me equivoquè, has sido muy amable y diligente y por eso solo tengo palabras de agradecimiento para ti.
    Ah y espero que te haya ido bien en tus examenes =).
    Hasta pronto y un abrazo.

    ResponderEliminar
    Respuestas
    1. Hola Nan Claro no pasa nada miraré el post que enviaste trabajaré en ese código para pulirlo y publicarlo aquí en un post próximamente....

      Gracias a ti por leernos y Saludos,

      Eliminar
  2. Hola, que lo perfecciones seria genial!!
    Vendré a visitarte pronto para ver ese post.
    Gracias otra vez =)

    ResponderEliminar

SÍGUENOS EN: