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.
Там будет две строчки, которые нас интересуют:
Строчку:
|
1 |
K.addClass("all"); |
поменяем на:
|
1 |
K.addClass("все"); |
Строчку:
|
1 |
if(numOfTag>1){f("All"); |
поменяем на:
|
1 |
if(numOfTag>1){f("Все"); |
Теперь всё заработает правильно:
При открытии конкретного пункта появятся ссылки. Если на них щелкнуть, то ссылка откроется в том же окне.
Исправим. Найдите такую вот конструкцию:
|
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. Жаль(