Главная » Javascript Wordpress » WordPress + FancyBox

WordPress + FancyBox

Добрый день. Сегодня хочу описать процесс встраивания FancyBox в сайт под управлением WordPress. Вы не раз видели, наверное, как кликая на картинке, она красиво увеличивается во всплывающем окне, подобно тому как это сделано на моем блоге. Хотите это же у себя на сайте? Тогда читаем дальше, я опишу весь процесс по шагам.

Шаг 1. Качаем библиотеку FancyBox с официального сайта.

Шаг 2. Загружаем ее на хостинг в папку fancybox.

Шаг 3. В административной части сайта переходим в раздел «Дизайн», далее «Редактор». И находим там файл «Заголовок» (header.php). В нем в head вставляем следующий код:

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

где jquery.fancybox-1.3.4.pack.js — это файл с библиотекой, название может отличаться с вашим.

Шаг 4. Там же в head подключаем таблицу стилей fancybox:

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

где jquery.fancybox-1.3.4.css — файл стилей, название которого тоже может немного отличаться с вашим скаченным.

Шаг 5. Там же после вставляем код:

<script type="text/javascript">
          $(function() { $('a#fb').fancybox(); });
</script>

Все вместе 3-5 шаги:

<head>
...............
...............
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
          $(function() { $('a#fb').fancybox(); });
</script>
</head>

Шаг 6. Добавляем нашей ссылке с картинкой id=»fb» в записи:

<a id="fb" href="/image/image_big.jpg">
     <img src="/image/image_small.jpg" alt="" />
</a>

здесь /image/image_big.jpg — путь до большой картинки, а /image/image_small.jpg — маленькая картинка.

Все, смотрим что получилось 🙂

При перепубликации активная ссылка на этот блог обязательна.
Поблагодарить автора 🙂
 руб.



«
»
➤