具有渐进式JavaScript的可访问图像库

It’s very easy to create an image gallery with JavaScript, but many developers stop right there. Making the JavaScript progressive (built in such a way that even if it is blocked or fails, functionality is not lost) and accessible (usable by everyone, regardless of their ability) takes only a little extra effort, as this article demonstrates.

使用JavaScript创建图片库非常容易，但是许多开发人员就此止步。 正如本文所演示的那样，使JavaScript渐进式(以某种方式构建，即使它被阻止或失败，功能也不会丢失)和可访问性 (每个人都可以使用，而不管他们的能力如何)仅需花费一点额外的精力，如本文所示。

In this example, I have three images: three thumbnails, linked to the large version of each. It all starts with markup:

在此示例中，我有三张图像：三个缩略图，链接到每个缩略图的大版本。 一切都始于标记：

<section>
	<div id="javascript-gallery" tabindex="0">
		<a href="gorbea-natural-park-spain.jpg">
			<img src="gorbea-natural-park-spain-thumb.jpg" alt="Gorbea Natural Park, Spain">
		</a>
		<a href="otzarreta-forest-bizkaia-spain.jpg">
			<img src="otzarreta-forest-bizkaia-spain-thumb.jpg" alt="Otzarreta Forest, Bizkaia, Spain">
		</a>
		<a href="saint-maria-de-rio-seco-monastary.jpg">
			<img src="saint-maria-de-rio-seco-monastary-thumb.jpg" alt="Saint Maria de Rio Seco-monastery">
		</a>
	<figure id="fullimagecontainer">
	</figure>
</section>

Note the <figure> element at the end, which will contain the large version of the image, generated by JavaScript. Even if that script never loads, clicks on the thumbnail images will bring up the large versions. The tabindex attribute ensures that the list of links is keyboard navigable by pressing the TAB key, with a link activated by pressing Enter.

请注意最后的<figure>元素 ，它将包含由JavaScript生成的图像的大版本。 即使从未加载该脚本，单击缩略图也会显示大字体。 tabindex属性可确保通过按下TAB键可在键盘上导航链接列表，并通过按Enter激活链接。

I’ll arrange the images using flexbox, although there are many other layout possibilities:

我将使用flexbox排列图像，尽管还有许多其他的布局可能性：

section {
	max-width: 800px; margin: 0 auto;
	font-size: 0; background: #000;
}
div#javascript-gallery { display: flex; }
section figure { margin: 0;  }
section figure img {
	width: 100%; height: auto;
}
div#javascript-gallery a {
	flex: 1 1 1%; opacity: .3; transition: .3s;
}
div#javascript-gallery a:hover,
div#javascript-gallery a:focus { 
	opacity: 1; 
}

Each thumbnail is dimmed by default, with a mouse hover or a keyboard focus on a link creating the same visual result.

默认情况下，每个缩略图都是灰色的，将鼠标悬停在键盘上或将鼠标焦点放在创建相同视觉效果的链接上。

The script goes at the end of the page. It starts by identifying the elements that we’re going to work with, creates the large image, and appends it inside the <figure> element:

该脚本位于页面末尾。 首先确定要使用的元素，创建大图像，然后将其附加在<figure>元素内：

var jgallery = document.getElementById("javascript-gallery"),
largeimagecontainer = document.getElementById("fullimagecontainer"),
links = jgallery.getElementsByTagName('a'),
largeimage = document.createElement("img");
largeimage.setAttribute("id", "fullimage");
largeimagecontainer.appendChild(largeimage);

Next, we add a function call to each of the links:

接下来，我们向每个链接添加一个函数调用：

for (var i=0; i<links.length; i++) {
	links[i].onclick = handler;
}

That function prevents the links from working. Instead, it uses the href value from the activated link, and the alt from the image within it, to set the attributes of the large image:

该功能阻止链接工作。 而是使用激活链接中的href值和其中的图像的alt来设置大图像的属性：

function handler(e) {
	e.preventDefault();
	largeimage.setAttribute("src", this.getAttribute("href"));
	largeimage.setAttribute("alt", this.querySelector("img").getAttribute("alt"));
	largeimage.animate([{ opacity: '0'}, { opacity: '1'}], { duration: 500 });
}

Traditionally it’s been very difficult to stop, reset and restart CSS animations. The new Web Animations API addresses that, aligning CSS, JavaScript and SVG animations into one syntax. Right now the Web Animations API is only supported in the latest versions of Chrome, Opera and the Android browser, although work in other browsers is progressing fast: in those browsers, no transition will take place, but the large image will still appear.

传统上，停止，重置和重新启动CSS动画非常困难。 新的Web动画API解决了将CSS ， JavaScript和SVG动画对齐为一种语法的问题。 目前，只有在最新版本的Chrome，Opera和Android浏览器中才支持Web动画API，尽管在其他浏览器中的工作进展很快：在这些浏览器中，不会进行过渡，但仍会显示大图像。

The last thing we need to do is bring up a large image by default: I’ll assume it will be the image associated with the first thumbnail.

我们需要做的最后一件事是默认情况下显示一个大图像：我假设它将是与第一个缩略图关联的图像。

links[0].focus();
links[0].click();

The first of these two lines grabs focus; the second acts as a surrogate click, as if the user has activated the first link. Thereafter, they can use mouse or keyboard navigation to choose whatever image they wish.

这两条线中的第一条引起了人们的关注。 第二个充当替代点击，就好像用户已激活第一个链接一样。 之后，他们可以使用鼠标或键盘导航来选择所需的图像。

结论 (Conclusion)

There are two downsides to this approach:

这种方法有两个缺点：

1. The thumbnail image and its large version contain the same alt information, which by its nature is somewhat limited.

   缩略图图像及其大版本包含相同的alt信息，其本质上受到一定限制。

2. There may be a delay in presenting the large images in bandwidth-limited devices, such as mobile. Pre-loading the large images will eliminate that problem entirely.
   在带宽受限的设备(例如移动设备)中显示大图像可能会有所延迟。 预加载大图像将完全消除该问题。

In the next article, I’ll show how to get around both issues, and improve production workflow, by preloading images and reading metadata with JavaScript.

在下一篇文章中，我将展示如何通过预加载图像和使用JavaScript读取元数据来解决这两个问题并改善生产工作流程。

翻译自: https://thenewcode.com/959/An-Accessible-Image-Gallery-With-Progressive-JavaScript