На многих сайтах встречал красивые всплывающие окна, при клике на картинку или ссылку. Захотел себе такое же. Ниже я подробно расскажу как установить GreyBox у себя на сайте и почему именно этот модуль.
Когда я загорелся идеей внедрить эту технологию у себя на сайте, то еще не знал, что их много и как это делается. После прогугливания данного вопроса я нашел две вменяемые системы: Lightbox и GreyBox. Их конечно больше, но либо они платные (бесплатно можно использовать только «огрызки»), либо они еще в стадии разработки и не имеют стабильных версий.
Для «делания» разных красивостей я выбрал GreyBox, так как его интерфейс более продуман. Нет проблем с отображением большого изображения на маленьком экране, когда нельзя прокрутить вниз, чтобы посмотреть не влезшее в экран изображение. И места он занимает значительно меньше — 40Кб. К примеру, Lightbox занимает на сайте 240Кб, которые загрузятся при открытие сайта (пусть даже один раз).
Короче, GreyBox — конфета!Установка GreyBox занимает совсем немного времени и является cms-независимой, но все же на бесплатный хостинг поставить, наверное, не удастся. Я устанавливал его на Textpattern, так что в примерах будут приведены фрагменты кода TXP.
Пошаговая установка GreyBox на сайт:
- Загружаем последнюю версию GreyBox с официального сайта проекта. Не пугаемся, скачать придется около 200Кб. Там примеры и еще всего полно. Сам GreyBox, как я уже и говорил, занимает 40Кб.
- В распакованном архиве находим директорию greybox и помещаем ее в корень сайта.
- Далее добавляем в шаблон сайта код, помещая его между html-тегами <head>...</head>: <script type="text/javascript">У меня это выглядит так:
var GB_ROOT_DIR = "http://Ваш_сайт/greybox/";
</script>
<script type="text/javascript" src="/greybox/AJS.js"></script>
<script type="text/javascript" src="/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="/greybox/gb_scripts.js"></script>
<link href="/greybox/gb_styles.css" rel="stylesheet" type="text/css" /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">На этом подключение GreyBox завершено.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
var GB_ROOT_DIR = "http://adminway.ru/greybox/";
</script>
<script type="text/javascript" src="/greybox/AJS.js"></script>
<script type="text/javascript" src="/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="/greybox/gb_scripts.js"></script>
<link type="text/css" rel="stylesheet" href="/greybox/gb_styles.css" />
….
</head> - Чтобы начать использование GreyBox у себя на сайте нужно поместить на сайт две версии картинки (полную и уменьшенную). Допустим, в директорию /images/ и в нужном местена нее поставить html-ссылку.
HTML-ссылка, для красивого вывода одиночной картинки с помощью GreyBox, выглядит так:
Кнопочки навигации в этом варианте будут не доступны (картинка ниже).
HTML-ссылка, для красивого вывода нескольких картинок с помощью GreyBox, выглядит так:
<a href="/images/Jenna_Dewan2.jpg" rel="gb_imageset[CATEGORY]"><img src="/images/Jenna_Dewan2_t.jpg" /></a>
В таком варианте добавятся кнопочки навигации между изображениями одной категорией (CATEGORY). CATEGORY — это название категории картинок, в пределах которой будет происходить перемещение. Название категории указывается заглавными английскими буквами для тех картинок, между которыми осуществляется навигация.
Вот и вся наука.
КОНФЕТА
Автор, спасибо.
Шик и блеск! Спасибо.
Хорошо, что пригодилось.
У меня два вопроса.
1) что это за девочка улыбается на фотке? (очень прикольная)
2) почему мой блог затемняется после добавления папки GreyBox в корневой каталог? (причем на одном компе затемняется, а на двух ноутбуках нет.) Затемнение такое же как при нажатие на фотографию.
1. На фотке Дженна Ли Деван (http://ru.wikipedia.org/wiki/Дженна_Девон). Девочка красивая.
2. Даже не знаю, как вариант могу предложить скинуть Вам свою версию GreyBox (это в случае если ошибка разработчиков) или попробовать установить FancyBox (http://adminway.ru/kak-ustanovit-fancybox-ili-krasivyi-effekt-vsplyvayushchikh-okon)
У меня на одном сайте тоже были с ним проблмы, я решил их, установив FancyBox
Спасибо. Попробую
Спасибо, огромное,Админ!!! Очень классная тема!!!
пользуюсь lightbox
доволен :)
Спасибо, поставила к себе, какая прелесть!
как изменить фон в открываемом окне GreyBox???
По умолчанию стоит – фон в открываемом окне соответствует фону установленному в body.
>Александр
Я думаю должно быть в /greybox/gb_styles.css
Но сам этого не делал.
Установил у себя на сайте. При просмотре в Опере почему то не открывает фото?
Может обновить версию Opera?
В Мозиле открывает фотки с бухтыбарахты((( от настроения зависит? Начинаешь просмотр, открывает пустое окно. Начинаешь листать и может загрузить только n-ю фотку…
Я у себя очень давно установил, и даже… слайд-шоу прикрутил
пример смотреть вот здесь
http://slasoft.kharkov.ua/adventure/?id=kamchatka
отказался от библиотеки AJS_fx.js, почему-то сильно тормозила.
А что используете вместо нее? Пролейте свет
я исключил ее из загрузки на сайт. Как написано у разработчика она обеспечивает различные эффекты. И там же написано, что ее можно безболезненно отключить.
Если хотите, то я сейчас пишу статейку о слайд-шоу на greybox‘е, то стукните в почту – сброшу ссылку.
Сейчас буду пробовать, но написано очень понятно! Спасибо)
Спасибо огромное! отличный скрипт, просто замечательный! Успехов
спасибо. всё просто, понятно и красиво
официальный сайт проекта не грузится:(
Наверное, были временные проблемы. Сейчас все гуд.
Подскажите пожалуйста, как поменять размер всплывающего окна на различные Web-ресурсы?
Огромная просьба – сбрось на мой e-mail свою папку "greybox". То что скачиваю с сайта – некоректно работает(
Тоже пока листать не начну белый квадрат, в любом браузере. Что делать? Как исправить?
Тоже пока листать не начну белый квадрат, в mozilla и Google Chrome. Что делать? Как исправить? В opera и IE нормально
А еще изменил строку <script type="text/javascript"> var GB_ROOT_DIR = "http://Ваш_сайт/greybox/";</script>
на
<script type="text/javascript"> var GB_ROOT_DIR = "greybox/";</script> заработало одинаково для паркованных доменов
Спасибо!
круть-верть и приветь,круто,искал подобное и нашел еще лучше,спасиб за материал
Скажите пожалуйста, почему изображения открываются в НОВОМ окне, а не так, как показано в примере? Спасибо.
Возможно нужно подождать пока до конца загрузится сайт или Вы где-то напутали с путями подключаемых JS-файлов. Откройте страницу вашего сайта и посмотрите исходный код, потыкав на ссылках. Должно все открываться и не быть ошибок.
..перетыкала"" уже все не раз, даже и модуль как-то установился..:) Но вот через пень"" у меня там как-то все легло однозначно *ибо бестолковая видимо. Написано все замечательно и понятно, просто у меня не в корне картинки..да еще и блоками, по-моему что-то там конфликтует..:) Буду искать дальше. И еще, отдельное спасибо вам, Ваня, за блог! Пусть все у вас будет хорошо, ведь душевный парнишка какой!:)
Спасибо за скрипт, как раз то что искал, все работает как нужно…
вот такая же хрень. при запуске с хрома появляется белый квадрат. проверял на нескольких компьютерах. причем в данном блоге, с данными примерами работает все замечательно. С IE зашел на свой сайт, работает хорошо. Кто-нибудь знает почему так происходит? Помогите плиз)))
с ссылкой на ВК не робит эта штука
Чёт я не чё не понял
"вот такая же хрень. при запуске с хрома появляется белый квадрат. проверял на нескольких компьютерах. причем в данном блоге, с данными примерами работает все замечательно. С IE зашел на свой сайт, работает хорошо. Кто-нибудь знает почему так происходит? Помогите плиз)))"
Вот та же фигня
неа
Спасибо большое, просто супер =) клац! по рекламам за этою.
хм та хе фигня в опере работает в мозиле работает в IE немного глючит с шириной но работает а в хроме тупо висит картинка loading… и всё…. (((( если кто уже нашел решение как пофиксить проблему с хромом отпишите плиз…
bq.. *mashtoz: “вот такая же хрень. при запуске с хрома появляется белый квадрат. проверял на нескольких компьютерах. причем в данном блоге, с данными примерами работает все замечательно*
Думаю, что это связано с размером картинки. У меня тоже такое. Подгрузил девиц – работают правильно. Мои файлы нет. У девиц – около 40 кб, у меня – от 50.
Такого эффект не замечал ниразу