JMiur [E]

Esta es una variación del ejemplo anterior donde se utilizaban transiciones para crear algo similar a un slider de imágenes.

En este caso, en lugar de desplazar el contenedor, intentaremos que las imágenes se muestren con un efecto de fade y por lo tanto, aunque los principios son los mismos, la forma de detectar las cosas variará y necesitaremos más datos para identificar cada imagen.

Otra vez, armamos una lista con imágenes del mismo tamaño con una serie de enlaces debajo de ella:
<div id="demoANIM2">
  <div id="demoANIM2imagenes">
    <img id="img_1" src="URL_IMAGEN1" class="visible" />
    <img id="img_2" src="URL_IMAGEN2" class="novisible" />
    <img id="img_3" src="URL_IMAGEN3" class="novisible" />
    <-- agregamos todas las que se nos ocurran (en el ejemplo hay siete) -->
    <img id="img_7" src="URL_IMAGEN7" class="novisible" />
  </div>
</div>
<div id="demoANIM2links">
  <a onclick="srcdemoANIM2(1);" href="javascript:void(0);">1</a>
  <a onclick="srcdemoANIM2(2);" href="javascript:void(0);">2</a>
  <a onclick="srcdemoANIM2(3);" href="javascript:void(0);">3</a>
  <-- agregamos un enlace para cada una de las imágenes -->
  <a onclick="srcdemoANIM2(7);" href="javascript:void(0);">7</a>
</div>

La diferencia básica es que acá le agregamos un ID distinto a cada imagen y una clase que será class="visible" en la primera o en aquella que querramos mostrar por defecto y class="novisible" en el resto de ellas.

Por supuesto, el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio:
<style>
  #demoANIM2 { /* es el DIV contenedor */
    /* lo dimensiono del mismo tamaño que la imagen (en este ejemplo de 500x375) */
    height: 375px;
    width: 500px;
    margin: 0 auto; /* lo centro */
    overflow: hidden; /* impido que se deborde */
    position: relative; /* establezco esta propiedad para poder ubicar las imágenes de manera absoluta */
  }
  #demoANIM2imagenes img { /* las imágenes */
    /* lo fijo arriba */
    position:absolute;
    left: 0;
    top: 0;
    /* fuerzo a que las imágenes se vean todas iguales */
    height: 375px;
    width: 500px;
    /* y le digo que cualquier cambio sea animado */
    -moz-transition:all 1s ease-in-out;
    -webkit-transition:all 1s.ease-in-out;
    -o-transition:all 1s.ease-in-out;
    transition:all 1s ease-in-out;
  }
  #demoANIM2imagenes img.visible { /* la imagen es visible */
    opacity:1;
    filter: alpha(opacity=100);
  }
  #demoANIM2imagenes img.novisible {  /* la imagen está oculta */
    opacity:0;
    filter: alpha(opacity=0);
  }
  /* y le pongo un poc de estilo a los numeritos que sirven de enlace */
  #demoANIM2links {
    border-bottom: 1px solid #345;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    width: 500px;
  }
  #demoANIM2links a {
    background-color: #345;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 4px #ABC inset;
    margin: 0 2px;
    padding: 4px 8px;
  }
  #demoANIM2links a:hover {
    box-shadow: 0 0 8px #ABC inset;
    color: #FFF;
  }
</style>
Lo que haremos para que esto funcione como slideshow es variar la opacidad de las imágenes permutando su clase y eso lo haremos con JavaScript:
<script>
//<![CDATA[
// establezco cuál es la imagen visible inicial
var imgvisible = "img_1";

function srcdemoANIM2(num) {
  // la imagen a ser mostrada
  var id = "img_" + num;
  var mostrar = document.getElementById(id);
  // la que ahora esta visible
  var actual = document.getElementById(imgvisible);
  // si son la misma no hago nada
  if(mostrar==actual) {return false;}
  // permutos su clase ocultando la visible y mostrando otra
  actual.className="novisible";
  mostrar.className="visible";
  // y guardo ese dato
  imgvisible = id;
}
//]]>
</script>
En Firefox 4, Safari, Chrome y Opera veremos como las imágenes aparecencon un efecto de fade y en el resto de los navegadores se mostrarán de manera simple.

16 comentarios:

Pandora  

Hola Jmuir, primero agradecerte porque tu blog me ha servidode mucho, soy nueva en esto y no se nada de nada, pero con respecto a los slide, puedo dar un aporte.
Yo uso un programa llamado wondershare flash slideshow, con el, hago el slide,tiene para guardar en varios formatos, yo lo guardo en formato .swf, lo subo a un servidor y lo coloco en el blog como un gadget con el codigo flash.
Puedes ver mi blog aqui: http://sinfonia-sinfoniadecolor.blogspot.com/
aunque todavia no esta terminado.
No se si me he explicado bien, pero no queria dejar pasar esto que creo es interesante para no estar cambiado codigos constantemente.
Saluditos

Responder
Henry Herrera  

Ants que todo buen dia, queria preguntarte en que parte de mi plantilla pego el
"<![CDATA[....."

y si trabaja con jquery o mootols o no son necesarios.

Responder
Unknown  

Hola Jmiur soy David y tengo un problema con el Slider de nustra web y no se como arreglarlo, resulta que cuando entras salen todas las imagenes del Slider de golpe durante varios segundos ,¿ no hay ninguna manera de que no carguen asi? mi pagina es return222.com , y otro problema que tengo es que mis links no salen en portada y no se como hacer para que salgan , tu crees que podrias ayudarme ? muchisimas gracias de antemano eres mi unica esperanza

Responder
JMiur  

Henry:
El script lo colocas donde queiras. Ya sea en la plantilla, en un elemento HTML o en una entrada. No requiere librerías de ninguna clase asi que funcionará en cualquier caso.

CURI:
Puedo darte la idea pero no la solución concreta porque el script que usas está minimizado así que me resulta imposible comprenderlo.
De alguna manera, deberás ocultar las imágenes para que no sean mostradas hasta que no se carguen; por eejmplo, poniédole display none o visibility: hidden a ese rectángulo y hacerlo visible recién cuando se haya cargado la página.
Otra alternativa es intentar precargar las imágenes previamente proque son muchas y evidentemente, ahy una demora en esa parte por lo que el efecto al entrar es desagradable.

Responder
Henry Herrera  

Gracias por responderme JMiur

Responder
christian neyra  

Hola amigo , yo volviendo después de mucho tiempo aunque siempre me paso para revisar tu blog ya que es muy interesante ,me gustaria consultarte algo y espero que tengas una respuesta como casi siempre jejeje , bueno resulta que estoy creando una nueva plantilla nueva para mi blog , y en verdad no siempre encuentras lo que quieres aunque estoy editandola a mi gusto poco a poco no encuentro lo único que me gustaria es buscar algo parecido a esta página http://www.vandal.net/ donde muestra una galeria no se oomo llamarlo ,imágenes pequeñas y las imágenes grandes con una descripción que lo hace muy atractivo me podrías buscar algo lo maás parecido ? necesito ayuda por favor amigo espeor una respuesta un saludo y gracias pro adelantado.

Responder
JMiur  

No sé cuál es la galería a la que te refieres. Veo entradas dondes e muestra una miniatura y abren páginas.

Responder
Unknown  

Jmiur, podrás darme una idea del por qué los números me salen de manera vertical? muchas gracias!

Responder
JMiur  

¿Dónde hay un ejemplo que pueda ver así me fijo?

Responder
Unknown  

En el mismo palomas
http://gracielaroth.blogspot.com/2011/06/probando-galeria-jmiur.html

Responder
JMiur  

Sólo debés sacarle el salto de línea entre los enlaces. Para que sea fácil, agregá esto:

#demoANIM2links br { display: none; }

Sino, se los quitás en el post mismo colcoando todos los enlaces en la misma línea.

Responder
Unknown  

Tanti gracias Jorge!
Ahora? a darle los colores :P

Responder
JMiur  

Perfecto. A colorear nomás :D

Responder
a  

Hola ante todo muchas gracias por el código.. pero tengo un problema te dejo mi web para que lo veas tu mismo, para ver si me podes dar una mano.. http://egoolincoln.com/Nochefenix.html , espero tu respuesta..gracias.

Responder
JMiur  

Eso ocuure proque estás usando un archivo externo para cargar las reglas de estilo: templatemo_style.css

y esos archivos, sólo deben contener las reglas y no las etiquetas tales como <style> y </style>

debes quitar esas etiquetas del archivo

Responder
a  

Muchas gracias JMiur...me salvaste.. te agradezco mucho.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR