谷歌浏览器缩略图_如何展开类似Google图片的缩略图

Google图片运行着独特的用户界面，其中包含来自许多不同网站的缩略图预览 。 单击这些缩略图中的任何一个，将在屏幕上展开更多详细信息和更大的图片。

这是我使用过的最好的图库功能之一，现在， 您可以使用Gridder.js克隆它 。

这个免费的jQuery插件通过创建与该效果匹配的插件，紧跟Google 令人难以置信的UX的足迹。 您可以将任何图片库变成具有所有相同动画和显示功能的Google图片样式的库 。

这个插件的速度和易用性让我感到惊喜。 只需单击任何缩略图即可立即显示更大的快照 ，并且动画非常干净。

这些图像包括用于描述性文字的部分 ，以防您想添加一些与图片相关的细节或链接。 这对于以图像为重点的简单组合站点尤其有效。

最重要的是，您还可以通过Ajax提取内容 。 这使您可以创建动态缩略图 ，以从其他网站或通过API提取内容。

每个click事件都提供一个回调方法 ，因此您甚至可以与Gridder一起运行其他插件或JavaScript函数。 有这么多的选择，实际上感觉就像是整个网格框架！

由于Gridder 在jQuery上运行 ，因此确实需要最新版本作为依赖项。 但是，这就是您所需要的（以及Gridder.js文件），并且使用几行HTML，您可以使网格平稳运行。

您应该查看GitHub页面以获取完整的安装说明，但是这里是HTML外观的快速预览 ：

<!-- Gridder navigation -->
  <ul class="gridder">
      <li class="gridder-list" data-griddercontent="#content1">
          <img src="http://placehold.it/600x400" />
      </li>

      <!-- You can also load html/ajax pages by replacing the #ID with a URL -->
      <li class="gridder-list" data-griddercontent="/content.html">
          <img src="http://placehold.it/600x400" />
      </li>
  </ul>

  <!-- Gridder content -->
  <div id="content1" class="gridder-content"> Content goes here... </div>

所有内容都通过JavaScript提取 ，因此您可以加载几乎任何所需的内容。

这是一个功能强大的插件，具有用于在用户单击新缩略图时更改动画速度，缓动，关闭按钮样式以及滚动偏移位置的选项。

新手和专业开发人员都会在此插件中找到很多价值。 但是，如果仍然不确定这是否适合您，请查看Gridder演示页面并进行演示 。

翻译自: https://www.hongkiat.com/blog/expand-image-like-google-images/