Изумительное и идеальное решение создания галереи изображений товара в интернет магазине. В этом плагине есть все, что нужно для функционального слайдера отображения вашего товара. Если коротко описать этот скрипт, то он представляет из себя главное изображение с миниатюрами побочных картинок товара с зуммером и дальнейшим просмотром изображений в слайдере с удобной «листовкой» слайдов.
В самом слайд-шоу также имеются миниатюры изображений, которые появляются при наведении на слайдер и исчезают, если убрать курсор мыши от изображения слайдера в сторону.
Эту галерею я собирал сам. Я давно искал такой функциональный слайдер со всеми функциями, которые есть в данном зумере. Думаю он пригодиться и для ваших проектов. Сейчас я расскажу как вставить этот прекрасный слайдер изображений в интернет магазине на сайт. Для начала нам нужно подключить скрипты и 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 и устанавливаем структуру директорий
- Шаг 2. Добавление скриптов в вашу тему
- Шаг 3. Добавление CSS prettyPhoto в вашу тему
- Шаг 4. Подписи и заголовки
- В завершение
- Насколько полезным был этот пост?
Шаг 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()
Источник: