15/11/11

Crear un slideshow de fotografías con jQuery


Hoy en día, que los navegadores web están desbancando cada vez más a la tecnología Flash, sobretodo los dispositivos móviles como iOS, es necesario crear presentaciones de fotos que puedan ser visualizadas sin esa tecnología. Aunque es necesario que esos navegadores tengan habilitado JavaScript, el daño es virtualmente menor que en un slideshow Flash, aunque las posibilidades creativas son, evidentemente, menores.

Descargar los archivos de Slideshow (v1.0.0)

Lo primero que tenemos que hacer es crear un archivo HTML (slideshow.html) con el siguiente código:

<html>
    <head>
         <link href="css/slideshow.css" rel="stylesheet" type="text/css" />
         <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
         <script type="text/javascript" language="javascript" src="js/slideshow.js"></script>
    </head>
 
    <body>
        <div id="slideshow">
            <div class="img" id="img-0" style="z-index:0;">
                <img src="img/img01.jpg" width="700" height="250" />
            </div>
         
            <div class="img" id="img-1" style="z-index:10;">
                <img src="img/img02.jpg" width="700" height="250" />
            </div>
         
            <div class="img" id="img-2" style="z-index:20;">
                <img src="img/img03.jpg" width="700" height="250" />
            </div>
         
            <div class="img" id="img-3" style="z-index:30;">
                <img src="img/img04.jpg" width="700" height="250" />
            </div>
         
            <div id="rapidlinks-btns">
                <div class="rapidlink-selected" id="rapidlink-0">
                    <a href="javascript:userChangeRapidLink('0');">
                        <img height="10" src="gui/blank.png" width="10" />
                    </a>
                </div>
             
                <div class="rapidlink" id="rapidlink-1">
                    <a href="javascript:userChangeRapidLink('1');">
                        <img height="10" src="gui/blank.png" width="10" />
                    </a>
                </div>
             
                <div class="rapidlink" id="rapidlink-2">
                    <a href="javascript:userChangeRapidLink('2');">
                        <img height="10" src="gui/blank.png" width="10" />
                    </a>
                </div>
             
                <div class="rapidlink" id="rapidlink-3">
                    <a href="javascript:userChangeRapidLink('3');">
                        <img height="10" src="gui/blank.png" width="10" />
                    </a>
                </div>
            </div>
        </div>
    <body>
<html>


Una vez tenemos el archivo html, creamos el archivo de estilos CSS (css/slideshow.css):

#slideshow {
    width:700px;
    height:250px;
    position:absolute;
    top:0px;
    left:0px;
}

#slideshow .img {
    width:100%;
    height:100%;
    position:absolute;
    visibility:hidden;
    top:0px;
    left:0px;
    float:left;
}

#slideshow #rapidlinks-btns {
    /* this.width:
    numRapidlinks x (.rapidlink.width + .rapidlink.marginRight + 2xrapidlink.borderWidth) */

    width:68px;
    height:15px;
 
    /* this.left:
    #slideshow.width - this.width */

    left:632px;
    top:233px;
    position:absolute;
    z-index:500;
    float:right;
}

#slideshow #rapidlinks-btns .rapidlink,
#slideshow #rapidlinks-btns .rapidlink-selected {
    width:10px;
    height:10px;
    border:1px solid #FFFFFF;
    float:left;
    margin-right:5px;
}

#slideshow #rapidlinks-btns .rapidlink:hover,
#slideshow #rapidlinks-btns .rapidlink-selected {
    background-color:#FFFFFF;
}

#rapidlinks-btns .rapidlink a,
#rapidlinks-btns .rapidlink-selected a,
#rapidlinks-btns .rapidlink a img,
#rapidlinks-btns .rapidlink-selected a img {
    text-decoration:none;
    border:none;
}


Y, finalmente, vamos a la parte interesante, que son los métodos JavaScript (js/slideshow.js):

<script language="javascript" type="text/javascript">
function changeRapidLink() {
    rapidLinkAnterior = rapidLinkActual;
    if(rapidLinkActual < totalRapidLinks-1) {
        rapidLinkActual++;
    } else {
        rapidLinkActual = 0;
    }
    animateChangeRapidLink();
}

function animateChangeRapidLink() {
    $(imgDIV+rapidLinkAnterior).fadeTo(secsOfTrans*1000,0,function() { evalRapidLinks(); });
}

function evalRapidLinks() {
    $(imgDIV+rapidLinkActual).fadeTo(secsOfTrans*1000,1);
    $(rapidLnkDIV+rapidLinkAnterior).attr("class","rapidlink");
    $(rapidLnkDIV+rapidLinkActual).attr("class","rapidlink-selected");
}

function initRapidLinks() {
    if(totalRapidLinks > 0) animationInterval = setInterval("changeRapidLink()",secsOfDelay*1000);
}

function userChangeRapidLink(selectedRapidLink) {
    rapidLinkAnterior = rapidLinkActual;
    rapidLinkActual = selectedRapidLink;
   
    clearInterval(animationInterval);
    animationInterval = setInterval("changeRapidLink()",secsOfDelay*1000);
    animateChangeRapidLink();
}

function initItem() {
    itemsLoaded++;
    if(itemsLoaded == totalRapidLinks) {
        $(imgDIV+rapidLinkActual).fadeTo(secsOfTrans*1000,1,function() { initRapidLinks(); });
    }
}

var secsOfDelay = 5;
var secsOfTrans = 1;
var contDIV = "#slideshow";
var imgDIV = contDIV+" #img-";
var rapidLnkDIV = contDIV+" #rapidlinks-btns #rapidlink-";

var animationInterval;
var rapidLinkAnterior = 0;
var rapidLinkActual = 0;
var totalRapidLinks = 4;
var itemsLoaded = 0;

$(imgDIV+rapidLinkActual).ready(function() {
    for(var i = 0;i < totalRapidLinks;i++) {
        $(imgDIV+i).fadeTo(1,0,function() {
            $(this).css("visibility","visible");
            initItem();
        });
    }
});
</script>

60 comentarios:

  1. Hola me gustaria saber si sirve para blogger este articulo tan interesante y como lo podria añadir a mi web "www.teseomotor.com" La ide aes colocarlo en la cabecera con las medidas de la fotografia tal y como se podria hacer en word press

    UN MILLON DE GRACIAS

    ResponderEliminar
    Respuestas
    1. Hola Zeus,

      ante todo, muchas gracias por tu interés.

      Te comento, no hay ningún problema con poner ese código en ninguna página web, mientras esta soporte HTML, CSS y JavaScript (como todas). Si trabajas con WordPress deberías añadirlo en la plantilla de la cabecera de tus páginas. No tengo posibilidad de acceso ahora a ningún panel de Wordpress, pero creo recordar que era así. Si no eres el autor de la plantilla de Wordpress, entonces creo que no lo puedes tocar a no ser que te descargues los archivos, los edites y la subas como una nueva plantilla.

      No sé si me he explicado. Espero haberte ayudado.

      Un saludo.

      Eliminar
  2. mil gracias amigo me ha servido mucho.

    ResponderEliminar
  3. Hola Marc, muchas gracias por tu post tan útil. Estoy tratando de implementar lo que propones, pero no se en que parte poner el JavaScript en la plantilla de blogspot, si fueras tan amable de darme ese dato.

    Saludos cordiales!!

    ResponderEliminar
    Respuestas
    1. Hola Martín. Ante todo muchas gracias por tus comentarios. En Blogger puedes poner todo ese código dentro de la misma página del post, usando el editor HTML, pero haciendo una pequeña adición: los CSS deben ponerse dentro de una etiqueta HTML "styles". Así, te quedaría de este modo:

      Nota: pongo los TAGS de HTML separados ("< {TAG} >" en lugar de "<{TAG}>") para que se muestren aquí, pero tú deberías ponerlos sin espacio).
      ----------------
      < style type="text/css" media="all" >
      {CONTENIDO DE LOS CSS}
      < /style >

      {CONTENIDO JAVASCRIPT ENTERO}

      {CONTENIDO HTML DE LA GALERÍA}
      ----------------

      Espero haberte podido ayudar.

      Un saludo.

      Eliminar
    2. Muchas gracias Marc. Lamentablemente me genera varios errores y no aparece tal como acá. Se ven las fotografías en una secuencia hacia abajo apareciendo con la opacidad correspondiente, pero en secuencia hacia abajo. La otra consulta, este código sirve sólo para las vistas dinámicas de blogger, se puede implementar en vistas sencillas?

      Saludos cordiales y reitero los agradecimientos por tu ayuda!!

      Eliminar
    3. Hola Martín,

      ostras perdona que haya tardado tanto tiempo en responderte, pero he estado ocupado con mil y una cosas.

      Esto que comentas es tema de CSS (100%) . Necesitaría ver tu caso en concreto, porque puede ser que tengas algún estilo que esté re-escribiendo algo de por ahí. Si me puedes pasar la URL le podría echar un vistazo más concreto y decirte exactamente qué lineas de CSS debes poner o retocar.

      Otra opción es ponerlo dentro de un iFrame (que, por cierto, es como está aquí) porque entonces todo lo que hagas en él se hace independiente del resto de la página.

      En fin, de opciones hay muchas.

      Ya me dirás.

      Un saludo y gracias otra vez por tu interés. :)

      Marc

      Eliminar
  4. Hola Marc muchas gracias por compartir este recurso, me has sacado de un gran apuro. Pude configurar tus scripts para adaptarlo a un web site que estoy desarrollando. Quisiera saber como hacer para que las fotos grandes tengan liga a páginas internas de mi sitio pero conservando el comportamiento de los botones pequeños, ósea que el link solo lo tenga la foto grande. ¿Me puedes ayudar?

    ResponderEliminar
  5. Hola Charly,

    me alegro que te haya servido.

    Pues en principio no deberías tener ningún problema en hacer eso. Simplemente ponle los enlaces (etiquetas "a") dentro de las capas con clase "img". Al hacer el fadeIn/fadeOut, se esconderán los enlaces también por lo que no deberían solaparse. No lo he probado, pero la lógica me dice que sí.

    Es decir, cada uno de los bloques de imagen quedaría así (nota: he separado las etiquetas "div", "a" e "img" con un espacio antes del "<" porque si no Blogger no me permite publicar):

    < div class="img" id="img-0" style="z-index:0;">
    < a href="LINK_DONDE_QUIERAS">
    < img src="img/img01.jpg" width="700" height="250" />
    < /a>
    < /div>

    Espero que te funcione.

    Un saludo,

    Marc

    ResponderEliminar
  6. Hola nuevamente Marc, muchas gracias por la pronta respuesta. Es correcto lo que dices use la misma lógica que mencionas, coloque un link diferente en cada etiqueta div de la foto pero, el problema que tuve es que cada foto me lleva siempre a la misma pagina, en este caso al último link colocado.

    Tengo conocimientos de HTML pero no domino los javascript por eso ya no le moví mas al código y decidí consultarte. Lo intentare de nuevo, si me aconsejas probar otro método bienvenido. Saludos!

    ResponderEliminar
    Respuestas
    1. Hola Charly,

      vale OK. Es lo que me imaginaba. Entonces te propongo que pruebes lo siguiente:

      Entre el conjunto de divs de las imágenes y el bloque de rapidlinks, añádele un div más (con ID "linkedArea", por ejemplo), con las mismas medidas y posiciones que las imágenes y con z-index:450 (así estará a una profundidad intermedia entre los dos conjuntos y no tapará los rapidlinks).

      En ese div, le pones una imagen transparente (de 1x1 px, por ejemplo) ampliada directamente desde los parámetros "width" y "height" del tag "img" para que ocupe toda la superficie (en el caso del ejemplo, de 700x250 px).

      Pones esa imagen con un enlace (a > img > a) y en el parámetro "href" le pones "#".

      Finalmente, conviertes la función JavaScript "animateChangeRapidLink()" en lo siguiente:

      function animateChangeRapidLink() {
      $(imgDIV+rapidLinkAnterior).fadeTo(secsOfTrans*1000,0,function() {
      $('#linkedArea').attr('href', link_arr[rapidLinkActual]);
      evalRapidLinks();
      });
      }

      Y cambias la definición de parámetros de JavaScript a esto:

      var animationInterval;
      var rapidLinkAnterior = 0;
      var rapidLinkActual = 0;
      var totalRapidLinks = 4;
      var itemsLoaded = 0;
      var link_arr = new Array('http://www.google.com', 'http://marcmateos.blogspot.com', 'http://www.flickr.com', etc);

      Añadiendo la línea "link_arr" creamos un conjunto de links (ordenados igual que el orden de las imagénes) para que JavaScript sepa dónde hay que apuntar ese enlace.

      La idea es que en lugar de tener un enlace para cada imagen, tenemos uno y le modificamos el parámetro "href" mediante JavaScript en función de la imagen que hay visible en ese momento.

      Espero haberlo hecho bien y que se me entienda, porque lo he hecho de cabeza y sin posibilidad de probarlo.

      En unos días haré una segunda versión del plugin para aceptar enlaces, añadiendo esta posibilidad.

      Ya me dirás.

      Un saludo,

      Marc

      Eliminar
    2. Buenos días no tengo muchos conocimientos de html y menos de js, en la prescripción que le mencionas a Charly no entendí muy bien, ya que me sale una serie de errores, espero recibir ayuda. Y gracias por el la ayuda del Slideshow me sirvió bastante. Saludos.

      Eliminar
  7. Hola, me ha interesado mucho esto que has explicado. Me preguntaba si se le puede agregar la opción de trascisión, osea controles en las esquenas para que el pase de imagenes no sea automático.

    Att: Carlos Pérez / Colombia

    ResponderEliminar
  8. Hola, podrìas explicar como quitarle la trascisión automática para que no pase por su cuenta?. Gracias amigo!!!

    CPZ / Colombia

    ResponderEliminar
    Respuestas
    1. Hola CPZCarlos,

      para eliminar la animación automática debes comentar el contenido de la función "initRapidLinks()", dejándola en blanco. De este modo evitas que se inicialice la animación temporizada y solamente quedará la transición manual.

      Un saludo,

      Marc

      Eliminar
  9. Hola Marc Mateos, te agradezco mucho el hecho de responderme en tiempo record.
    Ya me has aclarado la duda para evitar la presentación automática de este slideshow; podrías identificarme la funsión "initRapidLinks", es que soy muy nuevo en los temas de java y se me hace muy dificil encontrar eso q me has dicho.
    Quiero preguntarte ahora lo siguiente:
    Cuando trato de integrar el slideshow en mi web sucede que siempre quedan las imagenes como
    encabezado, creí que era porque faltaba integrarlo a una tabla pero ya el mismo slide
    está integrado a un div, bueno si lo meto en otro div sigue lo mismo.

    ¿como podré ponerlo en cualquier parte de mi web sin necesidad de usar un iFrame?

    Gracias amigo.
    Pd: Disculpa la preguntadera pero no tengo otra opción.
    Pd: Tienes twitter o face o msn?

    ResponderEliminar
    Respuestas
    1. Hola Carlos,

      la función "initRapidLinks()" está dentro del archivo JavaScript. El tema es que las líneas siguientes:

      function initRapidLinks() {
      if(totalRapidLinks > 0) animationInterval = setInterval("changeRapidLink()",secsOfDelay*1000);
      }

      Tienes que poner "//" delante del " if(totalRapidLinks > 0) ………". Es decir, te tiene que quedar así:

      function initRapidLinks() {
      // if(totalRapidLinks > 0) animationInterval = setInterval("changeRapidLink()",secsOfDelay*1000);
      }

      ---------

      El uso de tablas está bastante desaconsejado, hoy en día. Además, no permiten tanta flexibilidad de diseño como el uso de capas (div). Para posicionar el slideshow por dónde tú quieras, tienes que tocar los atributos "top" y "left" de los estilos de #slideshow (en el archivo CSS) (concretamente, el primer grupo:

      #slideshow {
      width:700px;
      height:250px;
      position:absolute;
      top:0px;
      left:0px;
      }

      Poniendo valores distintos de "0px" en "top" (distancia des del márgen superior, en píxeles) y "left" (distancia des del márgen izquierdo, también en píxeles) verás que puedes colocarlo dónde quieras.

      Si lo quieres tener dentro de otro elemento, simplemente cambia el valor de "position" de "absolute" a "relative" y posiblemente esto lo solucione.

      Espero haberte ayudado.

      Un saludo,

      Marc

      P.D.: Nada, para eso estamos. Me gusta interactuar y que sirva de ayuda… :)
      P.D.: Sí, mi Twitter es @mmateosc. Nos vemos por allí… :)

      Eliminar
  10. Nuevamente gracias Marc, te comento como me fué esta vez. Las fotos grandes ya aparecen con hipervinculo, quedo así:

    < div id="slideshow">

    < div class=" img" id=" img-0" style="z-index:0;">< img src=" img/slideshow/img01.jpg" width="968" height="398" />
    < div class=" img" id=" img-1" style="z-index:10;">< img src=" img/slideshow/img02.jpg" width="968" height="398" />
    < div class=" img" id=" img-2" style="z-index:20;"> < img src=" img/slideshow/img03.jpg" width="968" height="398" />
    < div class=" img" id=" img-3" style="z-index:30;">< img src=" img/slideshow/img04.jpg" width="968" height="398" />
    < div class=" img" id=" img-4" style="z-index:40;">< img src=" img/slideshow/img05.jpg" width="968" height="398" />
    < div id="linkedArea">< a href="#">< img src=" img/slideshow/btnLink.png" width="968" height="398" />

    < div id="rapidlinks-btns">

    Pero, no me están llevando al enlace referido en el archivo slideshow.js (actualice la función también).

    Te agradezco tu ayuda seguire pendiente de tus comentarios o en espera de la nueva versión de este super útil recurso.

    Saludos!

    ResponderEliminar
    Respuestas
    1. Hola Charly,

      vale, perdón. Fallo mío. Es lo que pasa por escribir código de cabeza sin poderlo testear.

      Cómo la estructura es div#linkedArea > a (y es la etiqueta "a" la que tiene el atributo "href", y no la capa", la línea que te puse en la función "animateChangeRapidLink()" retocada:

      $('#linkedArea').attr('href', link_arr[rapidLinkActual]);

      Debería ser, en realidad:

      $('#linkedArea a').attr('href', link_arr[rapidLinkActual]);

      Este simple cambio debería solucionar el tema.

      Siento el rato que hayas podido perder con esto… :(

      Un saludo,

      Marc

      Eliminar
  11. comentarte un pequeño "bug" o quizas falta mia de programacion que estoy intentado corregir:

    al dar un link a las 4 imágenes, aunque aparezca la primera imagen, esta hace link a la ultima diapositiva esto es debido a que encima está la capa 2, y encima las 3 y des pues 4 con z-index 30, ais de esta manera solo hace link a la url de la diapositiva 4, estoy intentnado corregirlo quizas puedas guiarme un poco.

    Saludos.

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

    ResponderEliminar
  13. Hola Marc, quisiera que me ayudaras con algo; he estado buscando un efecto muy parecido, por no decir el mismo, a este que te presento en esta dirección: http://www.coldwellbanker.com.co/co/detalleInmueble.aspx?id=50457

    Notese que al darle clic a la imagen del inmueble esta despliega una capara sobre la página para mostrar otra lista de imagenes que pueden pasarse una a una. Podría ud colaborarme con un slideshow parecido a este, ya que hando buscando por todos lados y nada que doy con uno.

    Le agradezco cualquier ayuda que puedas dar!!
    Gracias Marc.

    ResponderEliminar
  14. Hola Marc al contrario, te agradezco mucho el tiempo dedicado en ayudarme. Gracias a tu apoyo he seguido avanzando y aprendiendo en lo que quiero hacer.

    En esta ocasión me topé con un pequeño problema, al cargar la animación, la primer foto grande no funciona el link pero, con las siguientes fotos si esta funcionando, al volverse a iniciar la animación todas funciona ok. Lo que veo es que al recargar o empezar por primera vez esa liga de la primera foto no esta funcionando.

    Algo extra que quisiera añadir es que la transición entre foto y foto sea con un desvanecimiento entre la que sale, con la que entra. Este es un ejemplo de animación al que quiero llegar: http://www.wilmerhale.com/ y con tu ayuda ya casi lo consigo. Muchas gracias.

    ResponderEliminar
  15. Hola!, muchas gracias por el script!, me ayudó muchisimo. El unico problema que tengo es que al agregar otra imagen, el botón cuadro pequeño de rapidlink de la imagen (en este caso la 5) en vez de aparecer al final en linea, aparece abajo del primero, y he encontrado la manera de acomodarlo al final. (Es decir a la derecha)

    ResponderEliminar
    Respuestas
    1. Hola Alex,

      gracias por tus comentarios. Me alegro que te haya gustado.

      El tema que comentas es porque la caja que contiene los rapidlinks está ajustada al ancho de los 4 rapidlinks del ejemplo. Si queréis ponerle más, simplemente hay que darle más ancho.

      La clase CSS que tienes que retocar es la de "#slideshow #rapidlinks-btns". Concretamente, los atributos "width" y "left", siguiendo las instrucciones en comentario que tienen esas lineas (verás que hay fórmulas para calcularlo).

      Otra opción (menos ajustada) es darle un ancho mucho más holgado (de 300 px, por ejemplo) y adaptar la posición "left" para que cuadre con ese nuevo ancho; en este caso 700 - 300 = 400px (para el atributo "left").

      Espero haberte ayudado.

      Un saludo,

      Marc

      Eliminar
  16. Me ha servido de mucho ese slideshow, gracias :D

    Una cosa mas si no es mucho pedir, ¿hay alguna forma de cambiar el estilo de transición?
    En vez de desvanecerse y resurgir, otro diferente.

    ResponderEliminar
  17. Hey muchísimas gracias lo pude resolver perfectamente!, ahora tengo un conflicto al tratar de meter dos slideshows en una sola pagina, solo funciona 1. Y no he encontrado la solución a esto. Espero puedas ayudarme, un saludo!

    ResponderEliminar
  18. Hola Marc tengo una duda tal vez muy simple pero soy nuevo en esto quiero aplicar este slide en un pagina pero me lo coloca en la parte superior izquierda de la pagina y no donde yo coloco el codijo que es dentro de una tabla y me encima parte de texto que tengo en esa area

    ResponderEliminar
  19. Molestandote yo de nuevo!, al lanzarlo en explorer, los rapidlinks (los cuadritos) salen mucho mas grandes como un prisma, a que se debe esto?

    ResponderEliminar
  20. Hola marc, me gusto mucho el slidershow en si todo el post, pero quisiera que me explicara como la puedo ponerlo en mi blog justo de bajo de la cabecera centrado.. mi blog es este espero su respuesta.. y gracias por el aporte http://moment-box.blogspot.com/

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

    ResponderEliminar
  22. ¿Sabes si se le puede agregar hipervinculo a las imágenes?
    Saludos

    ResponderEliminar
  23. HOla, Disculpa estoy utilizando tu slideshow, como puedo hacer para que las transiciones sean mas rapidas? estoy cambiando valores pero no logro dar con el que se encarga del tiempo de transicion.
    me sirvio mucho, muchas gracias :)

    ResponderEliminar
  24. Muchas gracias, medio año para encontrar algo tan sencillo y coherente gracias

    ResponderEliminar
  25. Hola, todo esto me parece francamente muy interesante, pero mi pregunta, donde pongo las fotos? esto lo copio y lo pego en el blog, pero no se donde poner las fotos. Es decir subirlas para que se vean en el blog. Gracias un saludo.

    ResponderEliminar
  26. Hola queria saber como hago para agregar mas imagenes al slideshow quiero que se vean como 20 imagenes

    ResponderEliminar
  27. hola, se ve sencillo, solo que he cambiado la ruta de las fotos pero no aparece nada.. no se si tenga algo que ver con id:"img" puedes ayudarme?? Gracias..

    ResponderEliminar
  28. buenos dias,muchas gracias por tu aporte.
    me da un erro en la fila 4 del .js : " rapidLinkAnterior = rapidLinkActual; "
    me podrias decir a que se debe?
    garcias

    ResponderEliminar
    Respuestas
    1. Si, a mi me da ese error tambièn... le puse un alert pero no me tira el error.

      Eliminar
    2. mmmm… podríais decirme qué error os devuelve la consola? no debería dar ningún error (és el mismo código que tiene el ejemplo funcional…).

      Eliminar
  29. Hola Marc queria saber si se puede crear un slide pero con texto dentro, y que se pueda poner links sobre ellos o sobre la imagen, gracias

    ResponderEliminar
    Respuestas
    1. y si se puede cambiar el efecto al pasar de fotografia a fotografia

      Eliminar
  30. y en que parte se ponen el archivo css y el js

    ResponderEliminar
  31. Hola amigo, una consulta si deseo que esto me aparezca en el centro de una div , mejor dicho centrado, muchas gracias buen aporte.

    ResponderEliminar
  32. ¡Muchísimas gracias! ¡Un post muy útil, aquí te dejo el resultado y no sé programar!

    http://www.olvidomadrid.com/

    Lo que me encantaría saber para un futuro es como cambiar el efecto y en vez de que se desvanezcan las fotos que deslizasen de derecha a izquierda como en esta web > http://www.moisesnieto.com/www/home.html Ojalá tengas un hueco y consigas resolverme la duda ya que he mirado en la web y no encuentro nada...muchas gracias otra vez!

    ResponderEliminar
  33. Buen día Marco. Inserte el slider y se ve de maravilla, el detalle es que aparece en una posicion que no debería, sale en la parte superior izquierda de toda la pagina en vez de salir en el centro en la sección que debería salir según yo. Que podría estar pasando?
    Saludos. Te dejo el link donde estoy haciendo la prueba http://www.diferenciales.com/slideshow-3/

    ResponderEliminar
  34. Hola Marc, tengo un pequeño inconveniente con situar el jQuery no se acopla a mi web, quiero centrarla o colocarla como header y no me deja podrias ayudarme en eso? hasme saber @wedburst

    ResponderEliminar
  35. HOLA MIRA ESTA MUY BIEN TU SLIDE PERO KM YO SOY NUEVO EN ESTO AMI NO ME SALE PRIMERO PUSE EL CSS LUEGO EL JAVA Y POR ULTIMO EL HTML Y NO ME SALE NADA PORFAVOR NECESITO AYUDA

    ResponderEliminar
  36. Hola, me sirvio mucho pero lo que pasa es que las imagenes que quiero poner me apareces aplastadas y no he podido agrandar el slide para que se acomode a mis imagenes, si me pudiera ayudar en eso se lo agradeceria mucho.

    ResponderEliminar
  37. Hola Genio!!!!. Mira como es la informática, que hoy 14/01/2014, todavía sigue funcionando y muy bien.
    Yo lo implementé en una página que la realicé con visual 2010.
    A Felipe, tenes que buscar bien donde cambiar "#slideshow" en css; y en el código fuente de la página lo correspondiente a cada imagen. Un sano consejo, coloca imágenes de pequeño tamaño, caso contrario se hará muy pesado descargar cada una de las fotos.
    Me encanta el código porque es sencillo y de fácil implementación. Saludos!!!

    ResponderEliminar
  38. ABSOLUTAMENTE GENIAL
    El autor ha tenido la extraordinaria habilidad de entregarnos los elementos imprescindibles, esenciales para hacer un slideshow. Estaba completamente desanimado, pues no deseaba estudiar profundamente los codigos, ni hacerlo en un motor online. Muchas, muchas gracias. BT

    ResponderEliminar
  39. Hola Marc. Muy bueno el Slideshow.

    El único problema es ke en IExporer no se ve nada, mientras ke en Firefox va perfecto. Estuve tocando para colocar mas imágenes y dejé de ver los enlaces rápidos cuadrados.

    Un saludo!

    ResponderEliminar
  40. Hola Marc, no puedo hacer que me funcionen los links, no me reconoce el a href. Como puedo solucionarlo? gracias!

    ResponderEliminar
  41. Me pone en el js que hay un error en la línea 5 de sintaxis... =(
    ¿Puedes ayudarme?
    Gracias de antemano.

    ResponderEliminar
  42. Muy buenas Marc, muchas gracias por compartir este recurso. Tengo una web pero he de decir que la he hecho con mucho trabajo y mucho tiempo porque al iniciarla no controlaba nada en absoluto ni de HTML ni de CSS ni nada. Tengo un slideshow en mi web pero no tiene transiciones, ni algunas otras cosas que si posee el que tu propones, y la verdad me gustaría mucho poder implementarlo en mi web. El problema que tengo es que no sé donde he de poner cada parte del código, ni si necesito archivos complementarios, la verdad estoy perdidísimo. Y eso que he mirado un montón de tutoriales.

    Gracias de antemano.

    ResponderEliminar
  43. Mil gracias por este post!!! Me ha venido de maravilla. Como no tengo ni idea de java, espero que no te importe que lo haya copiado para mi futura página web. Ya me las apañaré para poner que eres el autor del slideshow. gracias de nuevo.

    ResponderEliminar
  44. Hola oie tengo una duda, yo yatengo pues el principio de mi pagina este tiene un footer y tiene codigo css, entonces cuando aplico todo tu codigo en mi pagina el codigo de mi footer desaparece y pues mis etiquetas estan algo asi: footer .fcentro nav{ float: right; margin-top:10px;}
    entonces pues no tendria porque quitar las cosas ya que nose heredan ni nada de eso pues mis nav por eso les asigno las etiquetas desde donde estan para que no haya problema :S espero tu pronta respuesta :3

    ResponderEliminar
  45. Hola que tal!! excelente Post!!! Tengo una duda, realice todos los pasos para agregarle link a las imagenes del slideshow y lo hace perfectamente, el problema que tengo ahora es que al entrar por primera vez a la pagina el slideshow solo muestra la imagen 1 y la 3 (se salta la 2 y 4), pero si le hago click a las cuadritos de la dos y la 3 luego si sigue el curso el slideshow y las muestra todas!
    Me podrias ayudar con esto?

    Gracias

    ResponderEliminar