Как изменить миниатюры галереи из динамического идентификатора с помощью функции jquery? - PullRequest
Новая
       20

Как изменить миниатюры галереи из динамического идентификатора с помощью функции jquery?

0 голосов
/ 10 марта 2011

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

Вот что я хотел быdo:

У меня было два отдельных неупорядоченных списка.Первый держит большие картинки, второй держит большие пальцы.Оба элемента списка имеют одинаковые номера идентификаторов, но разные имена идентификаторов.Идентификаторы больших изображений: «Предварительный просмотр-1», «Предварительный просмотр-2» и т. Д., А идентификаторы «Эскизы» - «Миниатюра-1», «Миниатюра-2» и т. Д.

.большой, когда пользователь нажимает на него.

Например: если я нажму на id = "thumbnail-3", то большой img id = "preview-3" должен исчезнуть сразу после исчезновения текущего большого изображения,

Вот мой пример HTML 

<ul class="previews">
<li id="preview-10"><a class="gallery product_2 jqzoom" href="foto1_lg.jpg"><img width="314" height="450" src="foto1.jpg"></a></li>
<li id="preview-11"><a class="gallery product_2 jqzoom" href="foto2_lg.jpg"><img width="314" height="450" src="foto2.jpg"></a></li>
<li id="preview-12"><a class="gallery product_2 jqzoom" href="foto3_lg.jpg"><img width="314" height="450" src="foto3.jpg"></a></li>
<li id="preview-13"><a class="gallery product_2 jqzoom" href="foto4_lg.jpg"><img width="314" height="450" src="foto4.jpg"></a></li>
<li id="preview-14"><a class="gallery product_2 jqzoom" href="foto5_lg.jpg"><img width="314" height="450" src="foto5.jpg"></a></li>
<li id="preview-15"><a class="gallery product_2 jqzoom" href="foto6_lg.jpg"><img width="314" height="450" src="foto6.jpg"></a></li>

Это окно с большим изображением

И .. 

<ul class="thumbnails">
<li id="thumbnail-10"><img width="70" height="70" src="tn1.jpg"></li>
<li id="thumbnail-11"><img width="70" height="70" src="tn2.jpg"></li>
<li id="thumbnail-12"><img width="70" height="70" src="tn3.jpg"></li>
<li id="thumbnail-13"><img width="70" height="70" src="tn4.jpg"></li>
<li id="thumbnail-14"><img width="70" height="70" src="tn5.jpg"></li>
<li id="thumbnail-15"><img width="70" height="70" src="tn6.jpg"></li>

Это поле для миниатюр.

Надеюсь, вы, ребята, помогите мне в этом.

Спасибо!

ОБНОВЛЕНО

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

1 Ответ

0 голосов
/ 10 марта 2011

Если оба списка расположены в одном и том же порядке, я имею в виду миниатюры и соответствующие им предварительные просмотры, которые находятся в одном и том же месте в их списках, тогда ваша проблема может быть решена даже без использования этих идентификаторов.

Решение с использованием идентификатора 

$('ul.thumbnails > li').click(function() {
    var preview_id = 'preview-' + $(this).attr('id').split('-')[1];

    $('ul.previews > li:visible').fadeOut('normal', function() {
            $('#'+preview_id).fadeIn();
    }); 
});

Без использования идентификатора 

$('ul.thumbnails > li').click(function() {
    var thumb_number = $(this).index();

    $('ul.previews > li:visible').fadeOut('normal', function() {
            $('ul.previews > li').eq(thumb_number).fadeIn();
    }); 
});

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

...