画像をレスポンシブ グリッドに配置するこのJavaScript プラグインを見つけました。このプラグインは、クリックすると画像の大きなビューを拡大します (Google 画像など)。大きなビューの構造を変更して、1 つの大きな画像ではなく複数の画像を表示したいと考えています。
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')
};