如何制作灯箱？：概念

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根据图片的宽度改变灯箱的宽度（添加一些填充以形成边框）。然后，JS将当前显示在灯箱中的图片的src属性更改为http://somewebsite.mr/pics/4.png。这会改变灯箱中的图片......

这是灯箱建造的方式吗？这有效，但我需要确保它是跨浏览器并且无论如何都能正常工作。你能告诉我你对开发灯箱的了解吗？有另一种方式来完成这项工作吗？也许您知道一些可能会损害该计划的问题？

编辑：我担心的是，在灯箱的情况下，图像预加载是否有问题。它会是跨浏览器吗？我知道其余的工作。我只需要知道如何在灯箱中更换图片。我刚接触图像预加载的东西。这是一项主要技术吗？

Answer 1

你的概念听起来很正确。但是，在创建灯箱时，需要注意许多跨浏览器问题。我不知道所有列出它们的手册或文章，但也许​​你可以找到灵感来查看其他灯箱的源代码。我个人已经发现Greg Neustaetter的multi faceted lightbox非常容易理解和定制。