Фотогалерея prettyPhoto с установкой на сайте - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Фотогалерея prettyPhoto с установкой на сайте (Галерея на jQuery для сайта, плюс настройка и установка)

Фотогалерея prettyPhoto с установкой на сайте

Kosten

Четверг, 20 Июня 2019, 03:42 | Сообщение 1

Администраторы

Сообщений:44490

Награды: 70

« 557 »

PrettyPhoto - это клон лайтбокса, который работает на jQuery. Он не только поддерживает изображения, но также поддерживает видео, flash, YouTube, iframes и ajax. Это полноценный медиа лайтбокс, где очень легко настроить, но он очень гибкий, если вы хотите немного его выстроить по своим параметрам. Обратите внимание, что эта тема является бета-версией, и вы должны проверить, что все в порядке перед любым производственным развертыванием.

Вы также можете удалить все другие темы, если они вам не нужны, для облегченного кода. Он имеет много типов поддержки контента, и его очень просто настроить. Кроме того, prettyPhoto имеет множество функций и 5 встроенных тем.

light_rounded
dark_rounded
light_square
dark_square
facebook
pp_default

Минимальная тема — которая добавит сюда с минимальным и чистым CSS

- Минимальная тема для лайтбокса prettyPhoto;
- Действительно простой и минимальный аспект;
- Изображения не использовались, и я имею в виду изображения, в том числе спрайты и кодированные изображения в CSS;
- 1 и только HTTP-запросы для загрузки файла CSS темы, как я уже сказал, изображения не используются. Тема по умолчанию использует 22 запроса к 7 файлам изображений размером около 20 КБ;
- Меньший размер файла CSS всего 5 КБ для сжатой версии;

Где предпочитают минимальную и простую тему по умолчанию для prettyPhoto и возможность добавлять материал, если он мне нужен, а не наоборот. Так что это мой маленький CSS для создания простой темы для prettyPhoto.

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

Подключаем бибдиотеку:

Код

HTML

Код

CSS

Код

div.minimal{overflow:hidden}div.minimal .pp_gallery li.default a,div.minimal .pp_next,div.minimal a.pp_previous{background:none}div.minimal .pp_top,div.minimal .pp_top .pp_middle,div.minimal .pp_top .pp_left,div.minimal .pp_top .pp_right,div.minimal .pp_bottom,div.minimal .pp_bottom .pp_left,div.minimal .pp_bottom .pp_middle,div.minimal .pp_bottom .pp_right{height:13px;display:none}div.minimal .pp_content_container .pp_left{padding-left:13px}div.minimal .pp_content_container .pp_right{padding-right:13px}div.minimal .pp_content{background-color:#fff;margin-bottom:-36px}div.minimal .pp_next:hover::after,div.minimal .pp_next:hover::before,div.minimal .pp_previous:hover::before,div.minimal .pp_previous:hover::after{content:" ";background:#000;width:5px;height:15px;display:block;position:absolute;top:45%}div.minimal .pp_next:hover::after,div.minimal .pp_next:hover::before{right:15px}div.minimal .pp_previous:hover::before,div.minimal .pp_previous:hover::after{left:15px}div.minimal .pp_next:hover::after,div.minimal .pp_previous:hover::after{margin-top:8px}div.minimal a.pp_arrow_next,div.minimal a.pp_arrow_previous{height:20px;width:20px;background-color:#000;opacity:.8}div.minimal a.pp_arrow_next::after,div.minimal a.pp_arrow_next::before,div.minimal a.pp_arrow_previous::before,div.minimal a.pp_arrow_previous::after{content:" ";background:#fff;width:2px;height:6px;display:block;position:absolute;top:12px}div.minimal a.pp_arrow_next::after,div.minimal a.pp_arrow_next::before{right:8px}div.minimal a.pp_arrow_previous::before,div.minimal a.pp_arrow_previous::after{left:8px}div.minimal a.pp_arrow_next::after,div.minimal a.pp_arrow_previous::after{margin-top:3px}div.minimal #pp_full_res .pp_inline{color:#000}div.minimal .pp_gallery ul li a{border:1px solid #aaa}div.minimal .pp_gallery ul li a:hover,div.minimal .pp_gallery ul li.selected a{border-color:#fff}div.minimal .pp_next:hover::after,div.minimal .pp_previous:hover::before,div.minimal a.pp_arrow_next::after,div.minimal a.pp_arrow_previous::before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}div.minimal .pp_next:hover::before,div.minimal .pp_previous:hover::after,div.minimal a.pp_arrow_next::before,div.minimal a.pp_arrow_previous::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}div.minimal a.pp_arrow_next,div.minimal a.pp_arrow_previous,div.minimal a.pp_close{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}div.minimal a.pp_close{width:20px;height:20px;cursor:pointer;text-decoration:none;font:bold 12px/18px Calibri;background:#333;margin:5px;z-index:20000}div.minimal a.pp_close::after{content:'x';position:absolute;right:-9987px;color:#fff}div.minimal a.pp_expand,div.minimal a.pp_contract{right:60px;height:15px}div.minimal a.pp_expand::after,div.minimal a.pp_contract::after,div.minimal a.pp_expand::before,div.minimal a.pp_contract::before{content:"";position:absolute;top:50%;border-style:solid;border-color:#333}div.minimal a.pp_expand::before,div.minimal a.pp_contract::before{left:0;width:6px;height:0;border-color:transparent #333;margin-top:-6px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}div.minimal a.pp_expand::after,div.minimal a.pp_contract::after{left:5px;width:8px;height:8px;margin-top:-8px}div.minimal a.pp_expand::before{border-width:7px 7px 0}div.minimal a.pp_contract::before{border-width:0 7px 7px}div.minimal a.pp_expand::after{border-width:3px 0 0 3px}div.minimal a.pp_contract::after{border-width:0 3px 3px 0}div.minimal .pp_loaderIcon{width:40px;height:40px;background-color:#333;border-radius:100%!important;-webkit-animation:sk-scaleout 1s infinite ease-in-out;animation:sk-scaleout 1s infinite ease-in-out}@-webkit-keyframes sk-scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1.0);opacity:0}}@keyframes sk-scaleout{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1.0);transform:scale(1.0);opacity:0}}div.minimal .pp_nav,div.minimal .pp_description,div.minimal .pp_social{display:none!important}div.minimal .pp_details{position:absolute;top:0;margin:0}div.minimal .pp_arrow_next:hover,div.minimal .pp_arrow_previous:hover,div.minimal a.pp_expand:hover,div.minimal a.pp_contract:hover,div.minimal .pp_next:hover,div.minimal .pp_previous:hover,div.minimal a.pp_close:hover{opacity:.8}@media screen and (max-width: 648px){div.pp_pic_holder.minimal{width:100%!important;left:0!important;overflow:hidden}div.minimal .pp_content,div.minimal .pp_fade,div.minimal .pp_hoverContainer{height:100%!important;width:100%!important}div.minimal .pp_content_container .pp_left{padding-left:0!important}div.minimal .pp_content_container .pp_right{padding-right:0!important}div.minimal .pp_expand,div.minimal .pp_contract,div.minimal .pp_gallery,div.minimal.pp_top,div.minimal .pp_bottom,div.minimal .ppt{display:none!important}div.minimal #pp_full_res img{width:100%!important;height:auto!important;max-height:100%}div.minimal .pp_details{width:94%!important;margin-top:-2px!important;padding:10px 4% 10px 3%}div.minimal a.pp_close{right:10px!important;top:10px!important}}

Код

$(document).ready(function(){
     $(".gallery a[rel^='prettyPhoto']").prettyPhoto({
                    theme:'minimal'
     });
});

Это все, что вам нужно сделать, чтобы ваша минимальная тема для prettyPhoto была доступна. Теперь вы можете перейти и активировать его с помощью стандартной функции prettyPhoto.

И лайтбокс prettyPholo, который вы можете скачать с основного сайта здесь: https://u.to/aGTQ

Демонстрация

Прикрепления: 6102589.jpg (59.4 Kb) · prettyphoto.zip (5.8 Kb)

Страна: (RU)