图片库灯箱

Question

目前我有缩略图，当我单击它们时，图片的大版本会直接出现在缩略图右侧的 div 中。我现在想要做的是单击 div 中较大的图片，然后触发一个灯箱，显示更大版本的图片。

我不太确定如何做我认为的解决方案，所以我将尝试解释。我在想，当我单击 div 以触发灯箱时，我想获取正在单击的图片的 src，然后以某种方式将其重定向到我的图像文件夹中的另一个 src。

例子：

当我单击 div 中的图像时，我得到 pic 的 src 可以说来源是：

src="redpic.jpg"

然后让我们说在我的图片文件夹中，我选择了带有来源的更大版本的图片：

src="redpic_large.jpg"

是否可以通过将 _large 添加到末尾然后将其附加到我的来操作第一张图像 img src="redpic.jpg" 的 src 灯箱？？？

每次我尝试对我的图像做一些事情时，我似乎总是遇到问题。

说 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 作为其他图像的来源属性。

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