Harrix Блог

  • Списки статей
    • Все статьи
    • IT
    • Qt
    • C++
    • Сложение двух чисел
    • Web программированиe
    • FAQ
    • Latex
    • Установка программ
    • Мифы
    • Видео
    • Про фото
  • Проекты
  • Harrix.org
  • RSS
  • Контакты

Elastic Grid - небольшие модификации плагина

Elastic Grid - отличный плагин для демонстрации портфолио и других подобных вещей. В статье рассказывается о двух небольших, но полезных модификациях данного плагина.

25.12.2014 Leave a Comment 4 677 просмотров

Elastic Grid – отличный плагин для демонстрации портфолио и других подобных вещей. В статье рассказывается о двух небольших, но полезных модификациях данного плагина.

Демо Исходники

Официальный сайт: http://demo.phapsu.com/jquery.elastic_grid/.
Дополнительная страница с плагином: http://www.jqueryscript.net/…

Плагин хорош многим, но есть два момента, которые мне не понравились. Первый момент – в верхней строке, где мы можем выбирать фильтр по тэгу, удаление фильтра (показ всех фоток) обозначается словом All. Поменяем на русский вариант.

В html документе библиотека подключается через файл elastic_grid.encode.js:

1
2
3
4
5
<div id="elastic_grid_demo"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script type="text/javascript" src="js/elastic_grid.encode.js"></script>

Поменяем на elastic_grid.min.js:

1
2
3
4
5
<div id="elastic_grid_demo"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script type="text/javascript" src="js/elastic_grid.min.js"></script>

Откроем этот файл js/elastic_grid.min.js.

Там будет две строчки, которые нас интересуют:

2014-12-25_120501

Строчку:

1
K.addClass("all");

поменяем на:

1
K.addClass("все");

Строчку:

1
if(numOfTag>1){f("All");

поменяем на:

1
if(numOfTag>1){f("Все");

Теперь всё заработает правильно:
2014-12-25_120742

При открытии конкретного пункта появятся ссылки. Если на них щелкнуть, то ссылка откроется в том же окне.
2014-12-25_120849

Исправим. Найдите такую вот конструкцию:

1
for(C=0;C<urlList.length;C++){var i=$("<a></a>");

Замените ее на:

1
for(C=0;C<urlList.length;C++){var i=$("<a target='_blank'></a>");

Теперь всё работает.

P.S. На этот плагин я не сумел прикрутить Lightbox. Жаль(


Статьи по теме:

  1. Галерея фотографий Automatic Image Montage with jQuery с LightBox
  2. Сложение двух чисел на HTML + javaScript
  3. jQuery не работает в WordPress

Web программирование javascript, jQuery

© 2014 Harrix