Galería de imágenes: deshabilite la miniatura al hacer clic

Estoy tratando de crear una "galería de imágenes" simple donde tengo una foto grande y un par de miniaturas. Cuando se hace clic en una miniatura, la imagen grande debería desaparecer y luego desaparecer en la nueva imagen. Mi problema es que cuando hago clic en la miniatura que representa la "imagen grande" actual, la imagen grande se desvanece y no se muestra ninguna imagen grande. Por lo tanto, quiero deshabilitar la miniatura una vez que se hace clic y se ha cargado su imagen grande. Cualquier sugerencia sobre cómo hacer esto será muy apreciada. Mi código actual se ve así:

application.js

function addClickHandlers(){
  var large_image = document.getElementById("large_image")
  var thumbnail = $('img.thumbnail')

  // Adds click handlers to image thumbnails that update the larger image
  $(thumbnail, this).click(function() {
    src = this.src.replace("thumb", "large")
    $(large_image).fadeOut(200, function(){
      $(large_image).attr('src', src).bind('readystatechange load', function(){
        if  (this.complete) $(this).fadeIn(400);
      });
    });
  });
};

$(document).ready(addClickHandlers);  

Y mi HTML / HAML

.big_photo
  = image_tag(@tee.tee_images.first.photo.url(:large), :id => "large_image")
- tee.tee_images.each do |image|
  = image_tag(image.photo.url(:thumb), :class => "thumbnail")

He seguido este tutorial: http://blog.randomutterings.com/articles/2009/02/15/changing-images-with-jquery-and-the-fade-effect

preguntado el 16 de mayo de 11 a las 19:05

1 Respuestas

¿Qué tal comprobar si la imagen grande coincide con el pulgar? así que cambia el código a

$(thumbnail, this).click(function() {
  src = this.src.replace("thumb", "large");
  if (src != large_image.src)
    $(large_image).fadeOut(200, function(){

contestado el 16 de mayo de 11 a las 23:05

¡Gracias! Eso funcionó a las mil maravillas. Necesito mejorar mis habilidades js. :D - Anders

@Anders, aceptar la respuesta es simplemente hacer clic en el cheque debajo de la sección de votación de la respuesta. - James

Casilla de verificación - ¡Listo! ¡Y gracias de nuevo! (No pude votar su respuesta, no tengo suficiente representante) - Anders

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.