20/10/2013

Maravillas con JQuery, carrusel de imágenes para Blogger: jQuery www.Catchmyfame.com Infinite Carousel Plugin


Imagen demostrativa, en el detalle el componente en funcionamiento y cómo insertarlo en Blogger.
La creación de un carrusel de imágenes para una página web o Blog es ideal para proporcionar un estilo de presentación dinámica y moderna.

Cada imagen que compone el carrusel puede ser interactiva y proporcionar acceso a entradas o enlaces de cualquier clase, de manera que cuando el usuario visiona la imagen, puede hacer "clic" en ella para entrar en el detalle de la información que deseemos proporcionar.



Con los carruseles de imágenes se realizan páginas de bienvenida, resúmenes de "entradas recomendadas", exposición de fotografías, presentación de datos... las posibilidades son numerosas y realmente interesantes pues realzarán el estilo visual de nuestros contenidos. Aprende cómo integrar uno en tu Blog y disfrutar de sus ventajas utilizando Google Drive como servidor web de las imágenes a mostrar en el carrusel.



Todo el código fuente utilizado, así como las imágenes y resto de información manejada para realizar esta guía es propiedad de www.catchmyfame.com.

Conceptos previos, www.catchmyfame.com:


Vamos a integrar código fuente de una de las mejores publicaciones que existen en Internet sobre añadidos para utilizar en páginas web y Blogs de todo el mundo: http://www.catchmyfame.com/.

Se trata de un sitio web con increíbles diseños en JQuery, trabajos con HTML5 y CSS3 que añadir a sitios web y aprovechar para equipar a nuestra web con lo útlimo en presentación y animaciones de la industria web.

La calidad y eficiencia del código se destila en cada ejemplo que ofrecen en su web. En Diarios de la nube voy a basarme en su "infinite Carousel" para enseñarte cómo añadirlo a tu Blog y aprender a utilizarlo para lo que necesites.

Vamos a desarrollar dos formas de hacerlo:

A) Añadiendo el carrusel por medio de un IFRAME: es la forma más compacta y respetuosa con nuestro Blog de hacerlo. Nos basaremos en Drive para hacerlo.
B) Añadiendo el carrusel en el Blog sin IFRAME: Metiendo las librería directamente en nuestra plantilla del Blog.

Haz "Clic" para ver Catchmyfame's infinite carousel funcionando en la web de su creador 



A) Paso a paso, añadiendo Infinite Carousel a tu Blog de Blogger en un IFRAME:
1) Conéctate a www.catchmyfame.com, entrarás en la página para descargarte el plugin de ejemplo.


2) Haz "clic" en el texto verde del enlace "Download jquery.infinitecarousel.zip (version 3.0.3  – January 24, 2013)". Se te descargará un .zip que se llama jquery.infinitecarousel3.zip:
  •  Descomprime el .zip para visualizar el contenido de los archivos necesarios para manejar el carrusel:
  • jquery.infinitecarousel3.min: que es el .js que contiene el código JavaScript minimizado y optimizado para una óptima descarga.
  • En la carpeta "Images" encontrarás las imágenes de los botones y controles para que el usuario pueda pasarlas adelante o atrás.
3) Una vez descomprimida la información súbela a Drive, vamos a crear un Iframe o cuadro interactivo donde colocaremos todos los elementos del carrusel:
  • 3.1 Móntate en tu disco duro una carpeta que contenga todo lo que necesitamos para crear nuestro carrusel:
  • En tu escritorio créate la carpeta "Sitio" 
  • Dentro de la carpeta "Sitio" crea una carpeta "js" y otra "images".
  •  En la carpeta "js" mete estos tres archivos que puedes extraer de dentro del .zip que te bajaste en el paso 2) o que puedes descargar desde mi Drive:
  • https://googledrive.com/host/0Bwgc28XHjPA2RlFaSlBWcVVNSUk/easing.js
  • https://googledrive.com/host/0Bwgc28XHjPA2RlFaSlBWcVVNSUk/jquery-1.7.1.min.js  
  •  https://googledrive.com/host/0Bwgc28XHjPA2RlFaSlBWcVVNSUk/jquery.infinitecarousel3.min.js
Si los descargas de Drive por el navegador, copia y pega el código completo que hay en ellos y lo guardas con el mismo nombre del .js que hayas descargado.
  • 3.2 En la carpeta "images" mete las imágenes que deseas que salgan en el carrusel, si para probar quieres que salgan las del autor, puedes usar las de mi carpeta Drive:
  •  https://googledrive.com/host/0Bwgc28XHjPA2b3hjVm1wbmxNWVk  
Aquí debes meter las imágenes que quieres utilizar en el carrusel. Bien sea de entradas tuyas porque luego conectarás con ellas si el usuario las selecciona o bien porque sean imágenes de fotografías sin enlace a ninguna página que simplemente desees mostrar.
  • 3.3 Por último crearás una index.html que contendrá el código para realizar el carrusel y las referencias a tus js e imágenes:
  • Mi Index.html NO te servirá para mostrar las imágenes tuyas, la puedes utilizar como prueba o práctica pero lo importante será que crees la tuya personal: https://googledrive.com/host/0Bwgc28XHjPA2RUNzVHg0Tmw3TVU Descarga mi index.html para crearte la tuya propia.
  • Ahora localiza  dentro de mi index.html descargada la siguiente línea:
<ul id="carousel"> 
  • Bajo esa línea encontrarás el código que muestra las imágenes que hayas subido y los enlaces que a ellas quieras crear a tu Blog o a donde prefieras:
<ul id="carousel">
<li><img alt="" height="338" src="images/p1.jpg" width="600" />This is an example of a caption. Captions can easily be styled with your own CSS and can also contain 
<strong><em>HTML</em></strong>.</li>
<li><img alt="" height="338" src="images/p2.jpg" width="600" />Captions can also be set to hide between image transitions. In this example however, captions are set to be visible all the time.<br />

</li>
<li><img alt="" height="338" src="images/p3.jpg" width="600" /></li>
<li><img alt="" height="338" src="images/p4.jpg" width="600" /></li>
<li><img alt="" height="338" src="images/p5.jpg" width="600" /></li>
<li><img alt="" height="338" src="images/p6.jpg" width="600" /></li>
<li><a href="http://www.catchmyfame.com/"><img alt="" height="338" src="http://www.catchmyfame.com/jquery/infinitecarousel3/demo/p7.jpg" width="600" /></a>This image has both a caption and hyperlink. The next four images also also linked (but have no captions).<br />
</li>
<li><a href="http://www.catchmyfame.com/"><img alt="" height="338" src="images/p8.jpg" width="600" /></a></li>
<li><a href="http://www.catchmyfame.com/"><img alt="" height="338" src="images/p9.jpg" width="600" /></a></li>
<li><a href="http://www.catchmyfame.com/"><img alt="" height="338" src="images/p10.jpg" width="600" /></a></li>
</ul>


  • En este código cada <li> contiene el height="338" y width="600" o el alto y ancho que el carrusel y sus imágenes van a tener. Te recomiendo para una perfecta visualización que tanto el carrusel como las imágenes tengan el mismo alto y ancho en píxeles.
  • En <a href="http://www.catchmyfame.com/"> puedes meter el enlace al que desees que el usuario se dirija cuando haga "clic" en la imagen que pasa por el carrusel (puede ser a una entrada o a nada si dejas " ").
  • Algunas tuplas <li> tienen texto dentro (por si quieres que se muestren comentarios): "This is an example of a caption. Captions can easily be styled with your own CSS and can also contain". Cambia el texto y si quieres añadir comentarios a las fotos, escribe lo que desees utilizando el tuyo.
  • En src="images/p1.jpg" meterás el nombre de cada imagen que hayas utilizado para que salga por medio del panel. p1.jpg es el nombre de una de las imágenes de prueba. aquí pondrás los nombres que tú hayas decidido utilizar con tus imágenes.
  • 3.4 En el escritorio, para ir  probando cómo queda hasta el final,  dentro de tu propia carpeta "Sitio" ve haciendo "clic" en tu index.html para ir visualizando cada cambio y cómo queda. Tal cual lo veas en tu disco duro funcionando, así funcionará luego metido dentro de tu Blog.
4) Sube tu carpeta "Sitio" a Drive para luego utilizarla en tu Blog:
 4.1 Conéctate a Drive https://drive.google.com/ y una vez dentro pulsa el botón de la flecha roja que hay a la derecha del botón "crear" en el menú izquierdo. Te he marcado el botón con un recuadro azul en la imagen inferior de Drive:

4.2 Ahora sube la carpeta "Sitio" completa seleccionando el botón de la flecha y pulsando en la opción "Carpeta". Después, ya tendrás disponible tu carrusel al completo en Drive:
  • Cuando subas la carpeta "Sitio" asegúrate que está compartida como Público. Si no la compartes, no se dibujará. Deberás seleccionar "Public" en la sección "Who has access" tal como te muestro en pantalla.

  • Además cópiate el código que te he marcado cuando compartas. Es el código identificativo único que Drive asignará a tu carpeta "Sitio" para que puedas compartirla, lo utilizaremos después en los próximos pasos:
4.3 Ahora prueba tu carpeta "Sitio". Escribe en el navegador el código identificativo que te ha asignado Google Drive al compartir la carpeta. En mi caso es este: https://googledrive.com/host/0Bwgc28XHjPA2Y3ByS1Vnc3lKY0k Recuerda que el código identificarivo debe ir precedido de https://googledrive.com/host/ para que se llame a la
"Index.html" que contiene tu propio carrusel. Si todo está ok, ya estás listo para meter el carrusel en tu Blog.
5) Insertando el código en Blogger en un IFRAME:
  • Puedes insertar el código en Blogger llamando a la "Index.html" metiendo dentro del IFRAME la URL que llama a tu "Sitio" en Drive:
<iframe frameborder="0" height="450" marginheight="0" marginwidth="0" noresize="" scrolling="No" src="https://googledrive.com/host/0Bwgc28XHjPA2Y3ByS1Vnc3lKY0k" width="620"> 
</iframe>

  • En  src=" Debes meter la URL que Drive te asignó al compartir tu carpeta "Sitio".
  • EL height="450" y el width="620", es decir, el ancho y alto del marco que va a servir de "ventana" a tu carrusel debe ser ligeramente mayor que el ancho y alto del propio carrusel. Si pones menos ancho o menos alto, no cabrá el carrusel al completo.
  • Puedes insertar el código del "<iframe" en un Gadget HTML/JAVASCRIPT o directamente dentro de una página.


B) Insertando el código en Blogger para añadir tu carrusel sin IFRAME:
  • En primer lugar realiza una copia de seguridad de tu sitio. Aunque es realmente sencillo lo que vamos a hacer, recomiendo que previamente tengamos a buen recaudo nuestro código original, de manera que siempre podamos "volver atrás" ante cualquier error. No dejes de realizar esta guía paso a paso para salvaguardar tu blog.
  • En Blogger, en el menú de la izquierda, dirígete a la opción "Plantilla" y pulsa "Editar HTML". Localiza la etiqueta "</head" y justo debajo inserta los .js, .css y <script> de JQuery

1) El código que corresponde al HEAD (justo antes del cierre del /HEAD):
<script src="[DIRECCIÓN_DONDE_COPIES_EL_ARCHIVO/http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="[DIRECCIÓN_DONDE_COPIES_EL_ARCHIVO/jquery.infinitecarousel3.min.js"></script>
<script type="text/javascriptsrc="[DIRECCIÓN_DONDE_COPIES_EL_ARCHIVO/easing.js"></script>

<script>
$(function(){
$('#carousel').infiniteCarousel({
imagePath: '[DIRECCIÓN_DONDE_COPIES_IMÁGENES/images/'
});
});
</script>
NOTAS PARA COMPRENDER Y UTILIZAR ESTA PARTE DEL CÓDIGO: 
  • Cada <script> contine la librería .js (Javascript) utilizada de JQUERY. 
  • Observa que en el último <script> hay un  "imagePath:" que será de donde extraes las imágenes para el carrusel. Si por ejemplo creas una carpeta en Drive con las imágenes que se llame "/images/", esa será la URL que deberás poner ahí para que las localice y formatee adecuadamente.
 2) Introduciendo los ESTILOS en la plantilla de tu BLOG antes del cierre del </HEAD>:
Antes del cierre del </head> de tu plantilla busca pulsando CONTROL + F la siguiente cadena <b:skin><![CDATA[. Después localiza donde cierra ]]></b:skin> y justo antes introduce los estilos necesarios para que funcione el carrusel:

html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
body {
background: #cccccc; /* Old browsers */
background: -moz-linear-gradient(top, #cccccc 0%, #888888 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#888888)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cccccc 0%,#888888 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cccccc 0%,#888888 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cccccc 0%,#888888 100%); /* IE10+ */
background: linear-gradient(top, #cccccc 0%,#888888 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#888888',GradientType=0 ); /* IE6-9 */
}
div.infiniteCarousel {
margin: 100px auto 0 auto;
-moz-box-shadow: 0px 0px 10px #333;
-webkit-box-shadow: 0px 0px 10px #333;
box-shadow: 0px 0px 10px #333;
clear:right;
}


3) Introduciendo el carrusel en el diseño de tu PLANTILLA:
Para insetarlo en tu Blog, dentro de Blogger dirígete al menú de la izquierda, a la opción Diseño.


  •  En la página de Diseño pulsa "Añadir gadget" en la zona del Blog donde desees insertar el componente creado con JQuery. 
  • Añade el código fuente que recuperaste de "View Source" desde JQuery. Sólo debes insertar la parte de código que en el "View source" de JQuery se encuentra en el interior del <body>.



    • Copia dentro del gadget HTML/JAVASCRIPT el código que sigue, la primera parte referencia al autor.
    <h4 style="margin:14px 20px 20px 0;float:right;font-family:Arial;color:#666666;font-weight:bold;text-shadow:0 1px 1px #eee;"><a href="http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-infinite-carousel-plugin/" style="text-decoration:none;color:#666">Return to CatchMyFame's Infinite Carousel</a></h4>
    <ul id="carousel"> <li><img width="600" height="338" alt="" src="[DIRECCIÓN_DONDE_COPIES_EL_ARCHIVO/img1_sample" /></li> <li><img width="600" height="338" alt="" src="[DIRECCIÓN_DONDE_COPIES_EL_ARCHIVO/img2_sample" /></li> <li><img width="600" height="338" alt="" src="[DIRECCIÓN_DONDE_COPIES_EL_ARCHIVO/img3_sample" /></li> <li><img width="600" height="338" alt="" src="[DIRECCIÓN_DONDE_COPIES_EL_ARCHIVO/img4_sample" /></li></ul>
    NOTAS PARA COMPRENDER Y UTILIZAR ESTA PARTE DEL CÓDIGO: 
    • La primera parte es la referencia a la web del autor.
    • Cada <li> va a contener la ruta a donde hayas subido la imagen dentro de src="[DIRECCIÓN_DONDE_COPIES_EL_ARCHIVO/NOMBRE_IMAGEN"
    TUS IMÁGENES Y CÓMO AÑADIRLAS:
    • Tus imágenes debe ir siempre en las etiquetas:  
    • El componente es <ul id="carousel"> 
    • Dentro de él cada etiqueta "<img alt" contiene una URL a la imagen que deseas mostrar:
    <img alt="" height="200" src="http://DIRECCIÓN_DONDE_PONGAS_TUS_IMÁGENES/imagen" width="590" />  
    Donde el  src="http://DIRECCIÓN_DONDE_PONGAS_TUS_IMÁGENES":  será la dirección donde tengas la imagen.
    height="200": el alto de la imagen será 200 píxeles.
    width="590": el ancho de la imagen será 590 píxeles.
    NOTAS Y DETALLES DE EDICIÓN:
    • WIDTH y HEIGHT son el ancho y alto de las imágenes a utilizar. Trata de que las imágenes que emplees dentro del carrusel tengan el tamaño que finalmente pongas en el width (ancho) y height (alto) para todo el carrusel y sus imágenes.
    • Todas las imágenes las puedes almacenar en Drive, igual que hemos hecho en el paso 3). Luego bastará con que montes la URL a la imagen una vez la hayas compartido públicamente poniendo  https://googledrive.com/host/ y el código que te sale en la URL para compartir. Por ejemplo: https://googledrive.com/host/0Bwgc28XHjPA2NWxBN016RHlwejg 

    Cualquier duda, dispones de los comentarios para preguntar lo que necesites. 

    Escrito por Miguel García Sánchez - Colomer

    Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para ayudarte y llegar hasta ti.

    20 comentarios:

    1. Hola Miguel! Llevo casi dos horas leyendo, para mi has sido un descubrimiento absolutamente genial. He aprendido un montón de cosas y estoy encantada. Tengo muchas dudas pero he visto que respondes a todos con mucha amabilidad, así que sólo quiero decirte que estoy muy contenta de haberte encontrado!
      Un saludo

      ResponderEliminar
      Respuestas
      1. ¡Y yo encantado de haberte conocido!, para mí es un placer ayudar. Cualquier cosa que necesites, aquí me tienes. Un fuerte abrazo.

        Eliminar
    2. Hola, me ha salido pero ahora no tengo ni idea de como insertar mis imagenes ademas de que va un poco mal. Saludos !

      ResponderEliminar
      Respuestas
      1. Las imágenes van en cada una dentro de la etiqueta img. Verás que aparece <img alt="" y después el height=338 para luego poner la ruta completa a la imagen en donde aparece src=. La imagen la puedes subir a Drive, SkyDrive o a la web que prefieras.

        Intentaré actualizar el tutorial para remarcar la zona de las imágenes.

        Un saludo!.

        Eliminar
    3. Lo que me pasa es que se me queda el fondo de la pag gris, como con algun erros :SS

      ResponderEliminar
      Respuestas
      1. Ok Nerethia!, menos mal que me lo has dicho... dejé puesto un degradado que ponía el color de fondo en gris. Ya está el código actualizado para que te lo puedas copiar y pegar sin el problema del fondo gris.

        Muchas gracias y cuenta qué tal te va... ;)

        Eliminar
    4. Buenas tardes/noches Miguel, antes de nada felicitarte por el tutorial. Estoy teniendo problemas a la hora de intentar abrir enlaces en las imagenes desde blogger. ¿Podría ser debido al iframe o a google drive? He probado poniendo en el .js el target en las etiquetas "a", tanto con la propiedad _blank como _self pero lo único que hace es como intentar abrir la url ppal del blog en el cuadrante donde esta incrustado el iframe.
      Muchas gracias!! y espero tu respuesta

      ResponderEliminar
      Respuestas
      1. Ya he encontrado la solución. He puesto la propiedad _top pues con _self lo abre en el mismo iframe. Con respecto al valor _blank parece que no funciona por temas de seguridad. También sería conveniente poner el atributo sandbox de la etiqueta iframe, con el valor "allow-top-navigation". Un saludo

        Eliminar
      2. ¡Hola!, siento llegar tarde, ayer no ví tu mensaje. Tomo nota de tus indicaciones. Otra cosa que optimiza mucho la utilización de este tipo de artilugios es ponerlos en base64. Al menos el marco, las flechas y de más, luego las imágenes las pones con enlaces en tu Blog (esto es algo que suelen hacer más los profesionales). Así no tiran tanto de Iframe y es más rápido (por si quieres probar). Para base 64 tienes esto: http://www.diariosdelanube.com/2013/06/mejora-la-velocidad-de-tu-blog-iv-que.html

        Un saludo y gracias por tu participación.

        Eliminar
    5. No conocía tu pagina, me gusta y lo miraré luego desde el pc .

      ResponderEliminar
      Respuestas
      1. Encantado Xisco,
        cualquier cosa que necesites aquí estaré. Un saludo y muchas gracias por comentar.

        Eliminar
    6. Intento descargar tu index.html en este enlace https://googledrive.com/host/0Bwgc28XHjPA2RUNzVHg0Tmw3TVU pero lo único que se abre lo que cuentas en el post algo estoy haciendo mal.

      ResponderEliminar
      Respuestas
      1. Hola, cuando te aparezca en el navegador mi página (aunque salga descuadrada) haz "CLIC" derecho con el ratón y selecciona "guardar página" o "guardar como"... depende de cada navegador.

        Voy a añadirlo a la guía porque tienes razón que no lo comento... ;)

        Muchas gracias por tu ayuda y gracias también por participar.

        Eliminar
    7. Estimado... he leido mucho tu ayuda y es bastante clara y precisa... logre tener funcionando mi carrusel sin problemas... pero sigo sin poder lograr que al hacer click en la imagen me abra el link en una nueva pestaña... por favor si me puedieras dar la solucion estaria agradecido...
      Exito en todo

      ResponderEliminar
      Respuestas
      1. Hola,
        un placer ayudar y que te sirva. Para lograr hacer lo que necesitas, fíjate en el código del paso 3.3. En él verás que hay una parte en la que pone (quito los < y > porque si no no se puede dejar el comentario):

        li a href="http://www.catchmyfame.com/" target="_blank" img alt="" height="338" src="images/p8.jpg" width="600" / /a /li

        Donde pone li a href="http://www.catchmyfame.com/" debes poner la URL de la que extraes la imagen, podrías poner igualmente images/p8 y con target="_blank" te lo abrirá en otra ventana.

        Cualquier cosa aquí me tienes.

        Un saludo!!!

        Eliminar
      2. Hola Miguel gracias por tu pronta respuesta...
        mira he agregado el codigo que me indicas.. pero no me resulta... cuando lo pruebo desde el host de google drive (el link solo) me funciona... pero cuando lo agrego al blog no... al hacer click en el carrusel y poner abrir vinculo en una pagina nueva si funciona tambien... pero al clickear solo pasa eso de que se abre en el mismo carrusel la pagina... no se como arreglarlo

        Eliminar
      3. Claro, disculpa, error mío. Es que hemos metido el carrusel en un iframe para que fuera manejable desde el Blog. Al etsar en el iframe no abre las imágenes fuera. Una opción serí acargarlo directamente sin iframe, esa es la segunda parte de la guía. Desde donde pone "B) Insertando el código en Blogger para añadir tu carrusel sin IFRAME".

        Un saludo!

        Eliminar
      4. Ok gracias... lo verificare y te respondo.
        Exito!

        Eliminar
      5. Muy bien, ¡suerte!. Un saludo y gracias por participar.

        Eliminar
      6. Gracias a ti! Excelente sitio!

        Eliminar

     

    © 2014 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.