Всплывающие окна
Наводим красоту на своём сайте. Хотите использовать красиво увеличивающиеся изображения на своём сайте? Для примера кликните по логотипу справа.
Это очень просто, нужно всего лишь подключить скрипт и оформить ссылку нужным способом.
Подключение скрипта
Идите на сайт fancyBox, качайте код скрипта, забрасывайте папку fancybox/ в папку js/ на сервере и вставляйте в перед </body> вашего шаблона код:
<? if (isset($fancybox_enabled && $fancybox_enabled === true)): ?>
<script type="text/javascript" src="<?= $config['sitelink'] ?>js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?= $config['sitelink'] ?>js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'overlayShow' : false
});
});
</script>
<? endif ?>
С настройками вывода разберитесь сами. На оффсайте всё детально описано. К тому же настройки можно просто взять из примеров.
На тех страницах, на которых нужна подсветка кода, добавьте параметр:
$fancybox_enabled = true;
Оформление изображений
Оформлять изображение нужно ссылкой. Вот так.
<a href="<?= $config['sitelink']?>i/1.jpg" id="1" title="Заголовок изображения" class="fancybox" rel="group">
<img src="<?= $config['sitelink']?>i/1-small.jpg">
</a>
Обратите внимание
- Ссылка должна вести на большое изображение, а эскиз должен быть помещён в тег a.
- Ссылке должен быть присвоен класс fancybox.
- Если хотите, чтобы изображения выводились в виде галерем, то присвойте ссылкам параметр rel="group", где group – идентификатор галереи. Их может быть несколько на странице.
Также следует знать
С помощью скрипта вы можете не только увеличивать изображения. Во всплывающем окошке можно также выводить текст, формы, видео. Вариантов использования много. Почитайте о них подробней на оффсайте.
Существует небольшая несовместимость со скриптом подсказок qTip. Оба скрипта используют title ссылок, поэтому всплывающие изображения не будут иметь заголовков.
Подсказки от Bootstrap при этом работают нормально.