Проблема со скриптом галереи?

Question

[lilikon]

Доброго времени!
Возникла такая проблема, воспользовался для реализации на сайте вот этим скриптом галереи: https://tympanus.net/codrops/2013/03/19/thumbnail-...

Скрипт работает очень хорошо, НО мне надо что бы можно было на странице сделать несколько таких списков с изображениями и разделенные названиями, пример:

<div> Name 1 </div>
<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><!-- ... --></li>
<!-- ... -->
</ul>
<div> Name 2 </div>
<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><!-- ... --></li>
<!-- ... -->
</ul>

Скрипт работает лишь на первом ul с id="og-grid"
А уже второй ul открывает просто как картинку при нажатие.

Как можно сделать что бы все ul с id="og-grid" работали как надо?

Появилась другая проблема, поменяв id на class они стали все открываться, НО размер у последующих ul после открытия и закрытия не меняется, и появляется пустота!
Прошу помочь с решением проблемы

https://jsfiddle.net/antohhh93/sa4dvmbL/9/

Заранее благодарю за помощь!

Comments

[Ankhena]

id должны быть уникальными в рамках одной страницы.
Вызывайте скрипт по классу либо по списку id.

[lilikon]

Ankhena W: по классу работает, но очень криво, можно как то подправить что бы корректно все работало? если вам не будет сложно мне помочь?

[Nik]

lilikon: в чем заключается кривость?! вы просто переназначили с id на class.все должно корректно работать

Answer 1

[lilikon]

Появилась другая проблема, поменяв id на class они стали все открываться, НО размер у последующих ul после открытия и закрытия не меняется, и появляется пустота!
Прошу помочь с решением проблемы

Comments

[Nik]

lilikon переноси код в онлайн редактор и там посмотрим

[lilikon]

Nik: https://jsfiddle.net/antohhh93/sa4dvmbL/9/ я попробовал добавить, но появились еще ошибки js не понятные, хотя на xampp их нет. Очень прошу помощи, заранее благодарю.

[Nik]

lilikon: ошибки в подключение библиотек, подключите все что нужно для этой галереи

[lilikon]

Nik: подключил все скрипты, но почему то ругается теперь на

<script>
  $(function() {
    Grid.init();
  });
  </script>

помогите пожалуйста