單擊縮略圖以更改圖庫中的大圖像

Question

我正在嘗試創建以下畫廊：
-一幅大圖
-下面的畫廊圖像的縮略圖
-大圖片應在燈箱圖庫中單擊后打開所有圖片

我有使用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">

縮略圖需要具有href標記，因為燈箱功能需要此標記。

我已經看到一些jQuery示例，它們用縮略圖的src替換了bigimg的src，但是我不能完全將它與href一起使用。

供參考， 這是情況。

示例： JSFiddle

Answer 1

我對lightbox並不是很熟悉，但是如果我正確理解了lightbox，則希望它只做已經做的事情，而且還要更改img.bigimg的src。 如果是這樣的話，它應該工作，以增加自己的聽眾在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以幫助之外，還可以添加其他事件。 目前，這也是未經測試的代碼，但請試試看它是否對您有用。

Answer 2

嘗試，

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/

這是你想要的？