Фотогалерея с сортировкой по категориям

📌Заработай монеты
🔥 Обмен на крипту
✔️Тренд 2024 года!

Играть через Telegram

Платит 40-200$ за вход в игру. Без вложений. Помнишь DOGS, который всем заплатил - это второй шанс! 12 млн игроков за 3 дня!

PAWS >> Играть!

Side Fans - корейская Telegram игра, 10 млн. Листинг $$$ ожидается щедрым

Заработать

Повышай рейтинг, выживи до окончания таймера. Листинг будет

Перейти в telegram

Фотогалерея неплохая - с возможностью сортировки (и без нее) по категориям. Категории можно создавать прямо в коде. Привязывать к ним фотографии по классу. Недостаток - много файлов JQuery - 4 шт.

Возможности галереи:
- увеличение фотографии
- Различные стили для увеличения фотографии
- Возможность за счет CSS изменить фотки превью и количество картинок в ряду.
- Вывод заголовка, описания (заголовок выводится при увеличении фотки)
- Красивая сортировка (можно отключить) по категориям

Скачать фотогалерею на JQuery с сортировкой по категориям: 

Основные настройки (находятся в index.html) архива:
- в script.js + ТАМ СТОИТ jQuery.noConflict(); + можно поменять тему оформления всплыв. окна (черные и белые)
- Функцию категорий можно отключить удалив блог .portfolio-categ

Добавить фото:
- Чтобы была сортировка по категориям в data-id="id-0" пишем уникальный id + в data-type="cat-item-4" пишем к какой категории относится фото
- Чтобы при увеличении выводилось название фотки - надо писать title
- Одновременно идут ссылки на миниатюру и полную фотку - можно все размещать в 1 папке

Изменить размеры в фотогалереи:
<style>
/* Ширина области галереи */
.portfolio-content, .portfolio-area{width:880px;}
/* Ширина и высота области картинки */
.portfolio-area li{width: 245px; height: 250px; float: left;margin: 0 12px 20px 0;overflow: hidden;padding:5px;}
/* Ширина и высота картинки */
.image-block img{width: 225px; height: 145px; border: 1px solid #d5d5d5; border-radius: 4px 4px 4px 4px;background:#FFFFFF;padding:10px;}
.image-block img:hover{border: 1px solid #A9CF54;box-shadow:0 0 5px #A9CF54;}
</style>