В данном посте будут рассмотрен пример использования Fancybox 2: одиночное изображение.
Пример 1. Увеличения одиночного изображения. Посмотреть DEMO
Разместим на странице несколько изображений без возможности переключения между ними при просмотре во всплывающем окне
HTML код
1 2 3 4 5 6 7 8 9 10 11 12 |
<a id="single_1" href="1_b.jpg" title="Лес и солнце"> <img src="1_s.jpg" alt="" /> </a> <a id="single_2" href="2_b.jpg" title="Речная гладь"> <img src="2_s.jpg" alt="" /> </a> <a id="single_3" href="3_b.jpg" title="Это закат"> <img src="3_s.jpg" alt="" /> </a> <a id="single_4" href="4_b.jpg" title="Эйфелева башня ♥"> <img src="4_s.jpg" alt="" /> </a> |
JS код
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 32 33 34 35 36 37 38 39 |
$(document).ready(function() { $("#single_1").fancybox({ helpers: { title : { type : 'float' } } }); $("#single_2").fancybox({ openEffect : 'elastic', loseEffect : 'elastic', helpers : { title : { type : 'inside' } } }); $("#single_3").fancybox({ openEffect : 'none', closeEffect : 'none', helpers : { title : { type : 'outside' } } }); $("#single_4").fancybox({ helpers : { title : { type : 'over' } } }); }); |
Как видим из html кода, каждой ссылке присвоен отдельный идентификатор "id='single_1'", "id='single_2'", "id='single_3'" и "id='single_4'".
В коде JS видим что по каждому идентификатору функция Fancybox вызывается отдельно, это нужно для того что показать 4 различных типа размещения подписи к картинке float, inside, outside, over. В примере под каждой картинкой указано какой тип размещения описания применен к картинке.
Более подробно это будет описано в документации в описании HELPERS чуть позже, сейчас ссылка не активна.
Свою благодарность автору статьи вы можете выразить просто кликнув в нужном месте на странице 🙂
автор: Руслан Овчинников