Fotorama - адаптивная jQuery галерея, установка и настройка.


Долго выбирал тему для сегодняшнего топика. В итоге заметил, что мы еще не делали подборок с галереями изображений . По моему отличная тема, так как галереи присутствуют у множества сайтов. Откровенно говоря, все они не очень привлекательны. Учитывая нынешние тенденции развития jquery, html5 и т. д. я подумал, ведь должны быть уже намного привлекательней решения чем те, которые встречались мне раньше. Итак. Потратив день, удалось найти огромнейшее количество скриптов. Из всей этой горы я решил отобрать только , ведь я люблю , как вы уже заметили по предыдущим постам.
Галерея изображений применима не только в случае с фотоальбомами . Скрипт можно использовать, думаю, что это даже правильней будет, в качестве портфолио для фотографов, дизайнеров и т. д. Jquery эффекты помогут привлечь внимание посетителей и просто придадут изящности вашему сайту.
Итак. К вашему вниманию коллекция jquery плагинов галерей изображений для сайта .
Не забываем комментировать и помните, чтоб не потерять эту подборку, вы можете добавить ее в избранное, нажав на звездочку внизу статьи.

PHOTOBOXБесплатная, легкая, адаптивная галерея изображений , в которой все эффекты, переходы сделаны средствами css3. Идеальна для создания сайта-потрфолио фотографа.

S GalleryПривлекательный Jquery плагин галереи изображений . Анимация работает с помощью css3.

DIAMONDS.JSОригинальный плагин для создания галереи изображений . Миниатюры имеют форму ромба , что в данный момент очень популярно. Такая форма сделана с помощью css3. Единственный минус этой галереи - это отсутствие лайтбокса, в котором бы открывалось фото в полный размер. То есть потребуется раками прикрутить плагин лайтбокса. Данный скрипт формирует адаптивную сетку изображений в форме ромба.

SuperboxСовременная галерея изображений с использованием Jquery, css3 и html5 . Мы все привыкли, что при клике на превью полное изображение открывается в лайтбоксе (всплывающем окне). Разработчики данного плагина решили, что лайтбокс уже отжил свое. Изображения в этой галереи открываются ниже превью. Посмотрите демо и убедитесь, что такое решение выглядит на много современней.
| Smooth Diagonal Fade GalleryСовременная галерея изображений в которой превью распределяются по всему пространству экрана . Скрипт умеет сканировать папку с фото на сервере, то есть не нужно вставлять каждое изображение по отдельности. Достаточно загрузить картинки в папку на сервере и в настройках указать путь к директории. Далее скрипт все сделает сам.

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

THUMBNAIL GRID WITH EXPANDING PREVIEWПлагин представляет собой адаптивную сетку изображений . При клике ниже выводится фото побольше и описание. Хорошо подойдет для создание портфолио.

jGalleryjGallery - это полноэкранная, адаптивная галерея изображений . Легко настраиваются эффекты, переходы и даже стиль.

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

Mosaic FlowПростая, адаптивная галерея изображений с сеткой в стиле Pinterest .

GalereyaЕще одна стильная галерея с сеткой в стиле Pinterest с фильтром по категориям. Работает в браузерах: Chrome, Safari, Firefox, Opera, IE7+, Android browser, Chrome mobile, Firefox mobile.

least.jsОтличная бесплатная галерея изображений с использованием JQUERY, 5 и CSS3. Она имеет очень привлекательный внешний вид и, несомненно, привлечет внимание ваших посетителей.

flipLightBoxПростенькая галерея изображений. При клике на превью, в лайтбоксе открывается полное изображение.

blueimp GalleryГибкая галерея. Способна выводить в модальном окне не только изображения, но и видео . Отлично работает на сенсорных устройствах. Легко кастомизируется и есть возможность расширения функционала с помощью дополнительных плагинов (См. следующий плагин).

Всем привет! Сегодня мы поговорим о возможно лучшей бесплатной фотогалереи, видео и фото слайдере, поговорим о "фотораме". Несмотря на то, что скрипт уже года 2 не поддерживается и автор переключился на проект схожей тематики он прекрасно работает и продолжает радовать глаз.

Основные плюсы (+)

  • Простота установки, настройки и использования. Кроме jQuery, вам понадобится подключить всего 2 файла , а для вывода галереи там нужно указать только ссылки на картинки.
  • Незначительно влияет на скорость загрузки сайта.
  • Адаптивность . Ваша галерея выглядит хорошо и на телефоне, и на ноутбуке, и даже на экране телевизора.
  • Обилие настроек и функций, подключаемых отдельно, через атрибуты HTML тегов.
  • Поддержка сенсорных устройств.
  • Поддержка видео .
  • Возможность ленивой загрузки картинок.
  • И много-много всего другого, что придётся по душе искушённому пользователю.
  • Минусы (-)

  • Отсутствие поддержки пользователей. Вероятность того, что вашу проблему рассмотрят или исправят практически равна нулю. Да это плохо, но не фатально.
  • Первый вариант подключения Fotorama

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

  • Проверяем наличие jQuery. Зайдите в исходный код сайта (сочетание клавиш Ctrl + U) → пытаемся найти примерно такую строчку: https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js

    Для облегчения поиска используйте Ctrl + F . Если заветной строки нет, то вам придётся подключить jQuery. На WordPress это можно сделать вставив код, расположенный ниже, в файл функций темы (functions.php). На самом деле этот скрипт используется при конфликтах разных версий jQuery и действует он по такой схеме: удаляет зарегистрированный ранее jQuery, регистрирует новый, выводит скрипт. Актуальные версии библиотеки jQuery можно найти тут .

    Можно просто вставить такую строку между и :

  • Подключаем fotorama.css и fotorama.js. Вставьте следующий код между тегами и , на WordPress это делается в файле заголовка темы (header.php).
  • На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".
  • Второй вариант подключения [шорткод + Autoptimize]

    В этом варианте подключения файлы скрипта будут выводиться только на нужных страницах через [шорткод ]. А если вы используете плагин Autoptimize, то код скрипта в придачу интегрироваться в файлы темы. Эти нехитрые манипуляции должны увеличить скорость загрузки сайта.

  • Проверяем наличие jQuery. Так же как и в первом варианте, смотрите выше.
  • Скачиваем файлы фоторамы → распаковываем → загружаем в отдельную папку в корне сайта.
  • Для создания шорткода в файл функций темы (functions.php) вставляем код, расположенный ниже, изменяем ссылки к файлам на свои..js"> "; } add_shortcode("foto","sd");
  • Теперь при написании статьи в конце вводите шорткод
  • Непосредственно создание галереи

    Галерея выводится HTML кодом с помощью контейнера c class="fotorama" , в контейнере размещаются код вывода изображения либо ссылка на изображение . При написании статьи на движке WordPress переключите редактор в текстовый режим и введите контейнер c class="fotorama" .

    Выглядит это так:

    Или так (нумерация ссылок необязательна):

    1 3 4

    Примеры настроек FotoramaРазмеры контейнера

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

    Существуют и другие настройки:

    Data-width="98%" //относительная ширина data-ratio="800/600" //соотношение сторон data-minwidth="420" // мин. ширину data-maxwidth="900" // макс. ширину data-minheight="320" // мин. высота data-maxheight="100% // относительная макс. высота data-height="100% // относительная высота

    Миниатюры

    За миниатюры отвечает data-nav="thumbs"

    Но такой способ не очень эффективен, так как скрипту приходится загружать сразу все фотографии для генерации миниатюр, поэтому будет рациональнее заранее подготовить маленькие копии картинок. WordPress автоматически делает миниатюры, мы их и будем использовать. Чтобы получить ссылку на миниатюру добавьте -70x70 к названию файла (https://сайт/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://сайт/wp-content/uploads/2017/11/27ltl9eRXk-70x70.jpg).

    По умолчанию миниатюра - 64 × 64. Откорректировать этот параметр можно с помощью data-thumbwidth (ширина) и data-thumbheight (высота). Если вам нужно чтобы миниатюра имела свой собственный размер, то задайте параметры width и height для файла миниатюры:

    HTML-код + Fotorama

    Фоторама отлично обрабатывает HTML и CSS, что значительно расширяет функционал скрипта. Работайте со ссылками, блоками, таблицами, абзацами, пишите CSS и многое другое. Ниже представлены некоторые примеры работы галереи. Если визуальная часть не отображается, то нажмите кнопку "Result".

    Показать / Скрыть примеры

    See the Pen ooppwb by Ivanov Klim (@DreamerKlim) on CodePen.

    See the Pen aVEEVb by Ivanov Klim (@DreamerKlim) on CodePen.

    Полноэкранный режим data-allowfullscreen="true" //в окне браузера data-allowfullscreen="native" //на весь монитор

    Существует возможность добавить отдельное большое изображение для полноэкранного режима через data-full:

    Другое data-autoplay ="true" //автозапуск data-autoplay="3000" //интервал между слайдами в мс data-caption ="One" //комментарии к картинкам data-keyboard ="true" //навигация стрелками data-shuffle ="true" //изображения в разнобой data-navposition ="top" //миниатюры вверху data-loop ="true" //циклическая прокрутка Попробуем все соединить и добавить видео "какой-то коммент 1" > "какой-то коммент 2" > To find work you love 1. jQuery галерея с эффектом перелистывания страницы

    Подобное решение можно использовать для вывода последних статей в блоге либо для презентации товаров.

    Уникальный способ отобразить ваши фотографии в виде jQuery необычной галереи.

    3. jQuery галерея изображений для товара, плагин «slideJS»

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

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

    5. Элегантная Lightbox галерея «ppGallery»

    6. Мини-галерея jQuery «Touch-Gallery»

    7. Новая jQuery галерея с миниатюрами

    Профессиональная jQuery галерея 2011 года.

    8. jQuery плагин «Nivo Zoom»

    Еще один качественный jQuery плагин от разработчиков Nivo слайдера. Увеличение изображение по нажатию на миниатюру.

    9. jQuery галерея «3d Wall Gallery»

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

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

    11. Необычное отображение изображений в jQuery галерее

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

    12. Плагин jQuery галереи «MB.Gallery»

    13. jQuery галерея, растягивающаяся на весь экран

    Плагин 2011 года. Новая галерея с описанием изображений, растягивающаяся на всю область окна браузера не зависимо от его размеров. Интересно реализованы миниатюры изображений. Переход между фотографиями осуществляется с помощью стрелок около миниатюры и с помощью колеса мыши.

    14. Легкая jQuery галерея

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

    16. Стильная галерея с использованием библиотек jQuery и Raphael

    Интересный эффект при наведении курсора мыши на миниатюру.

    17. Новая версия jQuery плагина «Supersized» версия 3.1

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

    18. jQuery плагин «Galleria 1.2.2»

    Новая jQuery галерея для ваших проектов.

    Галерея выплывает на странице по нажатию на кнопку. Миниатюры отображаются вокруг увеличенного изображения. Можно управлять автоматической сменой изображений. Используемые технологии: jQuery, CSS, PHP.

    20. Плагин «Timer Gallery»

    jQuery галерея. Реализована автоматическая смена слайдов и прокрутка миниатюр, если их слишком много.

    Плагин галереи изображений на jQuery.

    22. javascript галерея для просмотра на мобильных устройствах «PhotoSwipe»

    Галерея изображений, оптимизированная для просмотра на мобильных устройствах (телефонах или планшетах).

    23. javascript галерея с 3D эффектом

    24. Галерея «jQuery morphing gallery»

    Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

    25. jQuery плагин «Galleria 1.2.3»

    26. jQuery галерея изображений «Image Wall»

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

    27. CSS3 галерея

    Интересный эффект при наведении.

    28. Галерея с миниатюрами «TN3 Gallery»

    jQyery галерея с миниатюрами. Реализована возможность просмотра в компактном окне и в окне на весь экран, а также возможность отключать/включать автоматическую смену слайдов.

    29. Сетка изображений «Grid-Gallery»

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

    30. jQuery галерея «Swap Gallery»

    Легкая галерейка jQuery в несколько строк кода.

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

    31. Галерея изображений jQuery

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

    Изображение и его миниатюры выполнены в виде кругов.

    33. jQuery плагин портфолио фотографа «Portfolio Image Navigation»

    Оригинальное javascript решение для оформления портфолио фотографа. Навигация между изображениями осуществляется с помощью стрелок Вверх/Влево/Вправо и при помощи мини-квадратов (имитация перемещения в 2D пространстве). Можно сгруппировать фотографии из разных фото сессий в разные вертикальные ряды и перемещаться по ним с помощью элементов навигации. Смотрите демонстрацию.

    34. Плагин «jmFullZoom»

    Плагин для просмотра изображений, растягивающихся на весь размер окна браузера. Можно использовать для показа работ из портфолио.

    35. Фото-карта

    Галерея интегрированная с Google картой. Можно развернуть на весь экран, нажав на иконку в правом нижнем углу. Отлично подойдет для туристических сайтов.

    36. Галерея изображений с миниатюрами

    jQuery галерея с миниатюрами.

    37. jQuery галерея «Galleriffic»

    Слайд-шоу с миниатюрами.

    38. jQuery CSS3 плагин «Wave Display Effect»

    Волнообразное представление изображений и содержимого на странице. При нажатии на миниатюру все изображения увеличиваются и появляется их название. При еще одном нажатии раскрывается блок с описанием фотографии.

    Много вариантов отображения и настроек.

    42. Plogger

    43. Простенькая симпатичная галерея, сделанная на CSS, без использования скриптов

    Красиво выглядит и отлично работает во всех современных браузерах

    Можно управлять автоматическим показом слайдов (старт/стоп), переключение слайдов с помощью стрелок клавиатуры, автоматическое постраничное разбиение названий слайдов, если их много, поддерживается несколько галерей на одной странице, подписи к слайдам, поддержка API и возможность создавать свои эффекты перехода слайдов

    46. Галерея в виде стопки фотографий

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

    47. jqFancyTransitions

    Библиотека jQuery появилась в 2007 году. С тех пор с ее использованием было разработано огромное количество плагинов, в том числе и галерей изображений. Они изобилуют красивыми рамками, годными анимационными переходами и замечательным дизайном. Однако, что интересно, мне еще не попадалась на глаза какая-нибудь jQuery-галерея с возможностью поворота изображения. А ведь довольно часто приходится просматривать изображения, перевернутые на 90 градусов, а то и вовсе загруженные вверх-ногами. Именно такая функциональность требовалась для моего проекта.

    На самом деле, переворачивать изображения с использованием javascript очень легко. Зная это, я решил написать свою простую галерею изображений с возможностью поворота, которая базируется на плагине jquery. Сказано – сделано, спустя несколько часов появились вполне себе годные результаты:

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



    Как использовать

    Для того, чтобы галерея работала корректно, необходимо две вещи: подгруженную библиотеку jQuery и подгруженные шрифты font-awesome. В head подключаем необходимые стили и скрипты:

    Верстаем необходимую разметку галереи:

    И инициализируем галерею:

    $(function() { $(".simple_img_gallery").createSimpleImgGallery(); });

    Готово. Вышло минималистично и вполне симпатично.

    Реализованная галерея доступна на github .

    Итог

    В интернете появилось на одну галерею изображений больше:)

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

    Также, для уменьшения количества зависимостей можно попробовать отказаться от font-awesome, поскольку из этого большого набора иконок используются только 4 из них.

    Здравствуйте, уважаемые читатели a! В этом уроке я покажу Вам, как создать минималистичную, но в тоже время удобную и функциональную фото галерею на jQuery , или галерею изображений, кому как удобно. В галерее есть возможность создавать категории, с последующей фильтрацией. Так же есть возможность запуска слайд-шоу. Галерея работает во всех браузерах, так что проблем с адаптацией не будет.

    Для создания этой галереи будут использованы две бесплатные библиотеки : Quicksand и PrettyPhoto . Они значительно упрощают создание галереи. Как всегда результат работы Вы можете увидеть на демонстрационной странице, а также скачать архив с работающей галерей и все исходные файлы. Единственным минусом, если можно так сказать, является создание в ручную миниатюр для больших изображений. А во всем остальном эта галерея достойна внимания. Так же как и !

    HTML разметка

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

    1
    2
    3
    4
    5
    6
    7
    8


    Категории:
    Все
    Категория 1
    Категория 2
    Категория 3
    Категория 4

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11







  • Название картинки

    опубликовано: 2012


  • Как говорилось выше, элементы списка это изображения в галерее. Каждый элемент списка включает составные. Это непосредственно само изображение, точнее его миниатюра, а также описание. Миниатюра представляет собой ссылку на основное изображение. Атрибут rel необходим для вызова javascript и открытия основного изображения.

    Не забывайте также о 2 важных вещах, у элемента списка li атрибут data-id должен быть уникальным. Атрибут data-type содержит класс категории, список которых я описывал выше. О разметке вроде бы все.

    Стили CSS

    Особо заострять внимание на стилях не буду, так как используем мы уже готовую библиотеку PrettyPhoto , которая отвечает за увеличение изображения, и css кода достаточно много. Однако стоит заметить предусмотрено 5 вариантов оформления увеличенного изображения, хотя в идеале всего 3 , так как в двух вариантах лишь убирается закругление.

    Поэтому, покажу лишь CSS стили для миниатюр ну и списка категорий.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

    Portfolio-categ { margin-bottom : 30px ; }
    .portfolio-categ li {
    display : inline ;
    margin-right : 10px ;
    }
    .image-block {
    display : block ;
    position : relative ;
    }
    .image-block img {
    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 ;
    }
    .portfolio-area li {
    float : left ;
    margin : 0 12px 20px 0 ;
    overflow : hidden ;
    width : 245px ;
    padding : 5px ;
    }
    .home-portfolio-text { margin-top : 10px ; }
    li.active a { text-decoration : underline ; }

    В принципе, со стилями должно быть все понятно. Чтобы категории выстроились в ряд свойству display придается значение inline . Для того чтобы придать эффект обводки изображения, задается фоновый цвет (белый) и отступ в 10 пикселей. Размеры элементов списка задаются в .portfolio-area li .

    jQuery

    Ну и напоследок самое важное, то ради чего весь урок. Это jQuery код. Начнем с фильтрации картинок, по категориям.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

    // Выбираем все дочерние элементы portfolio-area и записываем в переменную
    var $data = $(".portfolio-area" ) .clone () ;

    $(".portfolio-categ li" ) .click (function (e) {
    $(".filter li" ) .removeClass ("active" ) ;

    var filterClass= $(this ) .attr ("class" ) .split (" " ) .slice (- 1 ) [ 0 ] ;

    if (filterClass == "all" ) {
    var $filteredData = $data.find (".portfolio-item2" ) ;
    } else {
    var $filteredData = $data.find (".portfolio-item2" ) ;
    }
    $(".portfolio-area" ) .quicksand ($filteredData, {
    duration: 600 ,
    adjustHeight: "auto"
    } , function () {

    LightboxPhoto() ;
    } ) ;
    $(this ) .addClass ("active" ) ;
    return false ;
    } ) ;

    C помощью метода clone() и селектора, выбираем все дочерние элементы у .portfolio-area и записываем их в переменную $data . Далее отслеживаем клик по одной из категорий, элемент li у списка с классом .portfolio-categ . Делаем все категории не активными, посредством удаления removeClass(«active»), если этого не делать то со временем все категории будут активными и фильтрация остановиться.

    Так как мы кликаем по элементу списка, то в селекторе this содержится элемент списка то есть li , у него мы берем значение атрибута class и с помощью метода split разбиваем название класса на несколько частей, границей является пробел (т.е. если класс был «all active» то после разбиения мы получаем массив из «all» и «active»). А уже далее методом slice выбираем первый элемент массива (в нашем случае «all»), и записываем получившийся результат в переменную filterClass . Если пробела не было то название класса не измениться.

    Далее проверяем если в переменной filterClass строка all , то методом .find выбираем все элементы с классом portfolio-item2 из массива $data , который мы рассматривали выше. Выбранные элементы (а это все элементы списка, то есть все картинки) помещаем в переменную filteredData .

    В противном случае, если filterClass не равна all , то в переменную filterData поместим не все элементы списка, а лишь те у которых атрибут data-type совпадает с классом категории. Короче говоря элементы только одной категории.

    И в конечном итоге полученную переменную передаем в библиотеку jquery quicksand , которая и производит фильтрацию картинок. Это все что касается фильтрации.

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

    1
    2
    3
    4
    5
    6
    7

    jQuery("a" ) .prettyPhoto ({
    animationSpeed: "fast" ,
    slideshow: 5000 ,
    theme: "facebook" ,
    show_title: false ,
    overlay_gallery: false
    } ) ;

    Отслеживается клик по ссылке, у которой атрибут rel начинается с prettyPhoto . После чего в дело вступает библиотека prettyPhoto , и изображение чудесным образом увеличивается. Кстати, мы также передаем несколько параметров. Такие как скорость анимации — быстрая, задержка у слайд шоу — 5 секунд, тема оформления Facebook (всего 5 тем они находятся в папке images/prettyPhoto), а также запрещаем показ названия картинки и увеличение картинки при наведении мыши. Полную документацию по prettyPhoto можно найти

    Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на





    

    2024 © gtavrl.ru.