Carrusel (Slide) de fotos en Blogger

En los últimos tiempos se están poniendo de moda las plantillas tipo "magazine" para Blogger; en esas plantillas suele haber un carrusel o "slide" de fotos que gráficamente queda muy bien.

Demo

Me han preguntado como ponerlo en un blog. Vamos a ver como hacerlo.

Primero antes de ]]></b:skin> pegar:


#myslides{background:#2c3133;}
.stepcarousel{position: relative; /*no tocar*/
overflow: scroll; /*no tocar*/
width: 950px; /*Anchura total del carrusel*/
height: 165px; /*Altura total del carrusel */
margin: 0px 14px 5px 14px;
background:#2c3133;
}
.stepcarousel .belt{
position: absolute; /*no tocar*/
left: 0;top: 0;
}
.stepcarousel .panel{ 
float: left; /*no tocar*/
overflow: hidden; /*no tocar*/
margin: 10px 17px ; /*margen de cada foto*/
width:220px; /*Anchura de cada foto*/
background:#202325;
height:140px;
border:1px solid #393f42;
}
.stepcarousel .panel p{
text-align: left; /*no tocar*/
overflow: hidden; /*no tocar*/
margin: 5px 5px ; /*margen de cada foto*/
}
.stepcarousel .panel h2{
text-align: left; /*no tocar*/
height:20px;overflow: hidden; /*no tocar*/
margin: 2px 5px ; /*margen de cada foto*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*no tocar*/
background:#040404; /*fondo de la imagen*/
margin: 10px 10px 10px 10px; /*margen de cada foto*/
padding:0px 0px;
}
Aquí deberiamos modificar ancho, alto, background, etc. para adaptarlo graficamente a nuestro blog.

Segundo, antes de </head> pegar:

<script src='URL TU ALOJAMIENTO DE jquery.js' type='text/javascript'/>
<script src='URL TU ALOJAMIENTO DE slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--sfHover = function() {var sfEls = document.getElementById("menu").getElementsByTagName("LI");var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=" sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" sfhover\\b"), "");}}}if (window.attachEvent) window.attachEvent("onload", sfHover);//--><!]]></script>

Los ficheros .js se pueden descargar aquí.

Tercero, poner lo siguiente donde queramos poner el Carrusel (normalmente estará bien antes de <div id='content-wrapper'>) :

<!-- Casing -->
<div id='casing'>
<!-- Myslides -->
<div id='myslides'>
<script type='text/javascript'>
stepcarousel.setup({galleryid: &#39;mygallery&#39;, //id of carousel DIVbeltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVspanelclass: &#39;panel&#39;, //class of panel DIVs each holding contentpanelbehavior: {speed:500, wraparound:true, persist:true},defaultbuttons: {enable: true, moveby: 2, leftnav: [&#39;http://web2feel.com/images/rem1.jpg&#39;, -14, 60], rightnav: [&#39;http://web2feel.com/images/rem2.jpg&#39;, 0, 60]},statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panelscontenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]})</script><div class='stepcarousel' id='mygallery'><div class='belt'><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div></div></div></div></div>

Cambiar YOUR-POST-LINK por la dirección url (enlace) que queramos que se dirija cuando se pinche en la foto.

Cambiar YOUR-POST-TITLE por el título que queramos que salga cuando se pase el ratón por encima.

Cambiar URL_IMAGEN por la dirección de vuestra foto.

Parece más dificil de lo que realmente es. :)

20 comentarios:

Anónimo

Jejeje me suena este truco jeje...
Si quieren ver un ejemplo lo tngo en mi web que seguramente saldrá en mi nick.
Jesco me ayudo a hacerlo.
Gracias. Es uno de los mejores blogs que e visto.

jesgo

Gracias Kript por la publi, la verdad es que con la crisis no me queda un pavo para el departamento de publicidad jajaja :P

Antony

Muy bueno tu blog... Me ha gustado mucho... Saludos!

Kooki_Monster XD!!
Este comentario ha sido eliminado por un administrador del blog.
jesgo
Este comentario ha sido eliminado por el autor.
*ADMINISTRADOR*

hola que tal se podria dejar con moviento este tipo de carrusel. ?????

jesgo

*kris*:
Tendrías que modificar el fichero slider.js original.
Saludos.

Llusan

:) ojala haya un slider vertical :P

jesgo

Seguro que lo hay, habrá que investigar... ;)

Anónimo

hola jesgo...
hace tiempo que vengo buscando esto, y gracias a ti puedo tenerlo en mi blog, solo que al intentar descargar los ficheros.js, no me deja...
¿pasa algo? ¿se quitaron por algo?
por favos si puedes ayudarme, me mandas donde puedo descargarlos, te lo agradeceria mucho...
Muchas gracias anticipadas y sigue asi... ayudandonos a los que somos unos negados en esto como yo...
Un saludo.

jesgo

Anónimo, el enlace estaba roto. Ya lo pasé a otro servidor. Pruébalo.

nudians

he implementado el carrusel en mi blog San Isidro Flows y los slides no se muestran, que me recomiendas.

jesgo

Te recomiendo que pongas las url's de las imagenes que quieres mostrar.

Nudians Music

me refiero a las imagenes de las esquina que dan el efecto del carrucel estas no se muestran y en lugar de eso aparecen las barras desplazadoras. ya las descargue y las subi a mi hosting, pero de todas maneras no aparecen solo aparece el espacio vacio esta sombreado en gris. no se a que se pueda deber.

jesgo

Las barras se producen cuando se excede el tamaño del area donde van las imagenes, hay que variar el width y el high, pero ya veo que lo solucionaste. Saludos.

KidAzul

amigo me sale como lo que comentaba nudians no puedo solucionarlo me podrias ayudar
kidazul_24@hotmail.com

jesgo

Creo que siguiendo las indicaciones que le dí a él no tendrás ningun problema. Saludos.

Cjrus

De verdad gracias!!! me gusto mucho y le hice unos cambios pequeños :)
en la tercera parte que tienes sustituyan este ▬► http://web2feel.com/images/rem1.jpg por este ▬► http://s3.tinypic.com/9sw5ys_th.jpg y
este ▬► http://web2feel.com/images/rem2.jpg por este ▬► http://s3.tinypic.com/s60voo_th.jpg y asi las flechas de los extremos seran de fondo transparente y no negro... bueno lo dejo por si alguien lo quiere..

» Escribe tu comentario aquí:


Si quieres hacer alguna consulta sobre tu blog habilita tu perfil o deja un enlace a tu blog:
<a href="url-de-la-página">Texto enlace</a>

» O utiliza el antiguo formulario


Los comentarios están siendo moderados y publicados lo antes posible.



jesgo23 ©2008/2009 | Plantilla Blogger | Diseño jesgo Creative Commons License