Изумительное и идеальное решение создания галереи изображений товара в интернет магазине. В этом плагине есть все, что нужно для функционального слайдера отображения вашего товара. Если коротко описать этот скрипт, то он представляет из себя главное изображение с миниатюрами побочных картинок товара с зуммером и дальнейшим просмотром изображений в слайдере с удобной «листовкой» слайдов.
В самом слайд-шоу также имеются миниатюры изображений, которые появляются при наведении на слайдер и исчезают, если убрать курсор мыши от изображения слайдера в сторону.
Эту галерею я собирал сам. Я давно искал такой функциональный слайдер со всеми функциями, которые есть в данном зумере. Думаю он пригодиться и для ваших проектов. Сейчас я расскажу как вставить этот прекрасный слайдер изображений в интернет магазине на сайт. Для начала нам нужно подключить скрипты и css-стили:
Вставляем этот код
Далее в html файл вставляем данный код, там где нужно отобразить слайдер:
I have a problem with my website in my version of Safari (Version 5.1.4).
The images from pretty photo seems to overflow over the texts.
When the page load, the image are at the right place and then when the loading ends they position themselves on top of the content below. It’s like their allocated space disappear.
Weirdly I don’t have the same problem in Firefox or in some other version of Safari or on my iphone.
I have been trying to modify the css property of overflow and position but nothing is working.
Any idea of what could be the problem as I don’t know what else I could try.
Thanks a lot in advance!
Here is the link to the screenshots I took with the pages how they should look like and the pages with the images covering the texts.
Thanks in advance!
The link to my website is blog.valentineavoh.com
HERE IS THE CODES RELEVANT FOR THE BLOG POST THUMBNAIL ON THE HOME PAGE:
AND HERE THE PRETTY PHOTO PARAGRAPH IN MY STYLE CSS FILE:
prettyPhoto – это плагин для лайтбоксов, созданный Stéphane Caron . Сегодня мы научимся устанавливать плагин в ваши темы 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:
Возможно, вы хотите рассмотреть преимущества и недостатки использования CDN для jQuery. WordPress действительно поставляется с копией jQuery, но использование версии, размещаемой Google, может улучшить производительность вашего сайта. Если вы автор тем, я бы рекомендовал использовать вариант с фрагментом кода. Можете ознакомиться с обсуждением другого руководства , чтобы принять свое решение.
Вы увидите, что мы добавили еще один файл, который называется customprettyPhoto.js. С его помощью мы будем заставлять плагин хорошо работать с нашими изображениями в постах и инициализируем его. Так что давайте создадим этот файл и поместим его в нашу директорию prettyPhoto. Ок, давайте инициализируем prettyPhoto:
Нам будет нужна строка jQuery, чтобы добавить необходимый prettyPhoto класс prettyPhoto в теги-якоря, которые окружают изображения наших постов. Поскольку мы говорим о jQuery, давайте используем его, чтобы сделать то, что нам необходимо. Добавьте представленный ниже код сразу после $(document).ready(function()<, где мы убеждаемся, что страница загружена.
Замените entry-content именем класса или ID, который вы использовали для содержимого вашего поста и у вас будет добавлен класс для всех ссылок, которые окружают ваши изображения постов. Если вы посмотрите документацию по prettyPhoto, вы увидите, что в ней говорится использовать атрибут rel, но вместо этого мы используем класс. Это помогает избегать ошибок при валидации нашего HTML, так как атрибуты rel, согласно спецификации HTML5, могут иметь только определенные значения.
Дальше мы хотим включить возможность prettyPhoto – добавление описаний. Нам нужно преодолеть одно небольшое препятствие: prettyPhoto хочет, чтобы мы добавили атрибуты title в наши теги-якоря, которые будут использоваться для описания; но WordPress добавляет заголовки к тегам изображений. Для того, чтобы решить этот вопрос, мы напишем пару строк jQuery, которые возьмут название из тега изображения и установят такое же название для тега-якоря, который окружает изображение.
Здесь мы запускам функцию, когда пользователь кликает по изображению поста. Мы берем название картинки и добавляем его к якорю. Этот шаг делает гораздо более простым добавление описаний пользователям ваших тем.
Если вы хотите отключить эту функциональность полностью, просто убедитесь, что установили все названия якорей пустыми, если их нет, поскольку если не будет даже пустого названия, prettyPhoto просто покажет вместо него «undefined«.
Шаг 3. Добавление CSS prettyPhoto в вашу тему
Нам нужно добавить CSS для prettyPhoto в тему. Вернемся к файлу functions.phpи добавим вверху следующую строку:
Поскольку мы сохранили изображения и CSSв их изначальных папках и в той же взаимосвязи, нам не нужно переживать о том, что какие-то изображения потеряются.
Шаг 4. Подписи и заголовки
Давайте посмотрим, как добавить подписи и заголовки, которые будет использовать prettyPhoto. Посмотрите на картинку, вы увидите связь между альтернативным текстом изображения в посте и названием ссылки, которую мы можем установить при добавлении изображения в наш пост или страницу.
В завершение
Все, мы успешно добавили prettyPhoto в нашу тему. Прочтите документацию по плагину, чтобы узнать больше о его возможностях и настройках. PrettyPhoto может работать не только с изображениями, он также работает с видео, ajaxи прочим.
Также для него есть много удобных тем, которые могут подойти к вашей теме в их готовом виде, или, по крайней мере, послужить вам отправной точкой.
Источник: WP.tutsplus.com
Насколько полезным был этот пост?
Нажмите на звезду, чтобы оценить этот пост!
Средний рейтинг: / 5. Количество голосов:
Пока нет голосов! Будьте первым, кто оценит этот пост.