0

我发现了这个javascript 插件,它将图像放入响应式网格中,这将在单击时展开图像的大视图(如谷歌图像)。我想修改大视图的结构以显示多张图像而不是一张大图。

有没有办法更改此代码,以便 largesrc 属性不仅仅是指向单个图像的链接,而是图像数组?

html;

<ul id="og-grid" class="og-grid">
  <li>
    <a href="http://example.com" data-largesrc="img/example.jpg" data-title="Example Title" data-description="Example Description">
      <img src="img/example.jpg">
    </a>  

    <div class="og-expander">
      <div class="og-expander-inner">
        <span class="og-close"></span>
        <div class="og-fullimg">
          <div class="og-loading"></div>                      
        <img src="img/example.jpg">
        </div>
      </div>       
      <div class="og-details">
        <h3>Example Heading</h3>
        <p>Example Description</p>
        <a href="http://example.com">Visit website</a>
      </div>
    </div>
 </li>
</ul>

js;

// update preview's content
var $itemEl = this.$item.children('a'),
    eldata = {
        href: $itemEl.attr('href'),
        largesrc: $itemEl.data('largesrc'),
        title: $itemEl.data('title'),
        description: $itemEl.data('description')
    };
4

1 回答 1

0

我不确定你的插件会不会这样做,但看起来有几个灯箱插件可以做到这一点。

http://css-tricks.com/forums/discussion/12174/lightbox-with-multiple-images/p1

于 2013-07-06T09:34:26.300 回答