При нажатии на картинку, чтобы изменить большое изображение в галерее

Question

Я пытаюсь создать следующую галерею:
- одно большое изображение
- Миниатюры изображений галереи ниже
- Большие изображения должны открыть все изображения по клику в a lightbox gallery

У меня есть галерея фотогалерей, работающая с использованием PhotoSwipe, и она срабатывает, когда я нажимаю на большое изображение. У меня также есть миниатюры на месте под большим изображением. Теперь мой вопрос заключается в том, как изменить большое изображение, когда я нажимаю один из миниатюр? Я видел много примеров (также довольно простых), но никто из них, похоже, не работает в моем случае.

Вот код, который я для миниатюры:

<a href="<?php echo $image['url']?>" data-size="<?php echo $image['width']?>x<?php echo $image['height']?>" data-index="0"> 
    <img src="<?php echo $image['url']?>"> 
</a> 

То, что я хочу, что, когда я нажимаю HREF миниатюры, что он изменяет большое изображение, которое дисплей с этим кодом:

<img class="bigimg" src="imageurl.jpg"> 

thumbnail должен иметь тег href, потому что это необходимо для работы функции лайтбокса.

Я видел несколько примеров jQuery, которые заменяют src bigimg на src миниатюры, но я не могу заставить его работать с href также на месте.

Для справки, this is the situation.

Пример: JSFiddle

Answer 1

Try,

var thumbnailLinks = $('a.thumbnailLink') // Add class="thumbnailLink" where appropriate or use a different selector. 
$('.thumbnailLink').click(function() { 
    $('.big a').attr('href', $(this).attr('href')); 
    $('.bigimg').attr('src', $(this).attr('href')); 
}); 

здесь скрипка https://jsfiddle.net/91oq8ja2/2/

Это то, что вы ищете?

Answer 2

Я не близко знаком с лайтбокса, но если я вас правильно понимаю, вы хотите, чтобы делать то, что он уже делает, но в дополнение , измените src вашего img.bigimg. Если это так, то должен работать, чтобы добавить свой собственный прослушиватель в тег a, если вы не предотвращаете действие по умолчанию. Что-то вроде этого:

var thumbnailLinks = $('a.thumbnailLink') // Add class="thumbnailLink" where appropriate or use a different selector. 
thumbnailLinks.on('click', function() { 
    $('img.bigimg').attr('src', $(this).attr('href')); // Set img.bigimg src attribute to the href attribute of the link that was clicked. 
}); 

Возможно, есть некоторые недостатки. Например, я не уверен, что это сработает, если пользователь закроет ссылки и активирует его с помощью ключа enter, хотя для этого нужно добавить другие события, кроме click. Это также непроверенный код на данный момент, но вы можете посмотреть, работает ли он на вас.