图片库灯箱

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);