Галерея изображений: отключить миниатюру при нажатии - PullRequest
0 голосов
/ 16 мая 2011

Я пытаюсь создать простую «галерею изображений», где у меня есть одна большая фотография и несколько миниатюр. При нажатии на миниатюру большое изображение должно исчезнуть, а затем исчезнуть в новом изображении. Моя проблема в том, что когда я нажимаю на миниатюру, которая представляет текущее «большое изображение», большое изображение исчезает, и большое изображение не отображается. Поэтому я хочу отключить миниатюру, когда она нажата, и ее большое изображение загружено. Любые предложения о том, как это сделать, будут с благодарностью. Мой текущий код выглядит так:

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);  

И мой 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")

Я следовал этому уроку: http://blog.randomutterings.com/articles/2009/02/15/changing-images-with-jquery-and-the-fade-effect

1 Ответ

2 голосов
/ 16 мая 2011

Как насчет проверки, соответствует ли большое изображение большому пальцу?поэтому измените код на

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