一个简单的响应式JavaScript图像库

最新推荐文章于 2024-06-21 18:33:55 发布

cungui5726

最新推荐文章于 2024-06-21 18:33:55 发布

阅读量149

点赞数

文章标签： java python css js web ViewUI

原文链接：https://thenewcode.com/284/A-Simple-Responsive-JavaScript-Image-Gallery

版权

I’ve covered basic image galleries with CSS and PHP in previous articles, making it time to do the same thing with JavaScript.

在先前的文章中，我已经介绍了CSS和PHP的基本图像库，因此有时间使用JavaScript进行相同的操作。

图片选项 (Image Options)

As with the other image gallery examples, we need a two versions of each image: a thumbnail image and a full-size image. In this case, you have two options for the images:

与其他图库示例一样，每个图像都需要两个版本：缩略图和全尺寸图像。在这种情况下，您有两个图像选择：

Save the image versions with the same name, placing them in different folders: thumbnails and fullsize. This is probably the best option for sites with many resources, and is the route taken in the code for this article.
用相同的名称保存图像版本，并将其放置在不同的文件夹中 ： 缩略图和完整尺寸 。对于拥有很多资源的网站，这可能是最好的选择，也是本文代码中采用的方法。
Provide the images with different filenames, and store them in the same location: for example, newyork-full.jpg (the fullsize image) and newyork.jpg (the thumbnail). The CodePen demo for this article uses this approach.
提供具有不同文件名的图像，并将它们存储在相同的位置：例如， newyork-full.jpg (完整尺寸的图像)和newyork.jpg (缩略图)。本文的CodePen演示使用这种方法。

标记 (The Markup)

The markup is very similar to previous examples:

标记与之前的示例非常相似：

<div id="gallery">
    <div id="thumbs">
        <input type="image" src="thumbnails/desert.jpg" alt="A broad and empty desert">
        <input type="image" src="thumbnails/watchtower.jpg" alt="An empty watchtower on the edge of the Grand Canyon">
        <input type="image" src="thumbnails/namib.jpg" alt="Pools of salt in the Namib Desert">
    </div>
    <figure>
        <img src="fullsize/desert.jpg" alt id="fullsize">
        <figcaption>A broad and empty desert</figcaption>
    </figure>
</div>

It’s important to provide a full-size image by default; not only does this make the JavaScript easier, but it also presents the visitor with something to look at: a surprising number of web designers assume that users will always click on thumbnails. (Hint: they don’t).

默认情况下提供完整尺寸的图像很重要；这不仅使JavaScript变得更容易，而且还为访问者提供了一些值得关注的东西：数量惊人的Web设计师认为用户将始终单击缩略图。 (提示：他们没有)。

The image input elements make the gallery keyboard navigatable, and thus accessible, as well as providing a pointer hint on hover. Perhaps surprisingly, the element also supports srcset for Retina images. (Read on for an example of this).

图像输入元素使图库键盘可导航，因此可访问，并在悬停时提供指针提示。也许令人惊讶的是，该元素还支持用于视网膜图像的srcset 。 (请继续阅读示例)。

CSS (The CSS)

The easiest way to arrange the gallery is with flexbox:

安排画廊的最简单方法是使用flexbox ：

body { background: #111; color: #fff; }
div#gallery { display: flex; flex-direction: column; }
div#gallery div > input { width: 33%; }
div#gallery figure img { width: 100%; }

The result is what you see at the top of this article.

结果就是您在本文顶部看到的。

剧本 (The Script)

Added to the bottom of the page:

添加到页面底部：

var caption = document.querySelector("#gallery figcaption"),
thumbs = document.getElementById("thumbs"),
fullsize = document.getElementById("fullsize");
thumbs.addEventListener("click", function(e) {
    var filename = e.target.src.split("/").pop();
    fullsize.src = "fullsize/"+filename;
    caption.innerHTML = e.target.alt;
})

An explanation: after identifying the appropriate elements, the script uses event propagation to determine which thumbnail the user has clicked on. The filename for the fullsize image is determined by splitting the file path for the thumbnail into an array and popping off the last element, concatenating the result to fullsize/. The thumbnail image’s alt attribute is used to set the caption text for the fullsize version.

说明：在标识了适当的元素之后，脚本使用事件传播来确定用户单击了哪个缩略图。通过将缩略图的文件路径分成一个数组并弹出最后一个元素，将结果连接为fullsize/ ，可以确定完整尺寸图像的文件名。缩略图的alt属性用于为全尺寸版本设置标题文本。

alt text was different from an appropriate alt文本与适当的 figcaption - as figcaption不同( it often is - you could use 通常如此)，则可以使用 data attributedata属性 data-caption for each thumbnail image, and read it in the script to produce a caption for the fullsize image using data-caption ，然后在脚本中读取它以使用 dataset: dataset为全尺寸图像生成标题：

caption.innerHTML = e.target.dataset.caption;

This variation is shown in the Codepen demo. Alternatively, for greater browser compatibility (since IE10) does not support dataset), you could use getAttribute:

该变化在Codepen演示中显示。另外，为了增强浏览器兼容性(因为IE10不支持dataset )，可以使用getAttribute ：

caption.innerHTML = e.target.getAttribute("data-caption")

添加视网膜支持 (Adding Retina Support)

Adding support for HiDPI images is fairly straightforward. The input elements change to:

添加对HiDPI图像的支持非常简单。输入元素更改为：

<input type="image" src="thumbnails/delicate-arch-moab.jpg"
srcset="thumbnails/delicate-arch-moab-2x.jpg 2x" 
alt="Delicate Arch, Arches National Park, Moab, Utah">

And the script sets both the src and srcset attributes of the large image:

脚本同时设置了大图像的src和srcset属性：

var filename = e.target.src.split("/").pop();
var fileNameArr = filename.split(".");
fullsize.src = "fullsize/"+fileNameArr[0]+"."+fileNameArr[1];
fullsize.srcset = "fullsize/"+fileNameArr[0]+"-2x."+fileNameArr[1]+" 2x";

In this version, the filename is further split to separate out the extension; it is recombined to produce the filename for 2x images (e.g. fullsize/moab-2x.jpg)

在此版本中，文件名会进一步拆分以分隔扩展名。将其重新组合以生成2x图像的文件名(例如fullsize/moab-2x.jpg )

局限性和缺点 (Limitations & Drawbacks)

While effective, there are a few limitations to this technique, at least as presented here:

虽然有效，但至少在这里介绍了此技术的一些局限性：

There is no progressive enhancement to this technique; if the user doesn’t run JavaScript, they won’t see any fullsize image except the default one. See the next article for a possible solution to this problem.
此技术没有逐步增强。如果用户未运行JavaScript，则除默认图片外，他们将看不到其他全尺寸图片。请参阅下一篇文章，以解决此问题。
There is no history of user actions on the page, although this could be added via the History API.
页面上没有用户操作的历史记录，尽管可以通过History API添加。
Unlike the PHP method, there’s no way to direct users to a particular image via a link; again, this could be altered by manipulating and reading the browser URL.
与PHP方法不同，无法通过链接将用户定向到特定图像。同样，可以通过操作和阅读浏览器URL来更改此设置。