Отправляет email-рассылки с помощью сервиса Sendsay

Свой CMS сайт - это просто!

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Январь 2011   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

7.772 подписчиков
-9 за неделю
←   Все выпуски   →

Свой CMS сайт - это просто!


Автор: Светлана Русова

Мой блог

   

Свой CMS сайт - это просто!

Здравствуйте!

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

Fancybox

- это библиотека javascript, инструмент для создания красивых всплывающих окон. Эта библиотека позволяет размещать во всплывающих окнах практически любой вебовский контент: изображения, HTML, формы, мультимедиа. По словам разработчиков новые окна оформляются в очень актуальном сейчас стиле Mac OS.


Основные преимущества Fancybox:

  1. Во всплывающие окна можно помещать изображения, HTML элементы, флеш-ролики (swf), Iframe, а также обрабатывать Ajax-запросы.
  2. Поведение окна регулируется через настройки, а оформление — стилями CSS
  3. Элементы легко группируются в одно окно и к ним автоматически добавляется навигация (очень удобно для создания фотогалерей, набора иллюстраций к статье, дополнительных изображений товара).
  4. Поддерживается навигация колесом мыши.
  5. С помощью простого плагина можно разнообразить эффекты при открывании и закрывании окна.
  6. Красивое оформление всплывающего окна, которое вписывается практически в любой дизайн.

Примеры использования

Дополнительные фотографии товаров, когда по клику на маленькую картинку, в специальном окошке посередине монитора появляется большая. А если доп.картинок несколько их можно объединить в галерею.

Форма авторизации или подписки на рассылки без перехода на новую страницу.

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

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

Инструкция по подключению

Если вы не видите примеров подключения, или они искажены, посмотрите оригинал этой статьи в моем блоге

Подключаем библиотеку, можно воспользоваться технологией CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
type="text/javascript"><!--mce:0--></script>
<script src="/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"><!--mce:1--></script>

Если вам нужны дополнительные эффекты переходов нужно подключить еще один пакет, по умолчанию доступны только “swing” и “linear”.

<script src="/fancybox/jquery.easing-1.4.pack.js" type="text/javascript"><!--mce:2--></script>

Если вы планируете использовать навигацию с помощью колеса мыши, то подключите еще одну библиотеку:

<script src="/fancybox/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"><!--mce:3--></script>

Подключите лист стилей

Не забудьте изменить путь к файлу, если он расположен в другой директории.

Создайте ссылку для всплывающего окна

  • Пример ссылки на окно с изображением
    <a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt="" /></a>
  • Пример ссылки на окно с текстом
    <a id="inline" href="#data">По клику в окне откроется элемент с id="data"</a>
<div style=""display:" none;">
<div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
  • Iframe
    <a href="http://www.example?iframe">Это ссылка на iframe</a>

    или

    <a class="iframe" href="http://www.example">Это тоже ссылка на iframe</a>
  • Ajax
    <a href="http://www.example/data.php">Здесь выводится контент с использованием ajax</a>

Кстати, если вы добавить title к тегу ссылки, он станет заголовком всплывающего окна.

Подключите функцию fancybox на странице

Привожу простой пример подключения с сайта разработчиков.

$(document).ready(function() {
   /* This is basic - uses default settings */
   $("a#single_image").fancybox();
 
   /* Using custom settings */
   $("a#inline").fancybox({
        'hideOnContentClick': true
   });
 
   /* Apply fancybox to multiple items */
   $("a.group").fancybox({
        'transitionIn' : 'elastic',
        'transitionOut' : 'elastic',
        'speedIn'  : 600,
        'speedOut'  : 200,
        'overlayShow' : false
    });
});

Обратите внимание, id – это идентификатор для одного элемента, если вы хотите использовать плагин для группы элементов, то нужно использовать class.

Для демонстрации текстов, Ajax или iframe, рекомендуется установить параметр hideOnContentClick в значение false.

Для создания галлереи изображений используйте тег rel

/* HTML */
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt="" /></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt="" /></a> 
 
<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt="" /></a>
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt="" /></a>
 
/* This will create two galleries */
$("a.grouped_elements").fancybox();

По материалам сайта: http://fancybox.net
В избранное