JMiur [E]

Eso de permutar imágenes, es lo que hace cualquier script de slideshows; lo hará de modo sencillo o lo hará de modo complejo pero, conceptualmente, hacen eso, usan JavaScript para cambiar una propiedad específica que es la que contiene la dirección URL de la imagen que estamos viendo.

Supongamos que diseñaramos algo así:


la primera de las imagenes

<style>
  div.demoSW {
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 326px;
  }
  div.demoSW img {
    background-color: #FFF;
    border: 3px solid #BBB;
    height: 190px;
    outline: 1px solid #FFF;
    padding: 10px;
    width: 300px;
  }
  div.demoSW span {
    color: #EEE;
    display: block;
    font-family: Georgia;
    font-size: 20px;
    letter-spacing: -1px;
    outline: 1px solid #444;
    padding: 5px 0;
  }
  div.demoSW div a {
    color: #AAA;
    font-family: Georgia;
    text-decoration: none;
  }
  div.demoSW div {
    margin:5px 0 0 0;
  }
  div.demoSW div a:hover {
    color:#FFF;
    text-decoration: none;
  }
</style>

<div class="demoSW">
  <img id="misfotos" src="URL_imagen_1" />
  <span id="mistextos"> la primera de las imagenes </span>
  <div>
    <a href="#"> anterior </a> | <a href="#"> siguiente </a>
  </div>
</div>

La idea es que cuando hagamos click en los enlaces anterior y siguiente, podamos navegar por otras imágenes y claro, así como está, no funcionará porque, como siempre, el tema es decirle al navegador cuáles son las imagenes que usaremos y para eso hay métodos diversos, dependiendo de ellos, nuestro script será más o menos flexible, podremos colocar uno solo de ellos por página o podremos colocar varios. Lo más simple, claro, es lo menos flexible pero así es la vida.

Lo que vamos a hacer entonces es usar un array que no es otra cosa que un conjunto de datos asociados a un nombre a los que podemos acceder con un índice. Muchas palabras raras pero veamos:
var meses = new Array();
meses[0] = "enero";
meses[1] = "febrero";
meses[2] = "marzo";
Son "variables" similares a las que utilizamos normalmente excepto que todas tienen el mismo nombre y se las diferencia por el número de orden que siempre comienza con cero.

No hace falta definirlas de ese modo, también podemos hacerlo en una sola línea:
var meses = new Array("enero","febrero","marzo");
Así que, para este ejemplo, voy a usar dos arrays; la primera contendrá la dirección URL de una serie de imágenes y la segunda, los textos asociados a cada una de esas imágenes:
var foto = new Array();
foto[0] = "URL_imagen_1.png";
foto[1] = "URL_imagen_2.png";
foto[2] = "URL_imagen_3.png";
foto[3] = "URL_imagen_4.png";
foto[4] = "URL_imagen_5.png";

var texto = new Array();
texto[0] = "la primera de las imagenes";
texto[1] = "esta es la segunda";
texto[2] = "esta es al tercera";
texto[3] = "y casi vamos a terminar";
texto[4] = "la ultima de las imagenes";
Los arrays tienen muchas funciones y propiedades internas que podemos utilizar, ahora, nos limitaremos a una de ellas que es la que nos dice cuántos elementos tiene:
var cantidad = foto.length;
que en este caso nos dirá 5 ya que tenemos elementos numerados desde el cero al cuatro; es decir tenemos cinco imágenes y cinco textos.

Ahora, vamos a crear una función para manipular las etiquetas IMG y SPAN a las que hemos identificado como misfotos y mistextos con respectivos IDs. La llamaremos mover y le enviaremos un dato; para decirle que queremos ir hacia atrás le enviaremos un -1 y para decirle que queremos ir hacia adelante, le enviaremos un 1 así que mover(-1) debería mostrar la imagen anterior y mover(1) debería mostrar la imagen siguiente.

Pero necesitamos un dato más, debemos llevar la cuenta, saber cuál es la imagen que estamos viendo para poder saber cuál es la siguiente y cuál es la anterior así que la guardaremos en alguna parte y al inicio, su valor será cero ya que la imagen visible es la primera:
var cualvemos = 0;

function mover(direccion) {

  // accedemos al objeto que contiene la imagen
  var laimagen = document.getElementById("misfotos");

  // accedemos al objeto que contiene el texto
  var eltexto = document.getElementById("mistextos");

  // ¿cuál es el indice de la última imágenes en nuestra array?
  var ultima = foto.length - 1; // en el ejemplo, será el 4
  
  // antes de cambiar los datos, en un auxilar, verificamos cuál sería la imagen a mostrar
  var auxiliar = cualvemos + direccion; // se sumará 1 o se restará 1 al índice
  // si el resultado es menor que cero, le decimos que vaya al otro extremo y muestre la ultima
  if(auxiliar < 0) { auxiliar = ultima; }
  // si el resultado es mayor que la última, le decimos que vaya al otro extremo y muestre la primera
  if(auxiliar > ultima) { auxiliar = 0; }
  
  // listo, ahora ya podemos cambiar el dato sin problemas
  cualvemos = auxiliar;
  
  // ponemos la dirección URL de la imagen en la etiqueta IMG
  laimagen.src = foto[cualvemos];

  // ponemos el texto en la etiqueta SPAN
  eltexto.innerHTML = texto[cualvemos];

}
Así que, para que el ejemplo funcione, bastará entonces cambiar los enlaces y llamar a la función que acabamos de crear:
<a href="javascript:mover(-1);"> anterior </a> | <a href="javascript:mover(1);"> siguiente </a>

la primera de las imagenes

29 comentarios:

Santi Folch  

Caray qué complicado... Lo bueno es que según veo JavaScript se parece a PHP, aprendiendo un lenguaje de programación te vale para otros...

Gracias J, el tutorial está muy bien. A ver si un día me siento tranquilamente y hago un par de ejemplos para asentar conocimientos.

Responder
Fanatico  

Genial estaba esperando algo así...me va a servir mucho..Gracias por compartir

Responder
Domin-Omega  

¿Y cómo se logra la galería que tiene usted aquí Network Rebellion?

Responder
Manfenix  

Qué buen capítulo de "JavaScript Reloaded"... espero el siguiente, :D

Responder
JMiur  

Seguiremos intentándolo, Manfenix :-)

Domin-Omega: esa galería la puedes ver acá.

Responder
Adrián J. Messina  

¡Esto tiene muy buena pinta!
Me parece que me leíste la mente, era esto lo que tenía pensado.

¿Se podrá colocar un efecto tipo toogle cuanda pasa de imagen a imagen?

Vamos a probarlo mientras tanto.

¡Saludos!

Responder
JMiur  

Se puede hacer cualquier cosa, la idea del post es simplemente mostrar algunos de los procedimientos elementales; el resto queda librado a la imaginación y la paciencia de cada uno :D

Responder
Daniel  

Hola este es mi blog http://todojuguetechile.blogspot.com/..he instalado un slider de imagenes, pero deseo agregarles borde a las imagenes e insertar texto sobre las mismas. ¿Como puedo hacerlo?

Gracias.

Responder
JMiur  

Daniel. Si se trata del slider que aparece debajo de PORTADA de tu blog, No sé cuál, deberías consultar en el sitio de donde has tomado el código y ver si es posible hacer eso que necesitas.

Responder
Manfenix  

Galería funcionando a pleno:
Galería

Responder
JMiur  

Bien. Quedó muy bien :D

Responder
VirusKeys  

Hola, soy totalmente nuevo en esto de blogger, esta galeria es justo lo que necesito para mi blog. Seguro debido a mi ignorancia, en este tema, no me sale colocar esta galeria a mi blog. Lo unico que sé que el CSS va antes de /head, el div de demoSW no sé donde ponerlo; el "var de texto" y el var de foto no sé donde colocarlo, y tampoco sé donde poner el "var cualvemos". En conclusión no sé nada, no sé si fuera tan amable que me especificaras cómo colocar esta galeria que es, en realidad, lo que necesito; se lo agradesco y espero su respuesta. Gracias.

Responder
JMiur  

Esto no es una galería para isertar, es, tal como dice la entrada, la continaucion de cómo se trabaja con JavaScript y qué cosas pueden hacerse.

Responder
Tienda Claro Perú  

Hola, he intentado colocar solo 4 imagenes, osea he borrado el foto[4] y texto [4], pero al guardarlo no me funciona; pero al volver al colocar el foto[4], osea tener 5 imagenes, sí me funciona, ¿a que se debe eso? Gracias.

Responder
JMiur  

Debe ser algún error de sintaxis al borrarla porque la cantidad de imágenes es indistinta, no tiene limitaciones. Si me muestras el ejemplo con el error, me fijo.

Responder
Aparicio  

Hola, muchas gracias por estos mini tutoriales.Yo he colocado esta galería en una web que estoy haciendo, pero me gustaría tener el código javascript en un archivo aparte y vincularlo. He copiado el código tal cual y lo he vinculado en mi html pero me da error, ¿tengo que cambiar algo o añadir para vincularlo externamente?

Muchas gracias

Responder
JMiur  

No, no hay nada especial que deba ser agregado. Tendrías que verificar que el archivo se cargue correctamente.

Responder
benifofi  

Hola muchas gracias por el tutorial. Me gustaría que cambiara el ancho de la galería ya que dispongo de fotos en horizontal y vertical. Hay alguna forma de que se ajuste solo dependiendo de la foto.
Muchas gracias.

JMiur  

Eso requeriría de otro tipo de script más sofisticado.

Responder
cynthia  

esta parte del codigo donde va escrito
var foto = new Array();
foto[0] = "URL_imagen_1.png";
foto[1] = "URL_imagen_2.png";
foto[2] = "URL_imagen_3.png";
foto[3] = "URL_imagen_4.png";
foto[4] = "URL_imagen_5.png";

var texto = new Array();
texto[0] = "la primera de las imagenes";
texto[1] = "esta es la segunda";
texto[2] = "esta es al tercera";
texto[3] = "y casi vamos a terminar";
texto[4] = "la ultima de las imagenes";

por mas que intento, no me resulta mostrar mi galeria de imagenes

JMiur  

Eso es un script así que se coloca entre etiquetas <script> y </script>

Responder
freedom135  

muchas gracias.

Responder
Bonzu Pipinpadaloxicopolis III  

Hola JMiur, ¿puede crearse un enlace que apunte directamente a una una imagen?

JMiur  

Si te refieres al este ejemplo puedes intentar cambiar las etiquetas IMG por enlaces:

<a href="direccion"><img id="misfotos" src="URL_imagen_1" /</a>

o agregarle un atributo onclick a la etiqueta img:

<img onclick="document.location.href = 'URL_imagen_1';" id="misfotos" src="URL_imagen_1" /</a>

Responder
Josue Castillo Arias  

Muy buenos post ya son varios que me han ayudado mucho, gracias.

Responder
ana toledo  

Muy bueno, lo hice, el único inconveniente es empotrarlo en el otro div que tengo. Me recomendaron ponerle position: absolute; a este visor pero no resulta, me podrías dar una sugerencia??

JMiur  

No sé cuál es tu ejemplo.

Responder
Arfas  

Hola! Me va perfecto, solamente que no me aparece la imagen y texto 1 como iniciales, al darle a siguiente me aparece la 2, pero es como si la 1 no se pudiera ver si no es dandole a los botones

JMiur  

imposible saberlo sin ver el ejemplo

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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