tga缩略图预览_具有扩展预览的缩略图网格

tga缩略图预览

View demo 查看演示 Download Source 下载源

If you have searched images on Google recently, you might have noticed the interesting expanding preview for a larger image when you click on a thumbnail. It’s a really nice effect and it is very practical, making a search much easier. Today we want to show you how to create a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link.

如果您最近在Google上搜索过图片，则单击缩略图时可能会注意到有趣的扩展预览，可查看更大的图片。 这是一个非常不错的效果，而且非常实用，可以使搜索更加轻松。 今天我们要向您展示如何在缩略图网格上创建类似的效果。 这个想法是在单击缩略图时打开预览，并显示较大的图像和其他一些内容，例如标题，描述和链接。

The interesting part is to calculate the correct preview height and to scroll the page to the right position. We’ll expand the preview in a way so that we can see the respective thumbnail row and cover the rest of the remaining page. Note that we don’t use very large images for the preview in the demo so you might see a lot of empty space on large monitors.

有趣的部分是计算正确的预览高度并将页面滚动到正确的位置。 我们将以某种方式扩展预览，以便我们可以看到相应的缩略图行并覆盖其余页面的其余部分。 请注意，在演示中，我们不会使用非常大的图像进行预览，因此您可能会在大型显示器上看到很多空白。

The demo features some amazing artwork by Jaime Martinez.

该演示以Jaime Martinez的一些令人惊叹的艺术品为特色。

So let’s start!

因此，让我们开始吧！

标记 (The Markup)

Initially, we need a thumbnail grid for which we will use an unordered list. Each list item will contain an anchor which will have several data attributes:

最初，我们需要一个缩略图网格，为此我们将使用无序列表。 每个列表项将包含一个具有多个数据属性的锚点：

<ul id="og-grid" class="og-grid">
	<li>
		<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
			<img src="images/thumbs/1.jpg" alt="img01"/>
		</a>
	</li>
	<li>
		<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/2.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
			<img src="images/thumbs/2.jpg" alt="img02"/>
		</a>
	</li>
	<li><!-- ... --></li>
	<!-- ... -->
</ul>

The href value will be used to construct the link in the preview description (this also comes in handy when JavaScript is disabled). The data-largesrc attribute contains the path to the larger image. data-title and data-description contain the title and description, respectively.

href值将用于在预览描述中构造链接(禁用JavaScript时，这也很方便)。 data-largesrc属性包含指向较大图像的路径。 data-title和data-description包含标题和描述。

When we click on a thumbnail, we want a preview element to appear under the list item. For that we will need to insert an element into the grid. In fact, we will use the list item itself and add the preview element after the anchor:

当我们单击缩略图时，我们希望预览元素出现在列表项下。 为此，我们将需要在网格中插入一个元素。 实际上，我们将使用列表项本身，并在锚点之后添加预览元素：

<li>

	<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/2.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
		<img src="images/thumbs/2.jpg" alt="img02"/>
	</a>
	
	<div class="og-expander">
		<div class=