Maravillas con JQuery, panel de imágenes con efectos de transición para Blogger: jQuery www.Catchmyfame.com Gallery Panel

Un buen grupo de imágenes de cabecera, combinándose entre sí con múltiples efectos de transición puede proporcionar a tu Blog un estilo mucho más moderno y actualizado que la cabecera estándar que todo Blogger utiliza para su título.

Puedes crear un carrusel de animación de imágenes con el título de tu Blog o simplemente como muestra fotográfica, donde cada imagen 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.

Ahora puedes renovar tu Blog con buenas páginas de bienvenida, resúmenes de "entradas recomendadas", exposición de fotografías, de platos y postres, de viajes... las posibilidades son numerosas y realmente interesantes pues realzarán el estilo visual de tus contenidos. Aprende cómo integrar un panel de imágenes en tu Blog y disfrutar de sus ventajas.

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 "Panel Gallery" para enseñarte cómo añadirlo a tu Blog y aprender a utilizarlo para lo que necesites.

Paso a paso, añadiendo Infinite Carousel a tu Blog de Blogger en un IFRAME:

1)Conéctate awww.catchmyfame.com, entrarás en la página para descargarte el plugin de ejemplo.

2)Haz "clic" en el texto verde del enlace "jquery.panelgallery-2.0.min.js". Se te descargará un .zip que se llamajquery.panelgallery-2.0.min.zip:

Descomprime el .zip para visualizar el contenido de los archivos necesarios para manejar el carrusel:
jquery.panelgallery-2.0.min.js: que es el .js que contiene el código JavaScript minimizado y optimizado para una óptima descarga.

3)Una vez descomprimida la información súbela a Drive, vamos acrear un Iframe o cuadro interactivo donde colocaremos todos los elementos del carrusel:

3.1Móntate en tu disco duro una carpeta que contenga todo lo que necesitamos para crear nuestro carrusel:
En tu escritorio créate la carpeta "Sitio2"

Dentro de la carpeta "Sitio2" crea una carpeta "js" y otra "images".

En la carpeta "js" mete el archivo 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/0Bwgc28XHjPA2dWRDeDhSek44ZUU/jquery-1.4.2.min.js
https://googledrive.com/host/0Bwgc28XHjPA2dWRDeDhSek44ZUU/jquery.panelgallery-2.0.0.min.js

Si los descargas de Drive por el navegador, copia y pega el código completo que hay en ellos y lo guardas conel mismo nombredel .js que hayas descargado.

3.2En 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/0Bwgc28XHjPA2dlYtSEd0dHdXWVU

Aquí debes meter las imágenes que quieres utilizar en el panel galería.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.3Por último crearás unaindex.htmlque 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/0Bwgc28XHjPA2WkZiaWF3SUh3RkU/index.htmlDescarga mi index.html para crearte la tuya propia.
Ahora localiza dentro de mi index.html descargada la siguiente línea:

div id="gal2"

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:

div id="gal2"
img alt="" height="200" src="images/calm1.jpg" width="590" /img alt="" height="200" src="images/calm3.jpg" width="590" /img alt="" height="200" src="images/calm4.jpg" width="590" /img alt="" height="200" src="images/calm5.jpg" width="590" /img alt="" height="200" src="images/calm6.jpg" width="590" /img alt="" height="200" src="images/calm7.jpg" width="590" /img alt="" height="200" src="images/calm8.jpg" width="590" /img alt="" height="200" src="images/calm9.jpg" width="590" /img alt="" height="200" src="images/calm11.jpg" width="590" /img alt="" height="200" src="images/calm12.jpg" width="590" /

/div

En este código cadaimgcontiene elheight="200"ywidth="590"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.
Ena 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 " ").
Ensrc="images/calm12.jpg"meterás el nombre de cada imagen que hayas utilizado para que salga por medio del panel.calm12.jpges el nombre de una de las imágens de prueba. aquí pondrás los nombres que tú hayas decidido utilizar con tus imágenes.

3.4En el escritorio, para ir probando cómo queda hasta el final, dentro de tu propia carpeta "Sitio2"ve haciendo "clic" en tuindex.htmlpara 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 "Sitio2" a Drive para luego utilizarla en tu Blog:

4.1Conéctate a Drivehttps://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.2Ahora sube la carpeta"Sitio2"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"Sitio2"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 "Sitio2"para que puedas compartirla, lo utilizaremos después en los próximos pasos:

4.3Ahora pruebatu carpeta"Sitio2".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/0Bwgc28XHjPA2WkZiaWF3SUh3RkU.Recuerda que el código identificarivo debe ir precedido dehttps://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 align="left" frameborder="0" height="250" marginheight="0" marginwidth="0" noresize="" scrolling="No" src="https://googledrive.com/host/0Bwgc28XHjPA2WkZiaWF3SUh3RkU" width="600"
/iframe

Ensrc="Debes meter la URL que Drive te asignó al compartir tu carpeta"Sitio2".
ELheight="250"y elwidth="600",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 lugarrealiza una copia de seguridadde 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 parasalvaguardar 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 alHEAD(justo antes del cierre del /HEAD):

script src="js/jquery-1.4.2.min.js" type="text/javascript"/script
script src="js/jquery.panelgallery-2.0.0.min.js" type="text/javascript"/script

NOTAS PARA COMPRENDER Y UTILIZAR ESTA PARTE DEL CÓDIGO:

Cada script contine la librería .js (Javascript) utilizada de JQUERY.

2)Introduciendo losESTILOSen 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:

script type="text/javascript"$(function(){$('#gal1').panelGallery({boxFadeDuration:1000,boxTransitionDuration:100,FX: new Array('jackpot','boxSouthEast','fade','boxRandom')});$('#gal2').panelGallery({viewDuration: 1500,transitionDuration: 500,boxSize: 40,boxFadeDuration: 500,boxTransitionDuration: 50});});/scriptstyle type="text/css"
#gal1, #gal2 {margin: 50px 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;}/style

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

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="color: #666666; float: right; font-family: Arial; font-weight: bold; margin: 14px 20px 20px 0; text-shadow: 0 1px 1px #eee;"
a href="http://www.catchmyfame.com/2010/09/13/jquery-panel-gallery-2-0-released/" style="color: #666666; text-decoration: none;"Return to CatchMyFame's Panel Gallery/a/h4
div id="gal2"
img alt="" height="200" src="images/calm1.jpg" width="590" /
img alt="" height="200" src="images/calm3.jpg" width="590" /
img alt="" height="200" src="images/calm4.jpg" width="590" /
img alt="" height="200" src="images/calm5.jpg" width="590" /
img alt="" height="200" src="images/calm6.jpg" width="590" /
img alt="" height="200" src="images/calm7.jpg" width="590" /
img alt="" height="200" src="images/calm8.jpg" width="590" /
img alt="" height="200" src="images/calm9.jpg" width="590" /
img alt="" height="200" src="images/calm11.jpg" width="590" /
img alt="" height="200" src="images/calm12.jpg" width="590" /
/div

NOTAS PARA COMPRENDER Y UTILIZAR ESTA PARTE DEL CÓDIGO:

La primera parte es la referencia a la web del autor.
Cadaliva a contener la ruta a donde hayas subido la imagen dentro desrc="[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 esdiv id="gal2"

Dentro de él cada etiqueta "img alt" contiene una URL a la imagen que deseas mostrar:

img alt="" height="250"src="http://DIRECCIÓN_DONDE_PONGAS_TUS_IMÁGENES/imagen"width="600" /

Donde elsrc="http://DIRECCIÓN_DONDE_PONGAS_TUS_IMÁGENES": será la dirección donde tengas la imagen.

height="250":el alto de la imagen será 250 píxeles.

width="590":el ancho de la imagen será 600 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 poniendohttps://googledrive.com/host/y el código que te sale en la URL para compartir. Por ejemplo:https://googledrive.com/host/0Bwgc28XHjPA2dlYtSEd0dHdXWVU/calm1.jpg