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

 

Галерея не сложная в использовании и сборке, нам понадобится jQuery, и небольшая стилизация с помощью CSS. И так, приступим.

Шаг 1. HTML

Для начала нам необходима разметка, а именно мы создадим связку изображений с ID( Не важно в каком порядке будут изображения.

Количество изображений можно с легкостью изменить, кроме этого мы привязали ссылки для изображений. Тут все очень просто, более детально останавливаться не будем. Перейдем к следующему шагу.

Шаг 2. CSS

Нам необходимы только базовые стили, все остальное будут обрабатывать скрипты, мы добавим некоторые параметры для демонстрации и уберем горизонтальную прокрутку.

Со стилями мы разобрались, перейдем к самому интересному.

Шаг 3. jQuery

Для начала мы создаем так называемый скелет нашей интерактивной стены.

Давайте взглянем на imageNumber () которая очень необходима нам для работы. Для начала, давайте определим некоторые переменные.

Следует задать параметр в котором будет содержаться одинаковый вывод изображений для каждой полосы изображений, Итак, мы начинаем с проверки, если есть остаток изображений, тогда мы разделим количество изображений поровну, которые будут в каждой строке.

Далее нам необходимо добавить так называемые петли для изображений, которые будут автозаполнять недостающее пространство в полосах изображений. Для этого нам необходимо рассчитать проценты для numberOnRow, которые выглядят довольно сложным, но при правильном расчете мы получаем остаток , который примем за 1. Затем мы умножаем этот процент на количество изображений к каждому ряду. При этом нет никакой гарантии что мы получим четное число.

Напомним, что к каждому изображению мы добавили свой ID, теперь добавим небольшие формы для каждой строки.

Далее рассмотрим функции hover. Данный код -это просто связка простых функций, которые выбирают различные изображения так, чтобы они выглядели правильно расположенными , когда они расширяются. Таким образом, наша функция будет выглядеть так.

Таким образом мы получаем простую, но довольно-таки привлекательную галерею стену изображений.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.