Orbit: Slider de imágenes con jQuery

25 de octubre de 2010 1015 comentarios ,
Aunque S3Slider es un slideshow que funciona muy bien y ha tenido buena aceptación, son muchos quienes desean que este gadget cuente con flechas de desplazamiento para poder navegar por las imágenes de forma más inmediata.
Un slideshow que permite hacer eso es Orbit, que funciona a base de jQuery y muestra las imágenes con flechas de navegación. Pero además, en la parte superior izquierda indica cuál es la imagen que se está viendo, y del lado superior derecho un control de pausa e indicador del tiempo entre cada foto.


Una de las ventajas que me gusta de este slider es que el script cuenta con una versión corta, por lo que podremos colocar el script directo en la plantilla y así nos evitaremos colgarnos de un hosting.

Para empezar vamos a colocar los scripts que son lo que harán que funcione, así que vamos a Diseño | Edición de HTML y antes de </head> pegamos lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->

<script type='text/javascript'>
$(window).load(function() {
$(&#39;#featured&#39;).orbit({
advanceSpeed: 5000,
&#39;bullets&#39;: true,
&#39;timer&#39; : true,
&#39;animation&#39; : &#39;horizontal-slide&#39;
});
});
</script>

<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>
Ahora es turno de los estilos, así que antes de ]]></b:skin> pegamos esto:
/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}

div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}

div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}

span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhPl2pVcI/AAAAAAAAAas/O7A5Aa7ZMhs/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}

span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}

span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TMHhQItQqeI/AAAAAAAAAaw/afLXhP0yQI8/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}

span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPCHG1JI/AAAAAAAAAak/EiGTzJCfL1c/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}

div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }

div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}

div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }

div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}

div.slider-nav span.right {
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPefIDjI/AAAAAAAAAao/Gyy0k0F5Hzw/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhNd07EPI/AAAAAAAAAaY/_k9SqP88gV8/s1600/left-arrow.png);
left: 10px;
}

.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}

.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhLtWyUXI/AAAAAAAAAaU/8MQ8LP5flS8/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}

.orbit-bullets li.active { color: #222; background-position: -7px 0; }
Ya por último usaremos el código que mostrará las imágenes, así que en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript pegamos este código:
<div id='featured'>

<a href='URL del enlace'><img rel='foto1' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius augue sit amet magna condimentum dictum.</span>

<a href="URL del enlace"><img rel='foto2' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto2'>Este es un ejemplo de la descripción con enlaces: <a href='URL del enlace' style='color: #fff';'>Ciudad Blogger</a></span>

<a href="URL del enlace"><img rel='foto3' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto3' style='text-align:center;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius augue sit amet magna condimentum dictum.</span>

<a href='URL del enlace'><img rel='foto4' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto4'>Este es un ejemplo de la descripción con enlaces: <a href='URL del enlace' style='color: #fff';'>Ciudad Blogger</a></span>

</div>
Esta última parte es la que contiene las imágenes, los enlaces y los textos descriptivos de cada imagen.
Lo que está en color rojo son las URLs de los enlaces y de las imágenes.

Dentro de cada código de imagen están especificadas las medidas que tendrá cada imagen, pero puedes modificar esos tamaños a tu gusto, eso se hace en width (ancho) y height (alto), recuerda que todas las fotos deben tener el mismo tamaño especificado.

Lo que está en color verde es el texto descriptivo de cada imagen.
Pero atención, no basta con poner el texto descriptivo para que éste aparezca, sino que, cada descripción tiene un identificador (id), éste identificador debe ser único. Para que el texto descriptivo aparezca deberá ponerse dentro del código de la imagen el atributo rel + el nombre del identificador.
Por ejemplo, en el texto descriptivo de la primera imagen aparece su id que es, id="foto1" y dentro del código de la imagen aparece el atributo rel con el nombre del id, o sea, rel="foto1"

Como ves no es nada complicado, sólo hay que ponerle un poco de atención a las descripciones de las imágenes, pero fuera de eso será un slider sencillo de utilizar.
Y bueno, aunque está probado en todos los navegadores y en Internet Explorer funciona, el control de pausa no se muestra en ese navegador por los fallos que tiene, de igual modo es posible que el desplazamiento entre cada imagen no se vea con un efecto tan suave como se vería con otro navegador de mayor calidad como Mozilla Firefox o Chrome.

ACTUALIZACIÓN: En el primer código, en la línea azul advanceSpeed: 5000, se puede modificar la velocidad de las transiciones entre cada imagen, un número más alto hará que las imágenes tarden más tiempo entre cada transición.

Si lo prefieres puedes descargar el script y subirlo a un alojamiento en caso de que no quieras tenerlo directo en tu plantilla.

Enlace | Descargar script


1.015 comentarios en:

" Orbit: Slider de imágenes con jQuery "

  1. Soy la 1° jijijiji
    Está Genial! De verdad me gusta mucho, es más estilizado y "profesional" que los slider que se pueden hacer con Slide.com (aunque la FunPix me gusta mucho ^^)
    Gracias por traer siempre algo Nuevo!
    Besitos ♥

    ResponderEliminar
  2. Oh, me olvidaba.
    Quería saber si me podrías decir, si en laguna entrada que hallas hecho está el modo de poner esto.
    http://i55.tinypic.com/1z3w6f8.jpg
    Es que quiero ponerlo en un viejo y un nuevo Blog....
    pero tengo la duda si en el viejo va a contar a partir desde que lo "instale" o "recolectará la información" del blog contando desde la fecha de la 1° publicación, lo mismo que con la cantidad de las entradas y todos los review.
    Sé que soy una pesada, pero quiero mejorar mis Blogs ^^
    Besitos ♥

    ResponderEliminar
  3. En esta entrada se explica cómo poner ese gadget.
    La información la recolectará desde el feed así que no importa si lo pones hoy o mañana, tomará los datos que ya existan.
    Y no eres nada pesada, por el contrario, siempre es un gusto leerte por aquí ;)

    ¡Besos!

    ResponderEliminar
  4. wooo, esta la raja.... Saludos y mil gracias

    ResponderEliminar
  5. gracias potro, debemos pedir que IE se jubile!!!!!

    ResponderEliminar
  6. Gracias por este slider Potro, es justo lo que andaba buscando y te pedía en otro post.

    Sólo tengo una duda, ¿el código te permite poner más de 4 fotos o es el máximo?

    ResponderEliminar
  7. Ola :D quisiera que me ayudaras en algo que no tiene nada que ver con el tema de este post, pero quisiera que me ayudaras a decirme como hago para ponerle texto a un banner en alta calidad, esque tengo mi sitio que es este http://bit.ly/a24d57 pero la imagen del header se ve muy mal :( no me gusta y he pasado dias enteros investigando como hacer para que mi header se vea en buena calidad y no en mala calidad como la que se ve ahorita en mi blog. Te agradeceria mil veces si me ayudas potro!

    Y buen post, este slide tambien lo ponre en mi blog, me encanta eres un genio :D

    att Ulisses

    ResponderEliminar
  8. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  9. No se puede configurar el tamaño del Slider?

    ResponderEliminar
  10. MCarlitooH2, esa de la raja no me la sabía, la agregaré al diccionario chileno :D

    nEjO, dime dónde firmo la solicitud, porque ¡urge!

    Make-up by Maryland, no, puedes agregar las imágenes que desees, no hay problema por eso ;)

    ulises, el tamaño que tendrá será el que tengan tus imágenes, ahí se menciona cómo cambiar este tamaño de las imágenes.

    ResponderEliminar
  11. Ya me contesto yo sola, he añadido el Slider en mi blog y de momento he añadido 5 imagenes, además he quitado el contador de tiempo y los puntitos que me incordiaban.

    Gracias una vez más por este gadget, es lo que andaba buscando desde hace mucho tiempo.

    ResponderEliminar
  12. Es un kilómetro de códigos, pero vale la pena.
    Es muy visual.
    GRacias por compartirlo.

    ResponderEliminar
  13. Muy bueno
    la plantilla que he colocado para Curiosidades del Mundo esta muy bien, pero me causo problemas mientras la instale
    por que no queria jalar hasta que encontre como

    ResponderEliminar
  14. Oh eres un Divino!
    Muchísimas Gracias por responder SIEMPRE!
    Besitos ♥

    ResponderEliminar
  15. Adrián J. Messina, pues también está la opción de usar los scripts alojándolos en un hosting pero sería más lento para el blog.

    AlexG, estrenando plantilla ¡eh! Te ha quedado muy bien :)

    ResponderEliminar
  16. ¡Hola Potro, que tal!
    De nuevo estoy por aquí. Ya veo que no paras.
    Este es un truco estupendo, creo que lo voy a poner.
    Una preguntilla... ¿Se puede modificar la velocidad con que cambian las imágenes.
    Venga hasta otra.
    Un cordial saludo.

    ResponderEliminar
  17. potro quisiera saber como se hace para poner una imagen de entrada en tu blog osea que cuando entren en tu blog aparesca una imagen como de bienbenida y vos la apretas y te mande a tu blog

    desde ya GRAXX

    ResponderEliminar
  18. Yo de Nuevo... =(
    Un Problema Grande y aunque me digas que No, Blogger me ODIA! Lo que te pregunté en el Comentario 2 (soy yo obviamente) sólo me registra los días de vida....
    Yo tengo un Gadget de los Últimos Comentarios... Eso puedo interferir con este Nuevo Gadget?
    Porque la verdad, que mala onda Blogger que no me deja hacer esto... ¬¬
    Besitos ♥

    ResponderEliminar
  19. duque71, claro, en el primer código he agregado una línea en color azul, agrégasela a tu código, es ahí donde puedes controlar la velocidad de las imágenes, con un número más alto tardarán más las imágenes.

    somos todos menos algunos, no tengo una entrada sobre ese tema, en Oloblogger tienen una entrada sobre ello:
    http://oloblogger.blogspot.com/2010/02/otra-pantalla-de-presentacion-facil.html

    Miss Darcy, es posible que sí haya otro script que esté interfiriendo con este, pues acabo de probar el código que tienes y ha funcionado sin ningún problema :\

    ResponderEliminar
  20. No es mi primera visita en ciudad blogger, pero si mi primer comentario, asi que me gustaria saber si el scrip se pone como siempre....

    haciendo un llamado en el html?

    ResponderEliminar
  21. ey otra cosita potro como pusiste ese gadget del slider dentro de una entrada

    ResponderEliminar
  22. Potro espectacular!!! Sin palabras!!! Muy pero muy bueno...

    Muchas gracias ya lo tengo funcionando en un nuevo proyecto.

    Abrazo

    ResponderEliminar
  23. Hola Sergio Molina,

    Bienvenido pues a los comentarios :D
    Si decides alojar el script en un hosting entonces el código sería como siempre:

    <script src='URL del script' type='text/javascript' />

    El ejemplo que he puesto es un iframe, no he probado cómo queda el gadget dentro de una entrada, supongo que igual debe funcionar aunque es posible que pueda no verse tan bien por aquello de los estilos de las entradas.

    ResponderEliminar
  24. Hola Francisco,

    Igual a mí me ha gustado mucho, me parece más atractivo que los otros que hemos visto.
    Seguro te ha quedado muy bien en el blog :)

    Abrazos.

    ResponderEliminar
  25. Si de una, es mas llamativo!! Realmente queda muy bien, y a mi me quedó muy bien, cdo termine la página te aviso así te das una vuelta!

    Abrazo

    ResponderEliminar
  26. oh oh muuuuchas gracias potro llevaba tiempo buscando uno asi lo vi en muchas paginas de ayuda pro no m convencieron gracias esta genial

    ResponderEliminar
  27. gracias potro ya lo puse en el blog espero que lo veas gracias por la informacion.

    PS: leo tus tutoriales a diarios son Geniales!!

    :)

    ResponderEliminar
  28. Potro y entonces para cada entrada que hago acumular elementos con las fotos¡¡

    ResponderEliminar
  29. Michelle Jacqueline, qué bueno que ha sido de tu agrado :)

    Sergio Molina, te ha quedado muy bien, y gracias por leerme!

    Javier, no he entendido :(

    ResponderEliminar
  30. Buenas de nuevo, veras, al colocar el Slider se me ha anulado el efecto deslizante de las flechas "Ir arriba" e "Ir abajo" y al entrar en el blog se ven las 4 imágenes primero a lo largo, y cuando termina de cargar se pliegan en el slider, ¿esos es normal?

    Oye perdona si te molesto mucho, soy un poco tope.Sorry
    Chao
    No tardaré mucho en volver si no te importa.

    ResponderEliminar
  31. Lo que sucede es que este slider trabaja con jQuery y esa librería de scripts es incompatible con Scriptaculous y Prototype que son las que se usan para el efecto deslizante.

    ResponderEliminar
  32. Relamente este Slider me encanta no necesitas cambiar el tamaño de las imagenes; muchas gracias Potro

    ResponderEliminar
  33. Hola Potro por favor puedes ayudarme, no entiendo nada sbre esto..

    GRACIAS AMIGO

    ResponderEliminar
  34. http://innerfade.blogspot.com/2010/10/orbit-slider-de-imagenes-con-jquery.html

    No me sale ??

    ResponderEliminar
  35. ¿Exactamente qué no te sale? ¿en cuál blog?

    ResponderEliminar
  36. Hola El Potro.

    Quería agradecerle primero el haber creado esta sensacional página de ayuda, pues para gente como yo que recien empieza con los blogs es de inmensa ayuda, y segundo agradecerle que nos traiga este buen slider.

    Sólo tengo una pequeña duda, ya he instalado el slider correctamente en el blog siguiendo al milímetro sus pasos, pero comparando el que acabo de instalar con el ejemplo de esta entrada me he dado cuenta de que en el ejemplo aparecen cuatro puntos y en el mio son ocho cuatro de azules y cuatro de negros, me refiero a los puntitos que marcan las entradas. Me gustaría saber si lo he instalado bien o por el contrário está mal, si entrara en mi blog lo podría ver mejor a que me refiero, espero haberme explicado bien, perdón por el párrafo tan largo y por la ignorancia y muchas gracias.

    ResponderEliminar
  37. Potro@ Antes que nada felicitarte por el post. Hacía muchísimo que buscaba un slide que pudiera alojar en mi código y retocar a mi antojo, este me ha encantado.

    Eso sí tengo un problemilla que no se si es cuestión de el propio slide o de los hacks anteriores de mi plantilla.

    El caso es que al abrir mi blog se ven todas las imágenes del slide una a continuación de la otra y casi al instante adoptan su aspecto "normal" (superpuestas), pero me gustaría saber si puede corregirse. ¿Tienes alguna idea de que podría ser? Te dejo el enlace por si tuvieras tiempo de echarle un vistazo al problema:

    http://anothergames.blogspot.com/

    Gracias por ayudarme a costruir un buen blog.

    ResponderEliminar
  38. Bernardo Elías, parece que es por un conflicto con los estilos de la sidebar de tu plantilla. Si arrastras el gadget arriba de las entradas del blog verás que no tendrás ese problema. Gracias por tus amables comentarios :)

    Ark, es por el tiempo que tarda en cargar tu blog. Puedes poner el primer código después de <head> para que se lea más rápido. Saludos y gracias a ti por tu visita!

    ResponderEliminar
  39. Que velocidad en contestar....

    Pues dicho y hecho, he subido el codigo por encima de head y si bien no soluciona el problema, hace que tarde menos tiempo.

    Me ha gustado mucho este slide y creeme que hace tiempo que buscaba uno. Ahora ya solo tengo que tunearlo para que haga juego con el resto de la página.

    No te lo digo por darte coba, yo me he esforzado mucho en el diseño del blog, pero sin ayuda no haría nada de nada.

    GRACIAS.

    ResponderEliminar
  40. Hola de nuevo El Potro, pues aunque tenga ese conflicto no es perjudicial para el blog si lo dejo en la sidebar ¿no? ¿es mejor si los elimino? y si los elimino ¿como puedo hacerlo? perdón por liarle tanto.

    ResponderEliminar
  41. Pues si deseas que no aparezca busca este código y elmina lo que está en negrita:


    .orbit-bullets li {
    float: left;
    margin-left: 5px;
    cursor: pointer;
    color: #999;
    text-indent: -9999px;
    background-image: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhLtWyUXI/AAAAAAAAAaU/8MQ8LP5flS8/s1600/bullets.png);
    background-repeat: no-repeat;
    background-position: 0 0;


    Saludos.

    ResponderEliminar
  42. Ark, estoy seguro que te quedará muy bien ;)

    ResponderEliminar
  43. Me ha ido estupendamente, infinitas gracias El Potro. Sin abusar más de tú conocimiento si me permites que te tutee, me gustaría saber si puedo poner dos Sider más en el mismo blog, pués tengo vários blogs más y me gustaría poner en estos Slides imágenes que den enlace a sus rspectivas entradas. Gracias por tu paciencia para conmigo y por tu gran ayuda.

    Un saludo.

    ResponderEliminar
  44. Y pensar que tuve que "dar vuelta a la red" para conseguir una plantilla con Slider como la de Cyber jajajajajaja... Está fantástico Bro... ademas ese "contador" (punto azul) que muestra en que imagen se encuentra y ese "reloj" de arriba a la izquierda, le dan dan un aspecto muy profesional.

    Que raro que en el mejor navegador del mundo no funcione bien... es raro... debe ser la primera vez que lo escucho XD

    un abrazo!!

    Un abrazo!!!

    ResponderEliminar
  45. Bernardo Elías, de ser posible, es posible, pero es un poco trabajoso ya que tienes que cambiarle el nombre de todos los contenedores :\

    bro, yo estoy más más sorprendido aun, es casi casi un shock para mí que IE no funcione bien XD

    ResponderEliminar
  46. Sos grande!!! :) Lo he puesto en mi página web. Gracias a ti estoy haciendo cada día mejor mi blog! Deberías merecerte el nobel jeje.

    Una pregunta; he puesto el slide en lugar de la cabecera...¿Cómo puedo hacer para centrarlo? Me gustaría probar y que el gadget saliera centrado y no a la izquierda...se puede hacer? Gracias!

    ResponderEliminar
  47. GRACIAS...AL FIN LO ENCONTRÉ...LOS INVITO A VISITAR MI BLOG... www.culturaysociedad.tk

    ResponderEliminar
  48. Jaime Saga, trata encerrándolo entre <center> y </center>
    A ver para cuando sacan un nobel en la categoría Blogger :P

    ResponderEliminar
  49. Hola El Potro.

    Uff, pues si que se ve bien complicado, la verdad que me gustaría poner algo parecido que me hiciese esa función que te comentaba ¿sabes de algo parecido a un slide que me haga una función parecida? si no ya si que me conformaría, gracias por todo.

    Un abrazo.

    ResponderEliminar
  50. Antes que nada y sin importar si me vas a responder la pregunta o no, quiero felicitarte por la gran ayuda que nos das a los que no sabemos mucho de esto. Leo diariamente tus posts ya que esta en mi lector de feeds.

    Segui al pie de la letra el tutorial y no me funciono. Lei los comentarios y a todos les ha ido bien.

    Subi el codigo en mi blog, en la URL http://www.fabiansigona.com/2008/11/lorem-ipsum-dolor-sit-amet-consectetur.html y no me anda. Tengo el nuevo formato de templates de blogger.

    El tuto lo segui al pie de la letra, igualmente te dejo los codigos que puse (pongo los tags con espacios porque sino no me deja publicar el comentario):
    [*] Antes de ]]>: http://pastebin.com/KvmMfjZf
    [*] Antes de : http://pastebin.com/iFhiD9TV
    [*] Codigo en la entrada: http://pastebin.com/fjhtNBeH

    Desde ya muchas gracias por tomarte el tiempo de leer mi inquietud!

    ResponderEliminar
  51. Hola Bernardo Elías,

    Ya con un poco más de tiempo pude ver a detalle cómo podrías tener otro slider en el mismo blog sin tener que hacer muchos cambios.

    Sólo busca esta parte del código:

    <script type='text/javascript'>
    $(window).load(function() {
    $(&#39;#featured&#39;).orbit({
    &#39;bullets&#39;: true,
    &#39;timer&#39; : true,
    &#39;animation&#39; : &#39;horizontal-slide&#39;
    });
    });
    </script>

    Y debajo agrega esto:
    <script type='text/javascript'>
    $(window).load(function() {
    $(&#39;#featured2&#39;).orbit({
    &#39;bullets&#39;: true,
    &#39;timer&#39; : true,
    &#39;animation&#39; : &#39;horizontal-slide&#39;
    });
    });
    </script>

    Ahora en el último código que es donde van las imágenes, en lugar de poner esta primera línea:
    <div id='featured'>

    Pondrás esta otra en el segundo slider que quieres:
    <div id='featured2'>

    Con eso podrás tener dos sliders distintos en el mismo blog.
    Saludos.

    ResponderEliminar
  52. Hola pcastagnaro,

    Posiblemente es porque tienes otra versión de jQuery dentro de la misma plantilla, sino me equivoco es para un menú que quisiste instalar.

    Dicho script y que debes eliminar es el siguiente:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>

    Prueba eliminarlo y ver si con eso funciona.
    Saludos y gracias por tus comentarios.

    ResponderEliminar
  53. hola a todos por favor les agradeceria mucho su ayuda, a mi no me nada el slider. intente de todo ya no se que hacer cuando pongo el gadget me aparecen las imagenes pero no estan en slider ni ningun efecto. nose por que por favor ayudenme. este es mi blog http://disneydownload-hd.blogspot.com/

    ResponderEliminar
  54. a otra cosa no soy especialista en codigos y quiero saber cuando dice antes es debajo o arriva de? sorry mi ingnorancia. a y otra cosa tengo que expandir los artilugios? gracias espero su pronta respuestas

    ResponderEliminar
  55. No es necesario expandir artilugios. Veo que tienes puestos los dos primeros códigos pero no veo el último; necesitaría que lo tengas todo puesto para ver cuál podría ser el problema.

    ResponderEliminar
  56. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  57. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  58. Hola El Potro, sólo decir tres palabras maestro de maestros. He eliminado dos comentarios porque instalando los slides he tenido una serie de problemillas y te pedía un poco de ayuda en ellos, uno de ellos era que los titulos de las imagenes que añadia no se mostraban porque se mostraban todos los del primer slide instalado, al final los he quitado porque me costaba deslizarme por la página una barbaridad, y bueno, me tendré que conformar con uno, que le vamos a hacer.

    Si me he dado cuenta de que donde eliminé los puntitos que marcaban las entradas ahora han quedado otros más oscuritos que cuestan más de ver, pero que estan ahi, si me pudieses ayudar a eiminarlos sería todo.

    Un abrazo.

    ResponderEliminar
  59. Hola Potro. . . ya puse el codigo el problemas es que pongo la URL de las imaganes que van en la slider y luego cuando guerdo y veo no esta en slider ni nada no se que podria ser.

    ResponderEliminar
  60. hola potrillo el mejor master en blogger, ya el slider se activo ya funciona bien solo que tardava en cargar pero ya esta bien mil gracias de verdad el mejor blog de la red.

    ResponderEliminar
  61. no diculpa, el problema continua, por favor ve el blog y ayudame si por favor hace rato habia servido y ahora no y la verdad me gusta este slider
    http://disneydownload-hd.blogspot.com/

    ResponderEliminar
  62. Hola Bernardo Elías,

    Prueba con esto, debajo de:
    .orbit-bullets li {

    Agrega esto:
    list-style:none !important;

    Saludos y gracias por tu comentario :)

    ResponderEliminar
  63. Daniel Ramirez, pues es un poco extraño que a veces te funcione y otras veces no.
    ¿Recuerdas si hiciste una modificación antes de que dejara de funcionar de nuevo?

    ResponderEliminar
  64. no solo poner cambiar los links de las imagenes, pero me funciono una ves y luego cabie las imagenes y no me funciono nose que pueda ser.

    ResponderEliminar
  65. te dejo mi correo danielramirez12@hotmail.com aver si me ayudas en vivo claro si puedes.

    ResponderEliminar
  66. Daniel Ramirez, pues aparentemente está bien puesto, he usado los mismos códigos que tienes en la plantilla que usas y me anduvo bien, así que me hace pensar que podría tratarse de algún otro script. Quizá la barra de Wibiya podría ser la causante, ya otras veces (en otros menús) ese ha sido el problema.

    Jean Wolf , qué bueno que te ha servido :)

    ResponderEliminar
  67. hola gracias por tu ayuda te lo agradesco un de los problemas estaba en el link de las imagenes, pero ya esta resuelto gracias

    ResponderEliminar
  68. Vale, qué bueno que ya lo has resuelto :)

    ResponderEliminar
  69. muy buena aplicación! funciona genial en el blog, pero en una web que tengo con host propio no puedo modificarle el tiempo al cambiar los valores (y el que tengo en el blog si..) alguna idea de porqué puede ser??

    ResponderEliminar
  70. AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA lo estube buscando desde hace años MUCHAS GRACIAS!!!!!!!!!!1

    ResponderEliminar
  71. Adm, no sabría decirte, sólo lo he probado en Blogger, pero en teoría debería ser de la misma forma ya que de hecho está diseñado para páginas Web.

    Jane vulturi, qué bueno que al fin lo has encontrado :)

    ResponderEliminar
  72. Hola Potro, como estas? Te hago uan consulta. He intentado incorporarlo en una entrada de mi blog (http://floresazuladas.blogspot.com/) y no ha resultado. Las imagenes aparecían una debajo de otra y me desaparecia el slider de la cabeza. La pregunta es si se puede utilzar en una entrada o que otro slider sirve para usar en una entrada especifica del blog, sin que se borre el de mi cabecera. ¿Sabés? Muchas gracias.

    ResponderEliminar
  73. Hola Pablo,

    Usualmente casi todos los sliders son complicados de mostrarlos en las entradas de un blog, y en le caso de las plantillas nuevas del diseñador lo son más aun.
    En mi experiencia personal sólo en la plantilla Mínima es en la que es más probable mostrar los sliders dentro de las entradas.

    Saludos.

    ResponderEliminar
  74. Quisiera saber si en blogger se puede hacer lo que esta en esta pagina http://www.crepusculo.tv/ en donde dice imagenes, gente blogs, chat videos etc... eso se veria genial en mi blog espero tu respuesta. bye

    ResponderEliminar
  75. Pues no conozco ese slider en particular pero no creo que sea imposible ponerlo, quizá sí requiera de mucho trabajo como es el caso de todos los sliders que son muy elaborados.
    Si me encuentro uno parecido o ese mismo por la red lo publico :)

    ResponderEliminar
  76. Ok muchas gracias si encuentras algo así, escribe que lo encontraste en el chat de mi blog http://crepusculosagamexicoamantedetaylor.blogspot.com/

    Te agradeceria de verdad, aun así gracias por el truco


    Bye

    ResponderEliminar
  77. Hola no se si me pueden ayudar, como podria poner el Slider en el BOTTOM osea abajo del blog y no arriba??

    ResponderEliminar
  78. Sólo arrastra el elemento HTML/Javascript donde has puesto el slider y arrastralo hasta donde deseas.

    ResponderEliminar
  79. potro por que me aparece asi aqui mi blo0g

    http://infinitubuntu.blogspot.com/

    ResponderEliminar
  80. No veo que lo tengas puesto en ese blog.

    ResponderEliminar
  81. Hola Potro qué tal estamos por estos lares fenómeno... He probado este slide en uno de mis blogs y ha funcionado a la perfección, el problema es que mi plantilla tiene el borde automático que rodea a las imágenes y me gustaría que dicho borde no envolviese a este fantástico slide, pero solo lo uso en entradas...

    En definitiva, lo que querría saber es si se puede ocultar ese borde para este slide, o simplemente ocultarlo en las entradas individuales, gracias por adelantado catacrack.

    ResponderEliminar
  82. Hola Joker,

    Se podría eliminar el borde pero aplicaría para todas las imágenes de las entradas, aunque a veces es posible quitarlo sólo en el slide pero depende mucho de la plantilla.
    En caso de que desees eso necesito saber en cuál entrada lo has puesto para poder decirte cuál es el procedimiento.

    Saludos!

    ResponderEliminar
  83. Que otra manera de que se descargue mas rapido hay?? porke al principio se traba un poco y se descargan todas las imagenes en columna y despues de unos segundos se conforma el reproductor.ya pegue el codigo antes que head y no lo soluciono. Gracias y saludos.

    ResponderEliminar
  84. Si poniéndolo después de <head> no se solucionó entonces tiene que ver un poco con la carga de tu blog, quizá algún otro elemento hace que tarde un poco en cargar el blog y por lo tanto no permite que el resto cargue más rápido. Incluso las mismas fotos que se usan para el slider podrían ser las responsables de esa lentitud.

    Saludos.

    ResponderEliminar
  85. Potro gracias por tu pronta respuesta. He usado el condicional para que el estilo .post img solo se aplique en todos los lugares menos en las entradas individuales, de esta forma lo oculto en los posts. Ahora he quitado el condicional y una entrada con slide sería ésta, ahora puedes ver como se carga con ese molesto borde.... y si se puede ocultar sólo para el slide ya sabes jeje....Gracias de nuevo!

    ResponderEliminar
  86. Así como lo estabas haciendo está bien, sólo que lo que crees que es un borde no es un borde, sino un fondo con un padding. El código a usar sería este:

    <b:if cond='data:blog.url == &quot;http://fringefilia.blogspot.com/2010/11/fotos-del-rodaje-3x07-abducted.html&quot;'>
    <style>
    .post img{padding:0 !important; border:0 !important;}
    </style>
    </b:if>

    Saludos.

    ResponderEliminar
  87. Gracias una vez más!, justo lo que andaba buscando, pondré el codigo en plantilla de entrada. Saludos!

    ResponderEliminar
  88. Hola Potro como estas te visito despues de tiempo y me parece genial este formato de slide, pero me gustaría ponerlo en una entrada, ya intenté pero solo se ven las imagenes una despues de otra y cuando lo coloqué en un gadget si funcionó, esl caso es que por favor explicame si existe alguna forma de colocarlo en una entrada, gracias por la respuesta de antemano, saludos.

    ResponderEliminar
  89. Hola otra vez, el codigo:
    div id='featured
    que va antes de los enlaces me marca como error, es por eso que lo eliminé, pues cuando los puse para que no me marcara error se movía y desordenaba toda la pagina.

    ResponderEliminar
  90. Posiblemente había un código que estabas omitiendo y por eso te marcaba error. Si eliminas esa parte entonces no funcionará el slider, es básico y fundamental que esté puesto.
    Todos los códigos que no sean texto en una entrada deben ponerse y editarse siempre en la pestaña Edición de HTML y no en la de Redactar.
    Ahora que, en algunas plantillas los sliders no funcionan en las entradas, eso depende de cada plantilla y no hay mucho que pueda hacerse al respecto :\

    Saludos.

    ResponderEliminar
  91. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  92. SI funcionó...¡¡¡, me faltaba la ultima parte del codigo, Muchas Gracias Potro. Un abrazo virtual de Perú.

    ResponderEliminar
  93. Qué bueno que ya lo has solucionado :)

    ResponderEliminar
  94. Hola potro, quisiera hacer un pequeño aporte.
    Con respecto a que a veces aparecen todas las imagenes (o textos en caso de que el slider sea de solo texto) durante unos cuantos segundos para despues adoptar su forma normal se puede arreglar añadiendo lo siguiente en los li
    li style='display:none'
    Si se le agrega style='display:none' no deberían volver a ver ese problema.

    ResponderEliminar
  95. Hola Harry, probé tu sugerencia pero no tuve éxito :\

    ResponderEliminar
  96. Que raro, a mi me funciono. El style='display:none' debe ponerse en todos los li. Por cierto, agregalo esto al final del código tambien: div style='clear: both;'/

    ResponderEliminar
  97. potro he intendado ponerlo de otro tamaño y no me deja y tambien e intentado centrarlo y nada :S donde debo cambiar el codigo HTML ??

    ResponderEliminar
  98. Para cambiar su tamaño basta con cambiar el ancho (width) y alto (height) que tienen los códigos de las imágenes.
    Para centrarlo prueba encerrando el último código entre <center> y </center>

    ResponderEliminar
  99. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  100. ME MATASTE CON LO DE LOS IDENTIFICADORES. EN EL EJEMPLO: idFOTO 1 LO SUSTITUYO CON QUE? ... REPITO LA URL DE LA IMAGEN? AL IGUAL QUE EN REL=foto1, .... se me enredo la vida. ah ... de paso la animacion de slide no me sale, me sale es una imagen sobre otra estatica ... si de casualidad pasa lo mismo que con lo del efecto de la imagen que vibra (que me explicaste lo de la compativilidad) entonces no sigo intentandolo, para no perder tiempo ... bueno tu me entiendes.

    ResponderEliminar
  101. No lo sustituyes con nada, foto1 es un ID, puedes dejarlo así o ponerle otro nombre, sólo que siempre deberán ser el mismo nombre tanto para el ID como para el REL.

    Ahora bien, es posible que no te esté funcionando porque estás usando otra versión de jQuery (es la que usaste para el menú dock).
    Puedes probar quitando el script más antiguo y dejar el más nuevo y así ver si funcionan ambos trucos.
    Para eliminarlo sólo busca esta parte y quitala:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>

    ResponderEliminar
  102. Hola Potro, gracia por tu aportes.
    Estoy montado el slider en blog de 3 columnas. el mismo lo tengo en la columna central( M-W).
    El Asunto es que quiero que el slider llegue hasta la Sidebar Izquierda.
    Aca dejo un blog que tiene una imagen tal como quiero poner el slider.http://www.bloggerstyles.com/demo/?theme=1305
    Se agradece tu ayuda o comentarios como siempre.

    ResponderEliminar
  103. Hola O-S,

    Eso es un poco complicado porque tendrías que modificar bastante la plantilla, quizá sería un poco más sencillo si tuvieras las dos sidebar juntas así sólo agregarías una tercera sidebar arriba de ellas, pero aun así no podría conectarse con el contenedor de las entradas como está en el ejemplo que mencionas.
    Lo más recomendable sería buscar una plantilla que ya tuviera un estilo parecido al que buscas y así no batallarías tanto.

    Saludos.

    ResponderEliminar
  104. Hola El Potro.

    Otra duda, como puedo poner en la pagina principal

    unas imagenes con links hacia otras entradas dentro del mismo blog.

    Osea, un menu pero en imegenes.

    gracias.

    ResponderEliminar
  105. Sólo agrega en un elemento HTML/Javascript este código:
    <a href="URL del enlace"><img src="URL de la imagen" /></a>

    Ahí cambia la URL del enlace y la URL de la imagen donde si indica. Pon una línea como esa por cada imagen que quieras poner. Los códigos deberás ponerlos uno detrás del otro sin dar saltos de línea.

    Saludos.

    ResponderEliminar
  106. Hola potro, mira no me sale la imagen nada mas me sale un cuadrito chiquito en medio parece papel doblado xD.

    En fin... porque sera? hice todos los pasos

    ResponderEliminar
  107. El slider está funcionando, el problema es que la URL de las imágenes no funciona, quizá ya no existen o están mal las direcciones.

    ResponderEliminar
  108. Las acabo de subir! el mismo dia las subi

    ResponderEliminar
  109. Miralas estan activas:

    http://3.bp.blogspot.com/_WN6Ebuo5wJQ/TPF7dln-dOI/AAAAAAAAAIE/-ssXr1e-bOY/s1600/Dragon+Ball+Kai.jpg

    http://3.bp.blogspot.com/_WN6Ebuo5wJQ/TPF3UtOMjAI/AAAAAAAAAIA/F7YY4W8nc54/s1600/dragon+ball+sd.jpg

    ResponderEliminar
  110. El problema es que por alguna razón (no sé cuál sea), al momento de guardar los cambios la plantilla te está cambiando todos los caracteres de la URL en minúscula, y como ves, en la URL original hay letras minúsculas y mayúsculas.
    Es necesario que las URL se muestren tal como deben ser respetando las mayúsculas y minúsculas, de lo contrario dejan de funcionar.
    Intenta subiendo las imágenes a otro hosting donde la URL de la imagen esté toda en minúsculas.

    ResponderEliminar
  111. Como cual? photobucket,tinypic, o cual?

    ResponderEliminar
  112. Potro, he encontrado ahora si una forma de arreglar el problema con las imagenes.

    Agregar esto al principio del css:
    #featured { height: 1px; width: 1px; overflow: hidden; }

    y al final del código css agregar esto:

    #featured { height: 280px; width: 650px; }

    Cambiando el height y el width por las medidas de las imagenes que hayan puesto.

    ResponderEliminar
  113. GOKU, pues con cualquiera que te dé la URL en minúsculas, prueba unos cuantos para saber cuál de ellos te da las URLs de esa forma.

    Harry, eso sí suena bastante lógico :D en cuanto tenga tiempo lo revisaré pero estoy casi seguro que así sí se solucionará el problema. Gracias nuevamente por tu interés en compartir.

    ResponderEliminar
  114. Lo comenté porque estoy usando este slider en mi sitio y con eso solucioné el problema :)

    http://www.cuerpoarmonioso.com --> ahí puedes hecharle un ojo.

    ResponderEliminar
  115. Potro de nuevo yo, para molestarte ahora con algo creo que complicado, ya puse el slider y me quedo muy bien; lo que quiero ahora es que quede como el anuncio flotante, es decir que el slider se vea siempre aunque bajen o suban en la pagina crees que se pueda, o algo parecido a eso, espero no molestarte tanto, gracias por todo DIOS te bendiga

    ResponderEliminar
  116. GOKU, sigo viendo que estan alojadas en Blogger, y Blogger siempre te dara las URLs con mayusculas y minusculas.

    Editor, no creo que funcione, pero podrias tratar cambiando donde dice position: relative; por position: fixed; pero te repite, es muy probable que no funcione del todo bien.

    ResponderEliminar
  117. Potro gracias por la información pero yo quería hacerte una pregunta, que es vital para lo que quiero, ¿que cambios tendría que hacer, si en lugar de que el Slide muestre fotos que yo subí, me muestre las fotos de las entradas más recientes?

    Gracias

    ResponderEliminar
  118. Buenas, he metido el slide dentro de una entrada pero tengo 2 pequeñas dudas.

    ¿Como puedo modificar el tamaño de la caja? Porque las fotos me salen deformadas y a veces dan la sensacion de superponerse.

    Otra duda que tengo es como puedo quitar los números que aparecen en los circulos cuando van pasando als fotos, ya que solo con esos circulos me quedaría mejor de aspecto.

    Un saludo.

    ResponderEliminar
  119. Potro que crees, si funciona pero el resultado no es de lo mejor; es decir si se mueven con la pagina pero no se ve muy bien en cuestion de diseño porque es muy incomodo, nada recomendable hacer esto; de cualquier forma gracias por la ayuda y que bueno que ya estas de nuevo con nosotros

    ResponderEliminar
  120. Bueno potro una duda más ojala no te moleste, cual seria la manera para ponerlo en una entrada; ya sea ponerlo directo en el post o con un iframe. Espero y puedas ayudarme Gracias!!! DIOS te bendiga.

    ResponderEliminar
  121. saludos Potro excelente
    tus publicaciones yo creo que el 100% de blogger estan usando tus ideas jajajaj
    yo tengo problemas con el mio aqui te dejo mi URL para que lo cheques http://pruebatd3000.blogspot.com/
    saludos
    mi msn es Carlosmq23@hotmail.es

    ResponderEliminar
  122. ¡Muchas gracias! Me viene muy bien para mi blog y funciona perfectamente.

    El problema de que se cambien las mayúsculas por minúsculas en las direcciones de las fotos es de blogger. En vez de meter la dirección en comillas simples, prueba a hacerlo con dobles comillas.

    Así: src="URL de la imagen"

    En vez de así: src='URL de la imagen'

    Espero que te sirva. Un saludo!

    ResponderEliminar
  123. El slider se me muestra todo desordenado cuando abro la pagina en Firefox, no entiendo porque será.

    ResponderEliminar
  124. Hola potro, alguna sugerencia al ocultar el SLIDER cuando se esta leyendo el POST. porque el post se muestra en todos los casos. si alguien más sabe, espero su apoyo Gracias

    ResponderEliminar
  125. Daniel, de forma automática no se puede, pero funciona igual, en lugar de poner imágenes cualquiera agrega la imagen de tus entradas de forma manual.

    j.velasco, agrega esto en el segundo código:
    #featured {width:490px; height:238px;}

    ResponderEliminar
  126. Editor, es igual, sólo que el último código lo agregas en una entrada en lugar de un elemento HTML/Javascript, pero muchas veces los resultados ahí no se ven muy bien.

    Carlos Eduardo Martínez, ¿cuál es el problema? yo lo veo muy bien.

    ResponderEliminar
  127. Aresil, gracias por compartir ese tip ;)

    Tangram, quizá tu plantilla no es compatible con ese navegador. Antes de elegir una siempre se debe probar en todos los navegadores para cerciorarte que se ve bien en todas partes.

    Trémolo, mira esta entrada.

    ResponderEliminar
  128. Hola potro disculpa tantas molestias, oye he intentado poner el slider en una pagina estatica pero solo se muestran las imagenes sin el efecto, una depues de la otra, no se a que se deba me puedes ayudar este lo he colocado en este blog mundowull.blogspot.com, como dato extra puse un menu deslizante tambien en este blog

    ResponderEliminar
  129. Pues al menos en esta página lo veo funcionando sin ningún problema:
    http://mundowull.blogspot.com/p/pagina-de-fotos-prueba.html

    ResponderEliminar
  130. Me ganastes no crei que contestaras tan rapido, apenas lo corregi tuve que quitar el menu con efecto deslizante porque generaba conflicto, de cualquier forma muchas gracias y que DIOS te bendiga para que nos sigas ayudando.

    ResponderEliminar
  131. Hola potro buen Post pero me quedo una duda x ejemplo ami no me gustaria poner todos los HTML y los codigos en mi platilla directamente, si los subo a un hosting entonces como los enlazo a la platilla osea q codigo pongo para unir el link de donde esta alojado los html y la platilla gracias..

    ResponderEliminar
  132. Entonces descarga el script, subelo a un hosting y antes de </head> pega esto:

    <script src='URL del script' type='text/javascript'/>

    Pero ojo, hay partes que si irán de cualquier forma en la plantilla, por ejemplo las primeras 20 líneas que están en el primer código esas forzosamente deben ir en la plantilla.

    También toma en consideración que siempre es mejor alojar los scripts en la plantilla por dos razones, para no depender de servicios externos y para aligerar la carga del blog.

    Saludos.

    ResponderEliminar
  133. Hola potro como se hace un Archivo en formato JS
    Este hay un menu de una pagina y cuando ellos borran el menu osea el archivo js ami tambien se me borra quisiera saber como se hace el menu que es en formato js x ejemplo

    http://esteeselmenucomosehace.js

    +Como se hace?

    ResponderEliminar
  134. Sólo pega el contenido del script en WordPad y guárdalo con la extensión .js
    Al guardarlo te mostrará un mensaje de advertencia, sólo le das Aceptar y listo, verás que al guardarse el ícono del archivo que has creado ha cambiado.

    ResponderEliminar
  135. YA NO FUNCIONA PARECE ISE TODOS LOS PASOS I LOS ISE BIEN PERO AL MOMENTO DE AGREGAR LAS IMAGENES NO APARECEN

    ResponderEliminar
  136. ๖ۣۜCESAR๖ۣۜ™ (Cesar Jericho), ¡feliz Navidad igualmente!

    Fabian Gonzalez, ¿en cuál blog?

    ResponderEliminar
  137. Que tal, realmente muy buen slider, estoy tratando sin exito de integrarlo, las pruebas las hago en este blog de pruebas:
    pruebaao.blogspot.com
    Leí los comentarios y veo que uno de los problemas comunes es la incompatibilidad con otras librerías, entoces eliminé las de prototype y scriptaculous... aún así no logro que funcione.
    ¿Que puede suceder?
    Desde ya agradezco tu tiempo y muy buen blog!

    ResponderEliminar
  138. Tienes tantos scripts que sería difícil saber cuál de ellos es el que causa el conflicto. Haz la prueba en otro blog donde no tengas tantos scripts para echarlo a andar.
    Saludos.

    ResponderEliminar
  139. hola potro xD estoy de post en post jaja.
    tengo un problema con la slide las imagenes me aparesen sueltas y el sin efecto
    no entiendo pense que seria algo de javascrips pero no solo tengo ese jquery. desde ya grax por todo xD

    ResponderEliminar
  140. perdona otra ves potro ejje pero ya lo soluciones grax =

    ResponderEliminar
  141. Vale, qué bueno que ya lo has resuelto :)

    ResponderEliminar
  142. hola potro, hay alguna forma de poner a que las imágenes se muestren en forma aleatoria, osea que no tengan un orden para mostrarse que se muestren a azar. gracias.

    ResponderEliminar
  143. No, al menos el script no contiene la opción para que eso suceda :\

    ResponderEliminar
  144. Saludos Potro si es que luego subi a un hosting que me las dira en minuscula y caso cerrado pero en mi blog original no me sale bien me sale a un lado usando los mismo html del de pruebaTD :( y la barra de descripcion me sale super larga que puedo acer :(

    ResponderEliminar
  145. TaukaDeportes.blogspot.com pero no lo quiero poner hasta que este bien mi correo es carlosmq23@hotmail.es me mandas un mensaje
    y subo el menu y hay me dices cual es el problemas ok Saludos

    ResponderEliminar
  146. En el correo no te puedo responder, sólo por aquí, y sí necesitaría verlo puesto para ver cuál es el problema :\

    ResponderEliminar
  147. hola hice todo pero no me resulta te dejo mi link por favor una ayudadita http://clubucvdtrujillo.blogspot.com/

    ResponderEliminar
  148. He notado que no se notan las imagenes ayuda porfavor

    ResponderEliminar
  149. Pues yo lo veo funcionando perfectamente, eso sí, tarda un poco en cargar pero eso es debido a que tienes demasiados elementos en el blog y eso hace que se tarde más de lo normal en mostrar las imágenes dentro del slider.

    ResponderEliminar
  150. gracias ya lo solucione no se que paso copie el de un amigo de mas arriba que ya lo tiene cambie la parte ultima del gadget bueno estoy retirando algunas cosas que lo hacen lento talvez tengas algo para esto de hacerlo rapido.
    gracias saludos

    ResponderEliminar
  151. Ayudenme por favor! segui todas las instrucciones pero mira como se ve: http://0987654321abc.blogspot.com/ ese es un blog que hice para hacer la prueba, pero tiene los url de las imagenes y las paginas.

    ResponderEliminar
  152. se ven cuadros sin imagen separados uno encima de otro, no tengo ni idea que hice mal.

    ResponderEliminar
  153. De entrada veo dos problemas, uno es que no has puesto el primer código que es el script que hará que funcione.
    Y otro es que Blogger está teniendo problemas con las URLs pero aquí hay un modo de solucionarlo:
    http://ciudadblogger.com/2010/12/las-mayusculas-y-las-minusculas-en-las.html

    ResponderEliminar
  154. Ya listo, muchas gracias el problema fue mio por hacerlo rápido y no leer que era antes ]]> y no después jeje, como puedo hacer para centrarlo en la columna donde esta? Lo puedes ver acá http://movidavenezuela.blogspot.com/ muchas gracias de antemano.

    ResponderEliminar
  155. y lo ultimo es si existe la posibilidad de que solo salga en la pagina principal? y disculpa tanta molestia.

    ResponderEliminar
  156. ya he podido solucionarlo para que solo se muestre en la pagina principal, pero aun me queda la duda de si de pueda centrar o no, muchas gracias y disculpa la molestia potro.

    ResponderEliminar
  157. Prueba encerrando el código que pusiste en el gadget entre <center> y </center>

    ResponderEliminar
  158. oh perfecto, muchisimas gracias de verdad. Espero que el blog siga creciendo porque esta excelente

    ResponderEliminar
  159. Q tal Potro. 1ro t doy mis felicitaciones ya q es un excelente blog. 2do q necesito ayuda para cargar este gadget pues no me aparecen las imagenes. T paso la dir de mi blog para q lo veas xfa.
    http://quierestenisaquiestan.blogspot.com/

    ResponderEliminar
  160. Oie ya logre resolverlo gracias a la respuesta q diste acerca d las mayusculas y minusculas con las ". Gracias.
    Pero otra duda, como le cambio el tamaño al recuadro donde se muestran las imagenes? Espero respuesta. Saludos.

    ResponderEliminar
  161. De nueva cuenta he resuelto el problema pero eso sii, gracias a las indicaciones q das. Saludos.

    ResponderEliminar
  162. oye potro por qe mi gadget cuando apenas esta cargando la página se ven las imagenes una debajo de otra y ya que cargo ya se ven bien http://www.choromaniaco.blogspot.com/

    ResponderEliminar
  163. TnisMaster, qué bueno que ya lo has resuelto :)

    HumbertoPeker, eso es porque el script no carga de inmediato y mientras carga las imágenes se muestran normal. Prueba con la solución que dan en el comentario #115 quizá eso te sirva.

    ResponderEliminar
  164. Que tal amigo POTRO, muy bueno tu blog, tengo la misma duda que humberto, leo el comentario #115, pero no se en que parte colocarlo, no se cual es el css, muchas gracias de antemano

    ResponderEliminar
  165. Hola caricuaofoto,

    En el comentario #115 se refiere al código que has pegado antes de ]]></b:skin>

    ResponderEliminar
  166. Buenas, amigo yo había dejado al blogger, pero ahora conseguí el tuyo y me anime a seguir, luego de como 3 años sin usarlo.

    Tengo en mente un blog para una fundación sin fines de lucro para rescatar gatos en situación de calle, en mi país Venezuela (específicamente en mi estado de residencia actual).

    Use una plantilla que yo había modificado hace tiempo atrás (cambios normales nada del otro mundo)

    Me gustaría que pasaras y vieras que errores ves en la plantilla, o contribuciones para un mejor estilo.

    Cuando tengas tiempo claro.

    Saludos

    Felicitaciones por este blog.

    NOTA: el primer y segundo blog, si vas y los ves me dices que ves de mal. Estoy usando tus trucos y mejoras. Mil gracias de verdad por dedicarle tiempo a esto.

    iricky82.blogspot.com
    http://fundacionapadrinaungatosinhogar.blogspot.com/

    ResponderEliminar
  167. Esto es lo que busco, pero no me entero lo de la id de las fotos, como veo la id y podrías explicármelo, gracias

    ResponderEliminar
  168. iricky82, qué bueno que te animaste a regresar con tu blog. No creo que haya muchos cambios que se le tengan que hacer, la verdad así como está lo veo muy bien :)

    Mercedes España, la ID tú la agregas con el nombre que quieras, puede ser cualquier palabra sólo recuerda que el nombre que elijas para el ID de la foto deberá ser el mismo que coloques en donde dice rel=

    ResponderEliminar
  169. Perdona mi torpeza, Potro ¿en que parte del código de la foto agrego la ID,,,y lo que tengo que añadir es así - rel=¨***¨" o id="***"
    no me entero Potro lo siento
    gracias

    ResponderEliminar
  170. Buenas Potro lo estoy intentando, pero no consigo que se vean las imagenes

    ResponderEliminar
  171. Las imágenes no tienen ID es por eso que tú debes ponérselo, el que quieras.
    Por ejemplo, si le pones id="foto1" entonces donde dice rel= también debes poner el mismo nombre, o sea, rel="foto1"

    ResponderEliminar
  172. Donde incluyo lo que me dices?
    en que parte del html de la foto?
    Y gracias de verdad por tu paciencia

    ResponderEliminar
  173. Eso se agrega en la parte donde se indica en la entrada:

    <a href='URL del enlace'><img rel='foto1' src='URL de la imagen' style='width:490px; height:238px;'/></a>
    <span class='orbit-caption' id='foto1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius augue sit amet magna condimentum dictum.</span>

    En ese ejemplo a la ID le he puesto de nombre foto1 por lo tanto en rel= también le he puesto el mismo nombre, es decir foto1

    ResponderEliminar
  174. Ok Potro muchas gracias, siempre tan atento y enseñando, muchas gracias

    ResponderEliminar
  175. hola potro q tal la verdad primera ves q ingreso a tu blog y me parecio interesantisimo,..... sobre todo esto del slide, sabes ya copie todos los codigos HTML, y me salio bien enmi blo, pero no subi ninguna imagen ya q no entiendo de donde sacas estas cosas...'URL del enlace' y 'URL de la imagen', creo q usas el jQuery no?? podrias explicarme bien como usarr este programa ya q es lo unico q me falta para completar mi slide, gracias de antemano potro

    ResponderEliminar
  176. Hola Joseph,

    ¡Bienvenido a Ciudad Blogger!
    La URL del enlace es la dirección web del sitio que quieres enlazar, por ejemplo, si quisieras que al dar click a la imagen te mandara a Google entonces como URL pondrías:
    http://google.com

    La URL de la imagen es igual la dirección web de una imagen. Te dejo un enlace del blog de Jaime que explica cómo conseguir la URL de una imagen:
    http://elbalcondejaime.blogspot.com/2009/03/conseguir-la-direccion-o-url-de.html

    ResponderEliminar
  177. hola potro soy de nuevo yo,... sabes en la ultima parte de este proceso hice esto....

    Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript pegue este codigo:

    en la 'URL del enlace' pegue 'http://www.google.com' y en la 'URL de la imagen' pegue 'http://3.bp.blogspot.com/_rmcpxd3hzsq/skxvalwyp0i/aaaaaaaacda/fc-j4n7crzc/s400/cobresol.jpg'

    asi como me lo explicaste ahi arriba y como me lo explico en el blog de jaime pero la verad no paso nada de nada

    espero me puedas ayudar, ya q segun los comentarios eres el mejor, en esto de los blogger, gracias brother de antemano..........

    ResponderEliminar
  178. No te preocupes que tiene solución. En realidad el problema es que por alguna extraña razón Blogger está cambiando las URLs en algunos blogs.
    Mira esta entrada para saber más al respecto.

    Pero en resumen, la URL tanto del enlace como de la imagen no la encierres en comillas simples ( ' ) sino con comillas dobles ( " ), de esa forma no tendrás problema con la imagen y se mostrará sin problemas. Eso sí, carga una nueva imagen para que obtengas una URL sin problemas.

    Saludos.

    ResponderEliminar
  179. pucha potro era verdad lo que se comentaba eres un verdadero capo en esto de los trucos del blogger, jejeje, gracias a tus consejos me salio bien el slide,..... pero te hare un par de interrogantes , disculpa si abuso de tu amabilidad..ahi van

    hay alguna manera de borrar esos desagradables puntos y numeros q aparecen en la parte superior izquierda del slide, si habria alguna manera te lo agradeceria, causa.....

    Aca otra preguntita brother potro sabes yo tengo algunas imagenes que quiero subirlas a la web y darles una URL, me podrias explicarme eso?? como hacerle...sq deseo hacer un slide con esas imagenes, ..espero tu respuesta causa, eres el mejor sin duda

    ResponderEliminar
  180. Hola Joseph,

    ¿En dónde lo has puesto para ver esos puntos y números que mencionas?
    Para subir imágenes hay varios sitios, incluso puedes subir tus imágenes desde Blogger como si crearas una entrada, ahí verás que te da un código y dentro de ese código hay 2 URLs, la primera la puedes usar para lo que quieras.

    Saludos

    ResponderEliminar
  181. naa potro todos los codigos los puse como indicas en la parte aariba y la ultima parte lo puse ahi..
    el código que mostrará las imágenes, así que en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript (tambien lo puse ahi como lo explicaste) y la verdad asi me quedo mira..
    http://apasionadosporelcobre.blogspot.com/

    a potro queria preguntarte tambien si este tipo de slide solo se puede poner una ves en un blog, porq la verdad quiese hacer la prueba y me salio asi como muetra en mi blogger q te escribi ahi arriba, espero tu respuesta amigo potro

    ResponderEliminar
  182. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  183. Esos puntos son por el tipo de tu plantilla. Mira el comentario #43
    para saber cómo eliminarlos.
    Y sí, para que funcione bien sólo debe ponerse un slider por blog.

    Saludos.

    ResponderEliminar
  184. Gracias potro lo e estado buscando x todas partes y tu me das la solucion gracias,., !! me voy a anotar a seguidores..

    ResponderEliminar
  185. Me alegro que te haya sido útil :)

    ResponderEliminar
  186. hOLA potro. no se ke pasa con este slideshow es que no se muestra mira como kedo en sta imagen haciendo todos los pasos en esta entrada http://i.min.us/icik3S.png ... y resulta ke la parte de abajo de mi blog aparece esto: http://i.min.us/icmBy6.png . kmo le ago..no se ke acer,,

    PD: xciacaso uso este codigo para otros efectos en mi blog: http://i.min.us/ie3scE.png imagen

    ResponderEliminar
  187. Justamente en la posdata que dejaste está la causa del problema.
    Este slider trabaja con jQuery y esa librería no es compatible con Scriptaculous y Prototipe, por lo que cuando se agregan justos uno de ellos deja de funcionar :(

    ResponderEliminar
  188. osea que tengo que borrar el Scriptaculous y Prototipe y para que me funcione.. lo voi a probar..

    ResponderEliminar
  189. Hola.. ya lo borre el codigo Scriptaculous ahora si se ve el slideshow, pero mi problema ahora es que no se ven las imagenes.. http://www.downtofire.blogspot.com/

    ResponderEliminar
  190. Solucionado!! ya esta.. perdona si te moleste tanto..

    ResponderEliminar
  191. potro disculpa si soy tan molestoso, jejejje, por andandote preguntando esq recien estoy entrando a esto de los blogger,....sabes ya borre lo q me indicaste, y si es verdad q se borradon los puntos pero los numeros ahi arriba siguen apareciendo, tambien desearia borrar esos numeros como lo hago, porfavor.........

    aca va otra interrogante, ya q me dijiste q no se puede poner mas de este tipo de slide en un blog, hummmmmm los otros tipos de slide, desearia ponerlños desde www.slide.com sabes ya logre colocar en otro blog este tipo de slide, pero queria saber si alguna forma pa q el slide se reproduzca automaticamente ni bien uno ingrese al blog,.........porfavor disculpame por tantas molestias

    ResponderEliminar
  192. Esos números no sé que sean pues el slider no utiliza listas numeradas. De cualquier manera borra el otro gadget que tienes debajo, ese no andará así que fuera de ayudar podría afectar el funcionamiento del otro.

    Sobre los demás slides no lo sé, eso depende del sitio donde los hagas, ahí sabrás si tienen la opción de autoreproducción o no. Cada sitio es diferente y la verdad no los uso así que no sabría responderte esa pregunta.

    Saludos.

    ResponderEliminar
  193. Hola Potro hay alguna forma de que cuando me carge las imagenes, y se que dan en columnas cambiarla por un texto ke diga cargando..?

    ResponderEliminar
  194. Específicamente para ese slider o cualquier otro gadget no, pero puedes usar uno que se aplique para todo el blog:

    http://ciudadblogger.com/2009/04/mostrar-la-barra-cargando-pagina.html

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger