Простой Jquery Gallery Вопрос

Question

Я новичок в Jquery и пытаюсь создать простую галерею.Я знаю, что есть много плагинов, но я не хочу использовать ни один из них.мой вопрос очень прост.Как я могу исчезнуть в изображении, когда нажмите на большой палец.также, как я могу добиться автоматического исчезновения и исчезновения.Я буду очень признателен за любой ответ.спасибо

вот мой код.

// HTML

<div class="LargeImage">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div class="thumbsImages">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
</div>

// JavaScript

$(document).ready(function() {

    var LargeImages = $(".LargeImages").children();
    var SmallImages = $(".thumbsImages").children();


    SmallImages.each(function() {

        SmallImages.click(function() {

            LargeImages.each(function() {

                // I have problem here with logic           
            });

            $(this).addClass("active");
            $(this).siblings().removeClass("active");

        });
    });
});

Answer 1

Идея того, что вы должны делать:

$(document).ready(function()
{
    $('.thumbsImages').click(function()
    {
    var index = $('.active').prevAll('div').length; //number of previous siblings
    $('.LargeImage').find('div:eq('+index+')').fadeOut(500); //hide the actual showed element

    $('.active').removeClass("active"); //remove the active class
            $(this).addClass("active"); //add class to the actual clicked item

            index = $(this).prevAll('div').length; //number of previous siblings
    $('.LargeImage').find('div:eq('+index+')').fadeIn(500); //show the actual selected image
    });
});

Это не совсем оптимизированный кодНо это просто понять.;)

Не знаю, нужно ли вам это, но надеюсь, это поможет!

Answer 2

Вы не хотите вызывать SmallImages.click(...) в пределах SmallImages.each(...), в конечном итоге вы подключите событие click к каждому изображению несколько раз. (click перехватывает обработчик до всех соответствующих элементов внутри экземпляра jQuery, на котором вы его вызываете.)

Вот основной способ сделать то, что вы делаете, без дополнительных div s:

HTML:

<div class="LargeImage">
</div>
<div class="thumbsImages">
<img class="thumb"
     src='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG'
     data-fullsize='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=123&d=identicon&r=PG'>
<img class="thumb"
     src='http://www.gravatar.com/avatar/92e9e88f33ab596fa1caaf237a4d5fad?s=32&d=identicon&r=PG'
     data-fullsize='http://www.gravatar.com/avatar/92e9e88f33ab596fa1caaf237a4d5fad?s=123&d=identicon&r=PG'>
<img class="thumb"
     src='http://www.gravatar.com/avatar/c3203aa647aeb214c463c59f1af2c38f?s=32&d=identicon&r=PG'
     data-fullsize='http://www.gravatar.com/avatar/c3203aa647aeb214c463c59f1af2c38f?s=128&d=identicon&r=PG'>
</div>
</div>

JavaScript:

jQuery(function($) {

  // Look up the large image once and remember it
  var largeImage = $(".LargeImage");

  // Hook the click event on the thumbnails
  $(".thumbsImages img").click(function() {
    var fullsize, hasImage;

    // Get the full size version from the attribute
    fullsize = $(this).attr("data-fullsize");

    // Flag up whether there's current an image in the large area
    hasImage = largeImage.find('img').length == 0;

    // Fade out whatever's there, then fade in the new image;
    // the `hasImage` check just makes the fadeOut really fast if
    // there's nothing showing.
    largeImage.fadeOut(hasImage ? 0 : 250, function() {
      largeImage.html("<img src='" + fullsize + "'>").fadeIn(250);
    });

  });

});​

Живой пример

В основном, то, что я делаю, - это сохранение URL полной версии в элементе img для миниатюры как data-fullsize (префикс data- означает, что атрибут будет проверен в HTML5; В HTML5 нет официального способа иметь свои собственные атрибуты, но браузеры позволяют это, хотя это технически недопустимо). Затем, когда пользователь щелкает изображение, мы исчезаем из того, что отображается в большом элементе div, затем заменяем его на полноразмерное изображение и постепенно увеличиваем.