圖片庫燈箱

Question

目前，我有縮略圖，當我單擊它們時，將在縮略圖右側的div中直接顯示圖片的大版本。 我現在想要做的是單擊div中的較大圖片，然后觸發一個顯示該圖片更大版本的燈箱。

我不太確定該怎么做才是解決方案，所以我將嘗試解釋一下。 我在想，當我單擊div來觸發燈箱時，我想獲取被單擊圖片的src，然后以某種方式將其重定向到我的images文件夾中的另一個src。

例：

當我單擊div中的image時，我得到pic的src，可以說源是：

src =“ redpic.jpg”

然后說在我的圖像文件夾中，我選擇了帶有來源的更大尺寸的圖片：

src =“ redpic_large.jpg”

通過在末尾添加_large並將其附加到我的燈箱中，是否有可能操縱第一個圖像的src img src =“ redpic.jpg”？

每當我嘗試對圖像進行處理時，我似乎總是遇到問題。

當我在控制台中檢入時說src =“ redpic.jpg”，src會顯示為//139.0.0.1:56328/img/dotted.jpg之類的東西，這似乎給我帶來很多問題

Answer 1

當然，您可以像這樣獲取圖像的來源：

$("img").on("click", function(){
   var source = $(this).attr("src");
});

這將為您提供完整的路徑（redpic.jpg）。

您可以使用split()獲取兩個部分的數組（名稱和擴展名）

var parts = source.split("."); 

現在，您要做的就是將“ _large”附加到源的第一部分，將它們重新組合在一起，並將其他圖像的源設置為新組裝的源。

parts[0] += "_large";
var newSource = parts.join(".");

你過去了. 在join功能，因此，它使得在愨你的元素周期，而不是默認的逗號, 。

剩下要做的就是將newSource用作其他圖像的source屬性。

$(".other-image").attr("src", newSource);