06 февраля 2016

TJ Gallery

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

Идея алгоритма была позаимствована у Алексей @Squier и его статьи "Красивый вывод изображений".

На мой взгляд, решение данной задачи на стороне сервера не совсем правильно, особенно если речь идет о современном адаптивном сайте.

Поэтому для решения этой задачи напсал небольшой плагин для jQuery.

Демо1 Демо2 Скачать

Плагин выравнивает изображения по высоте и по ширине выводимой строке, в результате получается вывод изображений, как на google (или yandex) картинках.
Да, хочу отметить, что плагин разработан для адаптивных (responsive) сайтов и автоматически перестраивает сетку при изменении размеров окна браузера.

Это пока что первая версия, буду рад услышать замечания и пожелания и постараюсь их учесь в будущих версиях.

UPD 15.12.2019: Поправлены проблемы с последним элементом в мобильной (и не только) версии, а также некоторые отступы, которые также были сильно заметны на мобильных

Installation

Подключите jQuery и сам плагин jquery-tjgallery.min.js

<script src="js/jquery.min.js"></script>
<script src="js/jquery-tjgallery.min.js"></script>


HTML

<div class="pictures">
    <img src="images/i_1.jpg" alt="" />
    <img src="images/i_2.jpg" alt="" />
    <img src="images/i_3.jpg" alt="" />
    <img src="images/i_4.jpg" alt="" />
    <img src="images/i_5.jpg" alt="" />
    <img src="images/i_6.jpg" alt="" />
    <img src="images/i_7.jpg" alt="" />
    <img src="images/i_8.jpg" alt="" />
    <img src="images/i_9.jpg" alt="" />
    <img src="images/i_10.jpg" alt="" />
</div>

JS

$(document).ready(function(){
    /* Ждем пока картинки загрузятся */
    $(window).load(function(){
        $('.pictures').tjGallery();
    })
});

Options

selector
type: string
Default: 'img'

Селектор блоков для выравнивания


row_min_height
type: integer
Default: 180

Минимальная высота строки


margin
type: integer
Default: 5

Отступ между элементами

Methods

Методов совсем немного, помимо инициализации присутстует вспомогательный метод

clear
который очищает сетку и

destroy
который уничтожает сетку. Причем в большинстве случаев следует использовать именно его.

 

Демо1 Демо2 Скачать

Комментарии  

Илья26 апреля 02:04
Добрый день!
Скажите, пожалуйста, какую версию jQuery Вы используете в этом проекте? Дело в том, что я пытаюсь применить вместе с ним Lighbox, но из-за этого сбивается сетка.
Tod29 апреля 11:04
Данная библиотека совместима с jQuery. 1.x / 2.x / 3.x
Тестировал на версиях Jquery 1.4.4 и выше (включая 1.12.4)
Manuel03 октября 03:10
Thank you very much for your great work!
Bruno17 января 11:01
Hi!, does this plugin works well with jQuery 3.2.1 ?

Thanks
Tod17 января 12:01
hi!
yes, see demo

У вас нет прав для комментирования