Плагин Easy FancyBox

Данный плагин для вордпресс позволяет реализовать перевод пользователя на форму обратной связи без перехода на другую страницу. Наглядный пример действия плагина Easy FancyBox можно посмотреть кликнув на картинку.

Зачем это нужно?

Ну во первых — надо помнить — юсер ленив. Сайты с хорошим юсабилити всегда получат больше клиентов. А причем тут Easy FancyBox и

всплывающие окна связи? — да все очень просто — в одном окне мы можем показать юсеру максимум информации и обеспечить максимум удобств для него! Хочешь написать письмо — один клик на кнопку и всплывает окно с формой связи, хочешь глянуть цены — клик и всплывает окно с прайсом. А главное — пользователь не бродит по страницам в поисках нужной информации — мы сами ему все предоставляем в рамках одного окна. Гораздо больше шансов на то, что пользователь начнет писать сообщение или делать заказ, когда форма уже открылась перед ним!

Как это работает — создается форма связи в Contact Form 7, берем картинку и делаем картинку ссылкой на форму связи

1
2
3
4

<a class="fancybox" href="#contact_form_pop1"><img src="адрес картинки" alt="" width="250" height="250" /></a>
<div class="fancybox-hidden" style="display: none;">
<div id="contact_form_pop1"></div>
</div>

При этом на одной странице можно несколько раз использовать Easy FancyBox, только для каждой формы надо указать свой порядковый номер — пример

contact_form_pop1

тут стоит 1, следовательно, когда мы будем вставлять второе всплывающее окно при помощи плагина FancyBox, то нужно поставить 2 без пробелов. Обратите внимание — номер указывается в двух местах кода

Но тут я захотел поставить Easy FancyBox на кнопку, которая по мимо вывода форма связи еще должна изменять вид при наведении курсора мышки. Ну реализовать всплывающее окно и создать «активность» кнопки по отдельности — это не сложно и уже делал. нарисовал кнопки с эффектом и без, поставил в код на место картинки примерно следующее

<img 

src="cooltext120652803868648.png" onmouseover="this.src='cooltext120652803868648MouseOver.png';" 

onmouseout="this.src='cooltext120652803868648.png';" />

не могу сказать, что пошло не так, при обновлении страницы картинки кнопок выкидывало из тега <a> и переставало работать все — и окно FancyBox не всплывало и код кнопок менялся на одиночную картинку. После нескольких попыток найти ошибку в коде — плюнул и решил использовать обычный css для изменения кнопки при наведении

.blok1 {position: relative; cursor:pointer; display: inline-block; border: 0px; margin-top: -30px;}
.blok1 img + img {position:absolute; left: 0px; top: 0px; z-index:100; display: none;  width: 100%;}
.blok1:hover img + img {display: block;}

ну и естественно для вставки на страницу

<div class="blok1"><a class="fancybox" 

href="#contact_form_pop1"><img src="адрес1" alt="" /><img src="адрес2" alt="" /></a></div>
<div class="fancybox-hidden" style="display: none;">
<div id="contact_form_pop1">[contact-form-7 404 "Not Found"]</div>
</div>