JQuery галерея исчезать / выходить

Question

Я создаю простую галерею изображений на основе следующей разметки:

<div id="image-list">
<ul>
<li id="image-1">
<img src="myimage1.jpg" width="500" height="500" alt="My Image" />
</li>
<li id="image-2">
<img src="myimage2.jpg" width="500" height="500" alt="My Image" />
</li>
<li id="image-3">
<img src="myimage3.jpg" width="500" height="500" alt="My Image" />
</li>
</ul>
</div>
<ul id="thumb-list">
<li id="thumb-1"><img src="myimage1-thumb.jpg" width="50" height="50" alt="My Image" /></li>
<li id="thumb-2"><img src="myimage2-thumb.jpg" width="50" height="50" alt="My Image" /></li>
<li id="thumb-3"><img src="myimage3-thumb.jpg" width="50" height="50" alt="My Image" /></li>
</ul>

Я сделал это с помощью CSS, чтобы за один раз было видно только одно из больших изображений (с использованием переполнения: скрыто с фиксированной высотой контейнера).

Затем я использую jquery для абсолютного позиционирования UL внутри контейнера, чтобы показать каждое изображение, используя следующую разметку:

$('#thumb-list li img').click(function() {
    var image = $(this).parent().attr('id').substring(6);
    var position = $('#image-' + image).position();
    $("#image-list ul").css({'top' : '-' + position.top +'px'});
});

По сути, я хочу постепенно исчезнуть "# image-list ul", пока изменяется его положение, а затем постепенно вернуть его, чтобы показать новое изображение.

Может ли кто-нибудь предложить наиболее эффективный способ сделать это? - любая помощь очень ценится!

Answer 1

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

Выезд: http://medienfreunde.com/lab/innerfade/

Это довольно просто и сложно испортить. Удачи! :)

Answer 2

Снимите высоту и ширину с ваших тегов img, css может позаботиться об этом.

CSS

# изображения список {

      position:relative; 
      height:500px;
      width:500px;

}

# image-list img {

      height:500px;
      width:500px;

}

# image-list li {

      position:absolute;
      top:0;
      right:0;

} * * тысяча двадцать-один

JS

$ ('# thumb-list li img'). Click (function () {

      var image = $(this).parent().attr('id').substring(6);
      $('#image-' + image).fadeIn("slow").siblings().fadeOut("slow");

}); * * одна тысяча тридцать два

вы используете прототип или jquery?

если вы используете jquery, вместо того, чтобы полагаться на функцию .css(), попробуйте функцию .hide(), поскольку она делает то же самое, что и css({'display' : 'none'}). и .fadeIn() оживит возвращение вашего div. при первой загрузке все они будут видны, поэтому вместо того, чтобы скрывать их с помощью css, скажите jquery скрыть их всех с помощью этой команды.

$ ('# thumb-list il'). Hide ();