Установка fancybox на сайт (блог) WordPress без плагина
Устанавливаем fancybox на WordPress без помощи плагина.
Я долгое время пользовался плагином "fancybox for WordPress", пока его не взломали и мой блог Гугл кинул в ЧС. На данный момент с плагином все нормально, он также популярен, но я его вряд ли еще раз установлю к себе на сайт.
Мне на блоге галерея по сути не нужна, просто необходимо, чтобы картинки большого разрешения открывались в модальном окне. И в этом мне помог fancybox v1.3.4.
Для начала скачиваем архив , распаковываем его. Внутри основной папки есть папка "fancybox":
Можете ее полностью скопировать на сервер. Я взял из этой папки лишь изображения и файлы "jquery.fancybox-1.3.4.js" и "jquery.fancybox-1.3.4.css" и скопировал их в папку темы. Путь к файлам на сервере: "http://site.ru/wp-content/themes/имя_темы/fancybox".
Теперь подключаем наши файлы, для этого в внутрь тега <head> вписываем код:
<link rel="stylesheet" href="/wp-content/themes/имя_темы/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> <script type="text/javascript" src="/wp-content/themes/имя_темы/fancybox/jquery.fancybox-1.3.4.js"></script>
Этот код можете вставить куда угодно, но обычно ставят также в <head>:
<script type="text/javascript">
$(document).ready(function(){$('a[href $=jpg], a[href $=png]').fancybox();})
</script>
Теперь наши ссылки на картинки форматов jpg и png будут открываться в модальном окне. Вот к примеры:
(картинка jpg)
(картинка png)
Можно также изменить несколько параметров fancybox для удобства:
<script type="text/javascript">
$(document).ready(function(){$('a[href $=jpg], a[href $=png]').fancybox({
'hideOnContentClick':true,
'titleFromAlt':true,
'titlePosition':'inside'
});})
</script>
'hideOnContentClick': true - закрытие модальное окна по клику на картинку
'titleFromAlt': true - заголовок картинки из параметра alt.
'titlePosition': 'inside' - расположение title картинки (outside, over, inside).
Со всеми параметрами fancybox вы можете ознакомится на официальном сайте: .
P.S. Есть более новая версия - fancybox v2. Я поставил, но возникла маленькая проблема - при клике на картинку, выкидывала скроллинг на топ.
