Как установить скрипт GreyBox или красивые всплывающие окна у себя на сайте

На многих сайтах встречал красивые всплывающие окна, при клике на картинку или ссылку. Захотел себе такое же. Ниже я подробно расскажу как установить GreyBox у себя на сайте и почему именно этот модуль.

Когда я загорелся идеей внедрить эту технологию у себя на сайте, то еще не знал, что их много и как это делается. После прогугливания данного вопроса я нашел две вменяемые системы: Lightbox и GreyBox. Их конечно больше, но либо они платные (бесплатно можно использовать только «огрызки»), либо они еще в стадии разработки и не имеют стабильных версий.

Для «делания» разных красивостей я выбрал GreyBox, так как его интерфейс более продуман. Нет проблем с отображением большого изображения на маленьком экране, когда нельзя прокрутить вниз, чтобы посмотреть не влезшее в экран изображение. И места он занимает значительно меньше — 40Кб. К примеру, Lightbox занимает на сайте 240Кб, которые загрузятся при открытие сайта (пусть даже один раз).

Короче, GreyBox — конфета!

Официальный сайт GreyBox.

Установка GreyBox занимает совсем немного времени и является cms-независимой, но все же на бесплатный хостинг поставить, наверное, не удастся. Я устанавливал его на Textpattern, так что в примерах будут приведены фрагменты кода TXP.

Пошаговая установка GreyBox на сайт:

  1. Загружаем последнюю версию GreyBox с официального сайта проекта. Не пугаемся, скачать придется около 200Кб. Там примеры и еще всего полно. Сам GreyBox, как я уже и говорил, занимает 40Кб.
  2. В распакованном архиве находим директорию greybox и помещаем ее в корень сайта.
  3. Далее добавляем в шаблон сайта код, помещая его между 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">
    <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 завершено.
  4. Чтобы начать использование GreyBox у себя на сайте нужно поместить на сайт две версии картинки (полную и уменьшенную). Допустим, в директорию /images/ и в нужном местена нее поставить html-ссылку.
  5. HTML-ссылка, для красивого вывода одиночной картинки с помощью GreyBox, выглядит так:

    <a href="/images/test.jpg" rel="gb_image[]"><img src="/images/test_t.jpg" /></a>

    Кнопочки навигации в этом варианте будут не доступны (картинка ниже).

    HTML-ссылка, для красивого вывода нескольких картинок с помощью GreyBox, выглядит так:

    <a href="/images/Jenna_Dewan1.jpg" rel="gb_imageset[CATEGORY]"><img src="/images/Jenna_Dewan1_t.jpg" /></a>
    <a href="/images/Jenna_Dewan2.jpg" rel="gb_imageset[CATEGORY]"><img src="/images/Jenna_Dewan2_t.jpg" /></a>

    В таком варианте добавятся кнопочки навигации между изображениями одной категорией (CATEGORY). CATEGORY — это название категории картинок, в пределах которой будет происходить перемещение. Название категории указывается заглавными английскими буквами для тех картинок, между которыми осуществляется навигация.

    Вот и вся наука.
P.S. С помощью GreyBox можно также красиво выводить ссылки на различные Web-ресурсы:
<a href="http://adminway.ru/" title="Путь админа" rel="gb_page_fs[]">Хороший блог системного администратора!</a>
Это будет выглядеть вот так:

Сайт о Linux.

Эти ссылки можно тоже групировать.

Комментарии:

  1. kartinka опубликовал комментарий 19 Сентябрь 2009, 10:15 #

    КОНФЕТА

    | Ответить
  2. EM опубликовал комментарий 9 Октябрь 2009, 10:55 #

    Автор, спасибо.

    | Ответить
  3. Денис опубликовал комментарий 20 Январь 2010, 12:34 #

    Шик и блеск! Спасибо.

    | Ответить
  4. Admin опубликовал комментарий 20 Январь 2010, 13:37 #

    Хорошо, что пригодилось.

    | Ответить
  5. Stepanisk опубликовал комментарий 21 Февраль 2010, 01:25 #

    У меня два вопроса.
    1) что это за девочка улыбается на фотке? (очень прикольная)
    2) почему мой блог затемняется после добавления папки GreyBox в корневой каталог? (причем на одном компе затемняется, а на двух ноутбуках нет.) Затемнение такое же как при нажатие на фотографию.

    | Ответить
  6. Admin опубликовал комментарий 21 Февраль 2010, 08:57 #

    1. На фотке Дженна Ли Деван (http://ru.wikipedia.org/wiki/Дженна_Девон). Девочка красивая.

    2. Даже не знаю, как вариант могу предложить скинуть Вам свою версию GreyBox (это в случае если ошибка разработчиков) или попробовать установить FancyBox (http://adminway.ru/kak-ustanovit-fancybox-ili-krasivyi-effekt-vsplyvayushchikh-okon)

    У меня на одном сайте тоже были с ним проблмы, я решил их, установив FancyBox

    | Ответить
  7. Stepanisk опубликовал комментарий 21 Февраль 2010, 10:28 #

    Спасибо. Попробую

    | Ответить
  8. Afavorit опубликовал комментарий 26 Март 2010, 13:41 #

    Спасибо, огромное,Админ!!! Очень классная тема!!!

    | Ответить
  9. orko опубликовал комментарий 27 Май 2010, 19:27 #

    пользуюсь lightbox
    доволен :)

    | Ответить
  10. Анна опубликовал комментарий 12 Июль 2010, 12:54 #

    Спасибо, поставила к себе, какая прелесть!

    | Ответить
  11. Александр опубликовал комментарий 11 Август 2010, 00:44 #

    как изменить фон в открываемом окне GreyBox???
    По умолчанию стоит – фон в открываемом окне соответствует фону установленному в body.

    | Ответить
  12. Admin опубликовал комментарий 11 Август 2010, 12:12 #

    >Александр
    Я думаю должно быть в /greybox/gb_styles.css
    Но сам этого не делал.

    | Ответить
  13. realtor опубликовал комментарий 28 Август 2010, 12:43 #

    Установил у себя на сайте. При просмотре в Опере почему то не открывает фото?

    | Ответить
  14. Admin опубликовал комментарий 2 Сентябрь 2010, 07:49 #

    Может обновить версию Opera?

    | Ответить
  15. oksij опубликовал комментарий 16 Сентябрь 2010, 22:30 #

    В Мозиле открывает фотки с бухтыбарахты((( от настроения зависит? Начинаешь просмотр, открывает пустое окно. Начинаешь листать и может загрузить только n-ю фотку…

    | Ответить
  16. Slava опубликовал комментарий 21 Сентябрь 2010, 08:26 #

    Я у себя очень давно установил, и даже… слайд-шоу прикрутил
    пример смотреть вот здесь
    http://slasoft.kharkov.ua/adventure/?id=kamchatka
    отказался от библиотеки AJS_fx.js, почему-то сильно тормозила.

    | Ответить
  17. Admin опубликовал комментарий 21 Сентябрь 2010, 13:24 #

    Slava: отказался от библиотеки AJS_fx.js, почему-то сильно тормозила.

    А что используете вместо нее? Пролейте свет

    | Ответить
  18. slava опубликовал комментарий 21 Сентябрь 2010, 19:55 #

    я исключил ее из загрузки на сайт. Как написано у разработчика она обеспечивает различные эффекты. И там же написано, что ее можно безболезненно отключить.
    Если хотите, то я сейчас пишу статейку о слайд-шоу на greybox‘е, то стукните в почту – сброшу ссылку.

    | Ответить
  19. Юльчик опубликовал комментарий 6 Декабрь 2010, 17:50 #

    Сейчас буду пробовать, но написано очень понятно! Спасибо)

    | Ответить
  20. Ирина, Москва опубликовал комментарий 31 Январь 2011, 00:51 #

    Спасибо огромное! отличный скрипт, просто замечательный! Успехов

    | Ответить
  21. Михаил опубликовал комментарий 9 Июль 2011, 15:25 #

    спасибо. всё просто, понятно и красиво

    | Ответить
  22. Klim опубликовал комментарий 8 Август 2011, 18:00 #

    официальный сайт проекта не грузится:(

    | Ответить
    • Admin опубликовал комментарий 18 Август 2011, 13:26 #

      Наверное, были временные проблемы. Сейчас все гуд.

      | Ответить
  23. Сергей опубликовал комментарий 25 Август 2011, 03:38 #

    Подскажите пожалуйста, как поменять размер всплывающего окна на различные Web-ресурсы?

    | Ответить
  24. Евгений опубликовал комментарий 13 Октябрь 2011, 01:16 #

    Огромная просьба – сбрось на мой e-mail свою папку "greybox". То что скачиваю с сайта – некоректно работает(

    | Ответить
  25. Вадим опубликовал комментарий 13 Октябрь 2011, 18:48 #

    *oksij:В Мозиле открывает фотки с бухтыбарахты((( от настроения зависит? Начинаешь просмотр, открывает пустое окно. Начинаешь листать и может загрузить только n-ю фотку…

    Тоже пока листать не начну белый квадрат, в любом браузере. Что делать? Как исправить?

    | Ответить
  26. Вадим опубликовал комментарий 13 Октябрь 2011, 19:58 #

    *oksij:В Мозиле открывает фотки с бухтыбарахты((( от настроения зависит? Начинаешь просмотр, открывает пустое окно. Начинаешь листать и может загрузить только n-ю фотку…

    Тоже пока листать не начну белый квадрат, в 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> заработало одинаково для паркованных доменов

    | Ответить
  27. Никита опубликовал комментарий 12 Ноябрь 2011, 17:06 #

    Спасибо!

    | Ответить
  28. arthol опубликовал комментарий 19 Ноябрь 2011, 03:03 #

    круть-верть и приветь,круто,искал подобное и нашел еще лучше,спасиб за материал

    | Ответить
    • Mut@NT опубликовал комментарий 28 Июнь 2012, 10:50 #

      Да не за что. Рад, что помогло

      | Ответить
  29. Жанна опубликовал комментарий 20 Ноябрь 2011, 04:52 #

    Скажите пожалуйста, почему изображения открываются в НОВОМ окне, а не так, как показано в примере? Спасибо.

    | Ответить
    • Admin опубликовал комментарий 21 Ноябрь 2011, 05:58 #

      Возможно нужно подождать пока до конца загрузится сайт или Вы где-то напутали с путями подключаемых JS-файлов. Откройте страницу вашего сайта и посмотрите исходный код, потыкав на ссылках. Должно все открываться и не быть ошибок.

      | Ответить
  30. Жанна опубликовал комментарий 23 Ноябрь 2011, 02:07 #

    ..перетыкала"" уже все не раз, даже и модуль как-то установился..:) Но вот через пень"" у меня там как-то все легло однозначно *ибо бестолковая видимо. Написано все замечательно и понятно, просто у меня не в корне картинки..да еще и блоками, по-моему что-то там конфликтует..:) Буду искать дальше. И еще, отдельное спасибо вам, Ваня, за блог! Пусть все у вас будет хорошо, ведь душевный парнишка какой!:)

    | Ответить
  31. warez опубликовал комментарий 11 Декабрь 2011, 10:56 #

    Спасибо за скрипт, как раз то что искал, все работает как нужно…

    | Ответить
  32. Владимир опубликовал комментарий 20 Декабрь 2011, 01:05 #

    вот такая же хрень. при запуске с хрома появляется белый квадрат. проверял на нескольких компьютерах. причем в данном блоге, с данными примерами работает все замечательно. С IE зашел на свой сайт, работает хорошо. Кто-нибудь знает почему так происходит? Помогите плиз)))

    | Ответить
  33. Вася опубликовал комментарий 14 Январь 2012, 15:28 #

    с ссылкой на ВК не робит эта штука

    | Ответить
  34. SEmi опубликовал комментарий 23 Январь 2012, 18:37 #

    Чёт я не чё не понял

    | Ответить
    • Mut@NT опубликовал комментарий 28 Июнь 2012, 10:51 #

      Да вроде все просто же

      | Ответить
  35. mashtoz опубликовал комментарий 3 Февраль 2012, 12:36 #

    "вот такая же хрень. при запуске с хрома появляется белый квадрат. проверял на нескольких компьютерах. причем в данном блоге, с данными примерами работает все замечательно. С IE зашел на свой сайт, работает хорошо. Кто-нибудь знает почему так происходит? Помогите плиз)))"

    Вот та же фигня

    | Ответить
  36. mashtoz опубликовал комментарий 3 Февраль 2012, 18:56 #

    неа

    | Ответить
  37. Рамиль опубликовал комментарий 18 Март 2012, 00:25 #

    Спасибо большое, просто супер =) клац! по рекламам за этою.

    | Ответить
  38. inlst опубликовал комментарий 15 Апрель 2012, 16:07 #

    хм та хе фигня в опере работает в мозиле работает в IE немного глючит с шириной но работает а в хроме тупо висит картинка loading… и всё…. (((( если кто уже нашел решение как пофиксить проблему с хромом отпишите плиз…

    | Ответить
  39. Uhby опубликовал комментарий 11 Май 2012, 15:25 #

    bq.. *mashtoz: “вот такая же хрень. при запуске с хрома появляется белый квадрат. проверял на нескольких компьютерах. причем в данном блоге, с данными примерами работает все замечательно*

    Думаю, что это связано с размером картинки. У меня тоже такое. Подгрузил девиц – работают правильно. Мои файлы нет. У девиц – около 40 кб, у меня – от 50.

    | Ответить
    • Mut@NT опубликовал комментарий 17 Май 2012, 14:01 #

      Такого эффект не замечал ниразу

      | Ответить
  40. Дмитрий опубликовал комментарий 20 Декабрь 2012, 16:11 #

    Все замечательно. Но этот скрипт конфликтует с другим скриптом ( http://bxslider.com/ )
    Ошибка: TypeError: a.nodeName.toLowerCase is not a function

    Даже незнаю как решить проблему((( Если удаляю <script type=“text/javascript” src=“greybox/AJS.js”></script> то тот скрипт работает, но тогда не работает грейбокс(

    | Ответить
  41. Романски опубликовал комментарий 4 Апрель 2013, 03:26 #

    Как правильно указать ссылку вот тут:
    <script type=“text/javascript”>
    var GB_ROOT_DIR = “http://Ваш_сайт/greybox/”;
    </script>

    Если страница, на которой должен быть установлен greybox не главная.
    т.е. имеет путь: http://главная страница/не главная/html
    ?

    | Ответить
    • ITShaman опубликовал комментарий 4 Апрель 2013, 10:45 #

      Это путь до скрипта, то есть то место где лежит физически скрипт GreyBox

      | Ответить
      • Романски опубликовал комментарий 4 Апрель 2013, 16:22 #

        Разобрался.
        Просто вчера ночью делал, запутался немного.
        Спасибо за тему и довольно быстрый ответ.

        | Ответить
        • Романски опубликовал комментарий 4 Апрель 2013, 19:10 #

          Но проблема та же. Картинка загрузится только после вторичного обращения к ней.

          | Ответить
          • ITShaman опубликовал комментарий 5 Апрель 2013, 07:25 #

            Все дело в версии jQuery. Попробуйте более старые версии

            | Ответить
Имя
e-mail
Сайт
Текст комментария: