CSS简单照片库问题

Question

这是我关于Stack Overflow的第一个问题。我听说这个网站对网站开发者来说是一个很好的资源。我是新人，仍在学习，所以这应该很容易。

我正在制作一个照片库，其中包含一些小缩略图和中间的大图像，所有这些都在同一页面上。我想这样做，当你点击每个缩略图时，页面中间的大图像会发生变化。

有没有办法用纯CSS和没有javascript做到这一点？是否也可以预加载所有大图像，这样每次单击缩略图时，中间的大图像都会弹出？

提前感谢您的帮助！我期待经常参加这里！

Answer 1

  

有没有办法用纯CSS和没有javascript做到这一点？

这可能，但在浏览器中得不到很好的支持。

您可以链接到图片并使用:target将display property从无更改为阻止。

问题在于，如果浏览器支持display（即几乎全部）但不支持:target（即很多），那么一些图像将无法使用。

  

是否也可以预加载所有大图像，以便每次单击缩略图时，中间的大图像都会弹出？

这将实现这一点。

然而，预加载所有图像的大版本对用户的带宽来说将是一个非常痛苦的负担。

使用某种形式的包含或服务器端流程复制导航的单个页面仍然是可行的方法。

Answer 2

我认为使用 no Javascript来实现这一目标并不是一个好方法。

使用最少的Javascript，您可以隐藏所有大图像，并使用缩略图上的onClick取消隐藏相应的图像。

使用更多Javascript，您可以继续更改大图片的src属性，并使用Javascript预加载图片（请参阅http://www.pageresource.com/jscript/jpreload.htm）。

Answer 3

google search使用纯CSS带回了一些方法，但我建议使用像galleria这样的jquery插件。 JQuery插件让这很容易。