Меню

Starlite pretty photo настройка

Веб-дизайн и поисковая оптимизация

Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов Ваш браузер не поддерживает технологию iframes. Для навигации используйте верхнее меню

Создание фотогалереи на сайте

Фотогалерея prettyPhoto

Основные достоинства фотогалереи prettyPhoto:
— возможность работы не только с изображениями, но и с видео, HTML, Flash, YouTube и iframes,
— увеличенное изображение подгоняется под размера экрана в браузере (адаптивное увеличение),
— красивая настраиваемая картинка (6 тем на выбор),
— вывод миниатюр внизу окна с навигацией,
— поддержка большинством браузеров, включая IE6: Firefox 3.0+, Google Chrome 10.0+, Internet Explorer 6.0+, Safari 3.1.1+, Opera 9+,
— режим слайд-шоу.

Установка фотогалереи prettyPhoto

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

Важное замечание: если размер основного изображения (big.jpg) больше размера экрана в браузере пользователя, то prettyphoto может подгонять (уменьшать) его под размер экрана (параметр allow_resize: true/false в настройках). При этом увеличенная картинка всегда вписывается в экран, независимо от того, какое устройство используется для просмотра: смартфон, планшет или монитор высокого разрешения.

Для того, чтобы фатогалерея заработала, необходимо в ссылки добавить атрибут rel=»prettyPhoto[gallery1]». Здесь в квадратных скобках указан идентификатор галереи. Он может иметь любое имя. Если на странице сайта несколько фотогалерей, то оно должно быть одинаковым для всех элементов каждой галереи. Для вывода одиночного изображения идентификатор можно не указывать.

Следовательно, для показанной вверху фотогалереи имеем следующий простой HTML-код:

Настройка фотогалереи prettyPhoto

В заключение, несколько слов про настройки фотогалереи. Обратите внимание, что в атрибуте title ссылок размещен текст, который показывается под картинкой в фотогалерее, а содержимое alt картинок показывается вверху (можно отключить в настройках). Для изменения внешнего вида (темы), скорости смены картинок, прозрачности фона и др. используются параметры в файле jquery.prettyPhoto.js. Откройте его, например, в Adobe Dreamweaver или Блокноте, и в самом начале страницы увидите все настройки:

Для удобства все пункты снабжены комментариями на русском языке, и вы можете поэкспериментировать, изменяя их.

Например, на выбор предлагается шесть основных тем оформления фотогалереи: light_rounded, dark_rounded, light_square, dark_square, facebook, pp_default. Для нашего примера выбрана тема facebook.

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

Подводя итог, скажу, что фотогалерея prettyPhoto уже много лет пользуется популярностью у разработчиков сайтов. Это обусловлено простотой установки этого плагина jQuery, оптимальными настройками, наличием слайд-шоу и поддержкой большинством браузеров. Также отмечу, что разработчик программы Стефан Карон постоянно её совершенствует и добавляет новые возможности, о чем рекомендую почитать на его сайте. Заодно, бесплатно потренируетесь в своем английском.

Читайте также:  Stealth mfu 630 настройка

Кроме вывода изображений, prettyPhoto может работать и с другим контентом. Например, вывод HTML-страницы рассмотрен в статье «Применение Jquery для формы обратной связи».

О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе «Веб-дизайн и SEO».

Источник

prettyPhoto — плагин для работы с изображениями в темах WordPress

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

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

Шаг 1. Скачиваем prettyPhoto и устанавливаем структуру директорий

Зайдите на margins for-errors.com и скачайте плагин. Как только вы это сделаете, мы создадим новую структуру директорий для плагина, чтобы облегчить себе жизнь. Для начала давайте удалим некоторые вещи, которые нам не нужны. В папке изображений удалите все, кроме папки prettyPhoto и ее содержимого. В корневой папке, удалите xhr_response.html и index.html.

Теперь перенесите файл jquery.prettyPhoto.js из папки js в корневую папку плагина и удалите папку js. Наконец, переименуйте папку в prettyPhoto и загрузите ее в директорию вашей темы. Скорее всего, у вас уже есть папка js или scripts, так что загрузите папку плагина в нее. В этом руководстве предположим, что вы загрузили ее в папку ваша-тема/js.

Шаг 2. Добавление скриптов в вашу тему

До того, как мы загрузим файлы плагина в вашу тему, нам нужно загрузить jQuery. Мы будем использовать размещаемую Google версию jQuery, используя метод, представленный на «Digging into WordPress«, так что давайте добавим фрагмент кода в нашу функцию functions.php:

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

Нам будет нужна строка jQuery, чтобы добавить необходимый prettyPhoto класс prettyPhoto в теги-якоря, которые окружают изображения наших постов. Поскольку мы говорим о jQuery, давайте используем его, чтобы сделать то, что нам необходимо. Добавьте представленный ниже код сразу после $(document).ready(function()<, где мы убеждаемся, что страница загружена.

Замените entry-content именем класса или ID, который вы использовали для содержимого вашего поста и у вас будет добавлен класс для всех ссылок, которые окружают ваши изображения постов. Если вы посмотрите документацию по prettyPhoto, вы увидите, что в ней говорится использовать атрибут rel, но вместо этого мы используем класс. Это помогает избегать ошибок при валидации нашего HTML, так как атрибуты rel, согласно спецификации HTML5, могут иметь только определенные значения.

Читайте также:  Телефон htc сброс на заводские настройки

Дальше мы хотим включить возможность prettyPhoto – добавление описаний. Нам нужно преодолеть одно небольшое препятствие: prettyPhoto хочет, чтобы мы добавили атрибуты title в наши теги-якоря, которые будут использоваться для описания; но WordPress добавляет заголовки к тегам изображений. Для того, чтобы решить этот вопрос, мы напишем пару строк jQuery, которые возьмут название из тега изображения и установят такое же название для тега-якоря, который окружает изображение.

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

Если вы хотите отключить эту функциональность полностью, просто убедитесь, что установили все названия якорей пустыми, если их нет, поскольку если не будет даже пустого названия, prettyPhoto просто покажет вместо него «undefined«.

Шаг 3. Добавление CSS prettyPhoto в вашу тему

Нам нужно добавить CSS для prettyPhoto в тему. Вернемся к файлу functions.phpи добавим вверху следующую строку:

Поскольку мы сохранили изображения и CSSв их изначальных папках и в той же взаимосвязи, нам не нужно переживать о том, что какие-то изображения потеряются.

Шаг 4. Подписи и заголовки

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

В завершение

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

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

Источник

Starlite pretty photo настройка

Это интересный плагин галереи в статье. Плагин может выводить как картинки,так и видео такое как, flash, YouTube, IFRAME и Vimeo в статьях. Для того чтобы отобразить видео или картинки нужно применить определённый синтаксис.

В плагине автор описывает как это сделать,но по началу будет не сразу понятно,поэтому я малость разобрался и подскажу Вам то,что чаще всего используется на сайте. Чаще всего это одно фото,галерея и видио с YouTube. В плагине так же есть русский язык. Давайте разберём всё по порядку,начнём с простого это одно изображение. Для этого в нужной нам статье находим место и вставляет вот такой вот синтаксис,кстати они все в плагине,поэтому с потолка я их не беру.

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

Тут Мы указываем общую папку где хранятся наши фото и путь к ней. Первое фото это миниатюра,её можно изготовить сразу в маленьком размере или указать ниже размер миниатюры и изображение автоматически станет меньше,но общий размер не уменьшится имейте ввиду. Если у Вас уже заготовлены миниатюры,то размер указывать не нужно. Больше ничего тут трогать не нужно. Идём дальше,теперь вставим много фотографий,для этого пишем другой код.

Читайте также:  Настройки публичности в моем мире


Ну что теперь напрягает код? Думаю немного стало сложнее,хотя если понять,то всё просто. Я показал пример трёх фото как вывести в галереи,но на самом деле их можно указать сколько угодно. Теперь немного разберёмся почему два кода и по разному написано. Наверно многие подумают,что второй пример гораздо удобней записать чем первый,возможно,но записано так не просто так. В первом варианте у Вас будут идти изображения один за одним с указанным размером,а во втором варианте будет всё в столбик.

Вопрос, когда скажем будет 10-20 изображений как лучше записать? Пишите как первый вариант,плагин автоматически перенесёт изображения на новую строку. Так же как и в первом варианте укажите название,описание и ещё добавляется общее название галереи в кавычках,вот и всё.

foto/1mini.jpg » title=» Название1 » rel=»prettyPhoto[ Например Gallery ]»>Название над фото1 » width=»100″ height=»60″/>

foto/2mini.jpg» title=» Название2 » rel=»prettyPhoto[ Например Gallery ]»>Название над фото2 » width=»100″ height=»60″/>

foto/3mini.jpg » title=» Название3 » rel=»prettyPhoto[ Например Gallery ]»>Название над фото3 » width=»100″ height=»60″/>

Теперь добавим видео с YouTube,а тут всё просто тоже,вот код.

Тут найдите ссылку на видео,вставьте как в примере,дальше его название,дальше миниатюру его и описание. Напомню,что размеры миниатюр можно не указывать,если они заготовлены за ранее,то будет отображаться в исходном. Если Вам не нужен заголовок,то он отключается в настройках. Так же у плагина есть 6 стилей показа и кнопки делиться в соц сетях. Смотрите демо и поймёте.

Так же есть возможность добавить ещё видео такое как flash, IFRAME и Vimeo,но тут не было времени разбираться,так как нужно готовить видео под это форматы,поэтому оставляю Вам разобраться в этом. Хотя мне кажется видео из YouTube за глаза хватит,так как мало кто будет захочет грузить свой хост. Разработчик утверждает,что поддерживает версию и joomla 3.0,я тестировал на joomla 2.5 всё отлично.

Основные характеристики:
* Он является с открытым исходным кодом и распространяется под лицензией GNU/GPL.
* Он предоставляет простой интерфейс.
* Он может отображать lightbox для одного изображения, галереи изображений, видео, flash, YouTube, IFRAME и Vimeo.
* Он поддерживает показывать заголовок, описание, социальные кнопки и т.д., в лайтбоксе.
* Предоставляет несколько тем, как по умолчанию, facebook, Свет округлые, Темные округлые, Светло-сквер и Темный квадрат.

Этот плагин работает в следующих браузерах:
* Firefox 3.0+
* Google Chrome 10.0+
* Internet Explorer 6.0+
* Safari 3.1.1+
* Opera 9+

Журнал изменений, в Версии 1.1:
+ Добавлены новые версии 1.8.2 jQuery
+ Добавлена никакого Конфликта в режиме jQuery

Журнал изменений, в Версии 1.2:
+ Добавлена совместимость с Joomla 3

Источник