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

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

111

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

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

 

ksd1

 

ksd2

Скачать фотогалерею на 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>

| | Фотогалерея с сортировкой по категориям | Фотогалерея неплохая - с возможностью сортировки (и без нее) по категориям. Категории можно создавать прямо в коде. Привязывать к ним фотографии по кл | https://blogprogram.ru/wp-content/uploads/2014/09/111-131x131.jpg

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>