Идеален для сайтов-визиток

Всплывающие окна

microText logo

Наводим красоту на своём сайте. Хотите использовать красиво увеличивающиеся изображения на своём сайте? Для примера кликните по логотипу справа.

Это очень просто, нужно всего лишь подключить скрипт и оформить ссылку нужным способом.

Подключение скрипта

Идите на сайт 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 при этом работают нормально.