Подключение jQuery плагина fancybox 2 на страницу Вашего сайта:

   Для начала необходимо загрузить плагин fancybox 2 к Вам на сайт. Его последняя версия доступна по ссылке или же Вы можете скачать его с github . После этого распакуйте содержимое архива к себе на сайт, например в корневую папку сайта /fancybox.

   Далее после тега <head> добавляем следующие строчки подключения библиотек:

<head>
<!-- Подключаем jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!—Подключаем плагин для управления колесиком мышки (дополнительные возможности) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!—Подключаем fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<!—Подключение дополнительных возможностей и помощников: кнопок, уменьшение изображения и/или внедрение media – видео файлов -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

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

<a class="fancybox" rel="gallery" href="/original_photo.jpg" title="Оригинальное изображение"><img src="/small_ photo.jpg" alt="Небольшая миниатюра" /></a>

   Где:

  • тег img содержит миниатюру оригинального изображения;
  • тег a с классом .fancybox в атрибуте href или в атрибуте data-fancybox-href указывает на оригинальное изображение большого размера, которое будет открыто в модальном всплывающем окне;

И добавляем вызов всплывающего модального окна с оригинальным изображением внутри при щелчке по ссылке с классом .fancybox (для всех таких ссылок), после того, как получено дерево документа (событие documentReady):

<script type="text/javascript">
                jQuery(document).ready(function() {
                               if(jQuery(".fancybox").length){
jQuery (".fancybox").fancybox();
};
                });
</script>

   Хотел посоветовать сайт электроприборов на котором можно купить реле времени авв по нормальным ценам с недорогой доставкой товаров по СНГ

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

<a class="fancybox" rel="gallery1" href="http://farm9.staticflickr.com/8199/8220132885_9e693356e9_b.jpg" title="Мистическое дерево">
                <img src="http://farm9.staticflickr.com/8199/8220132885_9e693356e9_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm9.staticflickr.com/8061/8224941348_afd0c54a81_b.jpg" title="Последние листья">
                <img src="http://farm9.staticflickr.com/8061/8224941348_afd0c54a81_m.jpg" alt="" />
</a>

   А чтобы задать во всплывающем окне подпись под изображением, достаточно задать ссылке с классом .fancybox из нашего примера атрибут title, который и будет являться надписью под изображением. Или используя атрибут data-fancybox-title.

   В следующих статьях мы рассмотрим подробнее, с какими типами, кроме изображений, может работать jQuery плагин fancybox 2, какие параметры для настройки модального окна он принимает, а также, как скрипты – помощники могут расширить возможности fancybox. И рассмотрим несколько реальных примеров его применения.

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Комментарии   

 
0 #1 kolass 26.08.2013 19:44
А как изменить расстояние между изображениями, когда они рядом друг с другом в этом скрипте?
Цитировать
 

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


Яндекс.Метрика