Amaze UI

Web 组件

Gallery 图片画廊

图片画廊组件，用于展示图片为主体的内容。

目录

<ul data-am-widget="gallery" class="am-gallery sm-block-grid-2
  md-block-grid-3 lg-block-grid-4 am-gallery-default" data-am-gallery="{ pureview: true }">
  <li>
    <div class="am-gallery-item">
      <a href="http://cn.bing.com/az/hprichv/LondonTrainStation_GettyRR_139321755_ZH-CN742316019.jpg">
        <img src="http://cn.bing.com/az/hprichv/LondonTrainStation_GettyRR_139321755_ZH-CN742316019.jpg"
        alt="远方 有一个地方 那里种有我们的梦想" />
        <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/CardinalsBerries_ZH-CN10679090179_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/CardinalsBerries_ZH-CN10679090179_1366x768.jpg"
        alt="某天 也许会相遇 相遇在这个好地方" />
        <h3 class="am-gallery-title">某天 也许会相遇 相遇在这个好地方</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/QingdaoJiaozhou_ZH-CN10690497202_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/QingdaoJiaozhou_ZH-CN10690497202_1366x768.jpg"
        alt="不要太担心 只因为我相信" />
        <h3 class="am-gallery-title">不要太担心 只因为我相信</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/FennecFox_ZH-CN13720911949_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/FennecFox_ZH-CN13720911949_1366x768.jpg"
        alt="终会走过这条遥远的道路" />
        <h3 class="am-gallery-title">终会走过这条遥远的道路</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
</ul>
<ul data-am-widget="gallery" class="am-gallery sm-block-grid-3
  md-block-grid-3 lg-block-grid-4 am-gallery-default" data-am-gallery="{ pureview: true }">
  <li>
    <div class="am-gallery-item">
      <a href="http://cn.bing.com/az/hprichv/LondonTrainStation_GettyRR_139321755_ZH-CN742316019.jpg">
        <img src="http://cn.bing.com/az/hprichv/LondonTrainStation_GettyRR_139321755_ZH-CN742316019.jpg"
        alt="远方 有一个地方 那里种有我们的梦想" />
        <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/CardinalsBerries_ZH-CN10679090179_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/CardinalsBerries_ZH-CN10679090179_1366x768.jpg"
        alt="某天 也许会相遇 相遇在这个好地方" />
        <h3 class="am-gallery-title">某天 也许会相遇 相遇在这个好地方</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/QingdaoJiaozhou_ZH-CN10690497202_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/QingdaoJiaozhou_ZH-CN10690497202_1366x768.jpg"
        alt="不要太担心 只因为我相信" />
        <h3 class="am-gallery-title">不要太担心 只因为我相信</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/FennecFox_ZH-CN13720911949_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/FennecFox_ZH-CN13720911949_1366x768.jpg"
        alt="终会走过这条遥远的道路" />
        <h3 class="am-gallery-title">终会走过这条遥远的道路</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
</ul>
<ul data-am-widget="gallery" class="am-gallery sm-block-grid-2
  md-block-grid-3 lg-block-grid-4 am-gallery-overlay" data-am-gallery="{ pureview: true }">
  <li>
    <div class="am-gallery-item">
      <a href="http://cn.bing.com/az/hprichv/LondonTrainStation_GettyRR_139321755_ZH-CN742316019.jpg">
        <img src="http://cn.bing.com/az/hprichv/LondonTrainStation_GettyRR_139321755_ZH-CN742316019.jpg"
        alt="远方 有一个地方 那里种有我们的梦想" />
        <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/CardinalsBerries_ZH-CN10679090179_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/CardinalsBerries_ZH-CN10679090179_1366x768.jpg"
        alt="某天 也许会相遇 相遇在这个好地方" />
        <h3 class="am-gallery-title">某天 也许会相遇 相遇在这个好地方</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/QingdaoJiaozhou_ZH-CN10690497202_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/QingdaoJiaozhou_ZH-CN10690497202_1366x768.jpg"
        alt="不要太担心 只因为我相信" />
        <h3 class="am-gallery-title">不要太担心 只因为我相信</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/FennecFox_ZH-CN13720911949_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/FennecFox_ZH-CN13720911949_1366x768.jpg"
        alt="终会走过这条遥远的道路" />
        <h3 class="am-gallery-title">终会走过这条遥远的道路</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
</ul>
<ul data-am-widget="gallery" class="am-gallery sm-block-grid-2
  md-block-grid-3 lg-block-grid-4 am-gallery-bordered" data-am-gallery="{  }">
  <li>
    <div class="am-gallery-item">
      <a href="http://cn.bing.com/az/hprichv/LondonTrainStation_GettyRR_139321755_ZH-CN742316019.jpg">
        <img src="http://cn.bing.com/az/hprichv/LondonTrainStation_GettyRR_139321755_ZH-CN742316019.jpg"
        alt="远方 有一个地方 那里种有我们的梦想" />
        <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/CardinalsBerries_ZH-CN10679090179_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/CardinalsBerries_ZH-CN10679090179_1366x768.jpg"
        alt="某天 也许会相遇 相遇在这个好地方" />
        <h3 class="am-gallery-title">某天 也许会相遇 相遇在这个好地方</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/QingdaoJiaozhou_ZH-CN10690497202_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/QingdaoJiaozhou_ZH-CN10690497202_1366x768.jpg"
        alt="不要太担心 只因为我相信" />
        <h3 class="am-gallery-title">不要太担心 只因为我相信</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/FennecFox_ZH-CN13720911949_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/FennecFox_ZH-CN13720911949_1366x768.jpg"
        alt="终会走过这条遥远的道路" />
        <h3 class="am-gallery-title">终会走过这条遥远的道路</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
</ul>
<ul data-am-widget="gallery" class="am-gallery sm-block-grid-2
  md-block-grid-3 lg-block-grid-4 am-gallery-imgbordered" data-am-gallery="{  }">
  <li>
    <div class="am-gallery-item">
      <a href="http://cn.bing.com/az/hprichv/LondonTrainStation_GettyRR_139321755_ZH-CN742316019.jpg">
        <img src="http://cn.bing.com/az/hprichv/LondonTrainStation_GettyRR_139321755_ZH-CN742316019.jpg"
        alt="远方 有一个地方 那里种有我们的梦想" />
        <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/CardinalsBerries_ZH-CN10679090179_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/CardinalsBerries_ZH-CN10679090179_1366x768.jpg"
        alt="某天 也许会相遇 相遇在这个好地方" />
        <h3 class="am-gallery-title">某天 也许会相遇 相遇在这个好地方</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/QingdaoJiaozhou_ZH-CN10690497202_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/QingdaoJiaozhou_ZH-CN10690497202_1366x768.jpg"
        alt="不要太担心 只因为我相信" />
        <h3 class="am-gallery-title">不要太担心 只因为我相信</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="http://s.cn.bing.net/az/hprichbg/rb/FennecFox_ZH-CN13720911949_1366x768.jpg">
        <img src="http://s.cn.bing.net/az/hprichbg/rb/FennecFox_ZH-CN13720911949_1366x768.jpg"
        alt="终会走过这条遥远的道路" />
        <h3 class="am-gallery-title">终会走过这条遥远的道路</h3>
        <div class="am-gallery-desc">2375-09-26</div>
      </a>
    </div>
  </li>
</ul>

使用方法

直接使用

  • 拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（点此下载） <body> 区域；
  • 将示例代码中的内容替换为自己的内容。

使用 Handlebars

本组件 Handlebars partial 名称为 gallery，使用细节参照折叠面板组件。

云适配 WebIDE

  • 将组件拖入编辑界面；
  • 点击右侧面板里的【数据采集】按钮，按以下格式采集数据。
var data = [
  {
    "img": "",      // 图片地址
    "link": "",     // 填写点击图片弹出放大时的图片路径
    "title": "",    // 图片标题
    "desc": ""      // 附加信息，支持DOM，为高级定制提供DOM接口
  }
];
return data;

指定缩略图

基于节省流量考虑，可以指定缩略图，用户点击放大的时候再显示大图。

使用 data-rel

将大图放在 <img> 的 data-rel 属性上。

  • 远方 有一个地方 那里种有我们的梦想

    远方 有一个地方 那里种有我们的梦想

    2375-09-26
  • 某天 也许会相遇 相遇在这个好地方

    某天 也许会相遇 相遇在这个好地方

    2375-09-26
<ul data-am-widget="gallery" class="am-gallery sm-block-grid-2 am-gallery-imgbordered" data-am-gallery="{pureview: 1}">
  <li>
    <div class="am-gallery-item">
      <img src="https://farm4.staticflickr.com/3835/15329524682_2642280b33_z.jpg"
           alt="远方 有一个地方 那里种有我们的梦想" data-rel="https://farm4.staticflickr.com/3835/15329524682_554d4c0886_k.jpg"/>
      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
      <div class="am-gallery-desc">2375-09-26</div>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <img src="https://farm3.staticflickr.com/2941/15346557971_dec5c9ac36_z.jpg"
           alt="某天 也许会相遇 相遇在这个好地方" data-rel="https://farm3.staticflickr.com/2941/15346557971_d8f3d52978_k.jpg"/>
      <h3 class="am-gallery-title">某天 也许会相遇 相遇在这个好地方</h3>
      <div class="am-gallery-desc">2375-09-26</div>
    </div>
  </li>
</ul>

使用链接

设置 target: data-am-gallery="{pureview:{target: 'a'}}"。

从可访性的角度而言，这种方式更好一些：用户再禁用 JavaScript 以后仍然可以打开链接查看大图。

<ul data-am-widget="gallery" class="am-gallery sm-block-grid-2 am-gallery-imgbordered" data-am-gallery="{pureview:{target: 'a'}}">
  <li>
    <div class="am-gallery-item">
      <a href="https://farm4.staticflickr.com/3835/15329524682_554d4c0886_k.jpg" title="远方 有一个地方 那里种有我们的梦想"><img src="https://farm4.staticflickr.com/3835/15329524682_2642280b33_z.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
        <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
        <div class="am-gallery-desc">2375-09-26</div></a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="https://farm3.staticflickr.com/2941/15346557971_d8f3d52978_k.jpg" title="某天 也许会相遇 相遇在这个好地方"><img src="https://farm3.staticflickr.com/2941/15346557971_dec5c9ac36_z.jpg" alt="某天 也许会相遇 相遇在这个好地方"/>
        <h3 class="am-gallery-title">某天 也许会相遇 相遇在这个好地方</h3>
        <div class="am-gallery-desc">2375-09-26</div></a>
    </div>
  </li>
</ul>

数据接口 

{
  // id
  "id": "",

  // 自定义 class
  "className": "",

  // 主题
  "theme": "",

  "options": {
    "cols": 1,  // 列数
    "gallery": false // 是否开启点击图片全屏显示大图功能
  },

  //内容（*为必备项）
  "content": [
    {
      "img": "",
      "link": "", // 链接
      "title": "", // 图片标题
      "desc": "" // 附加信息，支持DOM，为高级定制提供DOM接口
    }
  ]
}
侧栏导航
×
Amaze UI 微信
在微信上关注我们