28
Фев

Установка fancybox на сайт (блог) WordPress без плагина

Категория: Про Сайты
Теги: ,

Устанавливаем fancybox на WordPress без помощи плагина.

Установка fancybox на сайт (блог) WordPress без плагина

Я долгое время пользовался плагином "fancybox for WordPress", пока его не взломали и мой блог Гугл кинул в ЧС. На данный момент с плагином все нормально, он также популярен, но я его вряд ли еще раз установлю к себе на сайт.

Мне на блоге галерея по сути не нужна, просто необходимо, чтобы картинки большого разрешения открывались в модальном окне. И в этом мне помог fancybox v1.3.4.Для начала скачиваем архив jquery.fancybox-1.3.4.zip, распаковываем его. Внутри основной папки есть папка "fancybox":

Папка 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

(картинка jpg)

Картинка PNG

(картинка 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 вы можете ознакомится на официальном сайте: fancybox.net.

P.S. Есть более новая версия - fancybox v2. Я поставил, но возникла маленькая проблема - при клике на картинку, выкидывала скроллинг на топ.

Похожие записи:

Оставить комментарий

Я не спам! (обязательно)

Подписаться, не комментируя