JQuery всплывающие окна — FancyBox

В заметке представлен наглядный пошаговый пример использования популярного JQuery-решения для быстрой и простой организации масштабируемых всплывающих изображений.

JQuery высплывающие окна с FancyBox
1. Подключаем JavaScript файлы FancyBox:

<script type="text/javascript" src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>

2. Запускаем / инициализируем скрипт строчкой:

$('a.fb').fancybox();

Где a.fb — это нечто типа JQuery-селектора.

3. Подключаем стили FancyBox строчкой:

<link rel="stylesheet" type="text/css" href="js/jquery.fancybox.css" media="screen" />

Там, где у вас должны выводиться всплывающие картинки пишем подобные конструкции, обратите внимание на класс fb:

<a class="fb" title="Простая вслывающая картинка" href="images/kartinka-bolshaya.jpg">
  <img src="images/kartinka-malenkaya.jpg" alt="Картинка" width="150" height="150" />
</a>

После всех этих операций вы получите вполне сносные всплывающие окна, которые будут содержать картинки. Скачать пример к статье можно по этой ссылке.

Опубликовано 27-02-2013 в 16:48


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Blogroll:

  • Раскрутка сайта раскрутка и продвижение сайтов в Ростове. →

Последние твиты