Как установить FancyBox или красивый эффект всплывающих окон

Как установить FancyBox или красивый эффект всплывающих окон

Как-то я писал об эффекте GreyBox. Эффект красивый, но на моем блоге посвященном интересной рекламе, он почему-то корректно не заработал. Долго разбираться не стал, так как такого добра много.

Первым скриптом, который попался мне на глаза, оказался FancyBox. На нем и становил свой выбор.

Плагин FancyBox умеет все то же, что и GreyBox и даже больше. А точнее FancyBox умеет:

  • красиво выводить увеличенные изображения;
  • подгонять выводимые изображения под размер экрана (нет проблемы, когда изображение не влезает в экран, но иногда на моем нетбуке изображение не увеличивается, так как экран маленький :), но это не так категорично);
  • группировать изображения;
  • выводить флешролики;
  • выводить отдельную web-страницу по URL.

Для того, чтобы установить FancyBox на свой сайт Вам потребуется:
  1. Загружаем код с сайта разработчика FancyBox.
  2. В архиве находится директория fancybox, которую следует поместить в корень Вашего сайта и CSS-файл style.css помещаем туда, где лежат Ваши CSS.
  3. Далее между тегами <HEAD>...<HEAD> помещаем ниже приведенный код:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.2.6.css" media="screen" />
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.2.6.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $("a.zoom").fancybox();
    $("a.zoom1").fancybox({
    'overlayOpacity' : 0.7,
    'overlayColor' : '#FFF'
    });
    $("a.zoom2").fancybox({
    'zoomSpeedIn' : 500,
    'zoomSpeedOut' : 500
    });
    });
    </script>
  4. С установкой покончено. Далее в том месте, где нужно вывести изображение помещаем код:
    <a class="zoom" rel="group" title="Социальная реклама. Реклама, которая заставляет задуматься" href="/images/soz_reklama_1.jpg"><img src="/images/soz_reklama_1_t.jpg" alt="" /></a>

Сразу извиняюсь, но я не могу привести наглядную демонстрацию сего скрипта, так как он конфликтует с ранее установленным скриптом GreyBox. Реализацию скрипта FancyBox можно посмотреть на блоге рекламы.

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

  1. Вита опубликовал комментарий 20 Октябрь 2010, 13:09 #

    Спасибо за грамотную подачу урока, получилось!

    | Ответить
  2. Сеня опубликовал комментарий 19 Февраль 2011, 07:27 #

    Спасибо огромное. Все работает :)

    | Ответить
  3. Mut@NT опубликовал комментарий 19 Февраль 2011, 10:58 #

    Сеня: Спасибо огромное. Все работает :)

    Иначе и быть не может ;)

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

    у меня почему-то ничего не вышло:((…а вообще хотел GreyBox, но не могу скачать:(( буду признателен если вы мне поможете…

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

      С FancyBox проблем вроде не было. А сайт GreyBox уже доступен

      | Ответить
  5. novichek опубликовал комментарий 6 Февраль 2012, 12:41 #

    а для совсем новичков можно подробней? между тегами <HEAD>…<HEAD>
    это в каком файле? style.css в корне уже есть куда его помещать?

    | Ответить
    • Admin опубликовал комментарий 18 Февраль 2012, 22:32 #

      novichek: а для совсем новичков можно подробней? между тегами <HEAD>…<HEAD>
      это в каком файле? style.css в корне уже есть куда его помещать?

      Смотря что за CMS.

      | Ответить
  6. Аврора опубликовал комментарий 14 Апрель 2012, 09:11 #

    Есть куда более легкое (по весу) решение. Этож надо джэкверю тащить на страницу + скрипт fancybox-a.
    Решение – www.scriptiny.com/20…. Весит очень немного.
    Если никаких финтиплюшек не надо кроме окна , то tinybox – это супер. Задействовал здесь amway24.ru/catalog.p…

    | Ответить
  7. Adan опубликовал комментарий 8 Декабрь 2012, 00:12 #

    Скажите, пожалуйста, есть ли отличия по установке со второй версией этого плагина? Пытаюсь поставить на Joomla 3.0, но не могу понять, что из архива куда распаковывать… там и папка с демо, и папка lib с js файлами, и папка source, где картинки, js и css файлы… Буду признателен за ответ!

    | Ответить
  8. Сергей опубликовал комментарий 25 Май 2013, 16:52 #

    Хотелось бы сначала увидеть внешний вид данного всплывающего окна, прежде чем его устанавливать себе на блог

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