Данный туториал покажет, как применить плагин jQuery lightbox «prettyPhoto» в шаблоне JS Animated.
JS Animated. Как применить плагин jQuery lightbox «prettyPhoto» в шаблоне JS Animated.
PrettyPhoto — это клон jQuery lightbox. Он применяется не только для картинок, но и для видео, флеш-анимации, iframes и ajax. Это полноценный медиа lightbox.
Для того, чтобы добавить его на страницу:
-
Скачайте и разархивируйте файл prettyPhoto_compressed_3.1.5.zip с сайта http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/.
-
Скопируйте папки js и css в папку site шаблона. Поскольку, там уже есть папки с такими названиями, система предложит заменить их. Подтвердите замену, потому что это лишь добавить новые файлы в папки.
-
Откройте файл .html с изображением, для которого вы хотите применить плагин и добавьте библиотеку в таблице стилей в секции <head>, используя текстовый редактор DreamWeaver:
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" /> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
-
Найдите строку с изображением, например:
-
Инициализируйте prettyPhoto: добавьте следующий код в файл .html перед закрывающим тегом </head> :
- Сохраните страницу и обновите браузер: картинка должна открываться в lightbox.
<img src="images/image_small.jpg " alt="" />
Отредактируйте ее:
<a href="images/image_big.jpg" rel="prettyPhoto" title="Single Photo"><img src="images/image_small.jpg " alt=" " /></a>
В папке images должны быть файлы image_big.jpg и image_small.jpg соответственно.
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Более детальную информацию об использовании плагина, можно найти в официальном руководстве на сайте http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation
Вы также можете воспользоваться детальным видео туториалом:
JS Animated. Как применить плагин jQuery lightbox «prettyPhoto»