javascript - 如何制作灯箱？ : concept

Question

想象一个灯箱，里面有一张漂亮的图片，附近有一个按钮可以导航到下一张图片...

当用户点击下一步按钮时，JS 是这样的:

var Image = new Image();
Image.onload = getWidth;
Image.onerror = getFailure; 
Image.src = "http://somewebsite.mr/pics/4.png";

然后当图片加载完成后，JS进入getWidth函数获取图片的宽度:

w = this.width;  //height is not needed as CSS will adjust it correctly

之后，JS根据图片的宽度改变灯箱的宽度(加了一点padding做边框)。然后，JS将当前在灯箱中显示的图片的src属性更改为http://somewebsite.mr/pics/4.png。 .这会更改灯箱中的图片...

灯箱就是这样 build 的吗？这行得通，但我需要确保它是跨浏览器的，并且无论如何都能正常工作。您能告诉我您对开发灯箱了解多少吗？还有另一种方法来完成这项工作吗？也许您知道一些可能会损害该程序的问题？

编辑: 我担心的是在灯箱的情况下图像预加载是否有问题。它会跨浏览器吗？我知道其余的工作。我只需要知道如何更改灯箱中的图片。我只是图像预加载的新手。是主要技术吗？

Answer 1

您的想法听起来不错。但是，在创建灯箱时，需要注意许多跨浏览器问题。我不知道是否有手册或文章将它们全部列出，但也许您可以在查看其他灯箱的源代码时找到灵感。我个人找到了 Greg Neustaetter 的 multi faceted lightbox非常容易理解和定制。