Привіт, хлопці, давно не бачилися вже, однак. Але ось він я! Сьогодні вирішив розповісти про те, про що мене часто запитують, а саме – за допомогою якого плагіна у мене показуються картинки на блозі? Я відповідаю – ніякого плагіна, виключно ручна робота. Зрозуміло, за основу були взяти готові рішення, які я інтегрував в WordPress – мова йде про чудовий jQuery Fancybox.

Мені здається, що Fancybox є більш вдалим і легким рішенням, ніж інші загальновизнані рішення типу Lightbox. Не буду вдаватися в подробиці і розповідати чому, просто я так вважаю і цього достатньо. І сьогодні я розповім вам, як дуже швидко і легко підключити Fancybox в WordPress, а так само як його налаштувати.

Найприємніше в моєму рішенні про те, що не доведеться вносити ніяких змін в існуючі та майбутні пости блогу, вся необхідна інформація буде братися з існуючих даних, а налаштування виведення та відображення змінюються в самому JavaScript коді виклику.

До речі, процес підключення дуже схожий на установку форми зворотного зв’язку на jQuery, про яку я одного разу розповідав, і яка вам дуже сподобалась.

Перед початком наших робіт пропоную позыркать на дівок, так і як же без цицьок та в п’ятницю ^_^ ж Вам таке подобається, так?
Ви не подумайте чого, це я фотографію викладаю для того, щоб подивитися живий приклад роботи Fancybox’а. До речі, ця моя фотографія, зроблена в самому мажорному клубі міста Іркутська, я був там фотографом, і викладати фото звідти заборонено, але для вас я ризикую.

Скачати Fancуbox (дистрибутив версії 1.3.4)

За основу я брав актуальний на той час (час, коли я інтегрував дане рішення на свій блог) архів jquery fancybox 1.3.4 – з ним ми і будемо працювати.

Відразу відповім на можливе запитання – А чому не fancyBox version 2? – Так, друга версія більш крута, легка і швидка, але в ній прибрані якраз ті функції, без яких не вдасться інтегрувати скрипт без внесення змін в кожен пост на блозі. Тому будемо користуватися хоч і більш старої, але надійної версією 1.3.4.

Завантажити jquery.fancybox-1.3.4.zip

Установка Fancybox і підключення

  • Отже, ми завантажили і розпакували архів собі на комп’ютер в папку jquery.fancybox-1.3.4
  • Усередині позначеної папки є ще одна папка під назвою fancybox – її треба залити на сервер, наприклад, в папку з плагінами /wp-content/plugins/. Таким чином, потрібне нам вміст має опинитися тут site.ru/wp-content/plugins/fancybox
  • Відкриваємо редактор шаблону в адмінці і файл functions.php у самий початок, наприклад, додаємо наступні рядки:
    function my_css() {
    echo .\n;
    }
    add_action(‘wp_head’, ‘my_css’, 5);
    if ( !is_admin() ) {
    wp_enqueue_script(‘fancybox’, ‘/wp-content/plugins/fancybox/jquery.fancybox-1.3.4.js’, ‘jquery’, ‘1.3.4’);
    }

    function my_css() {
    echo “.”\n”;
    }
    add_action(‘wp_head’, ‘my_css’, 5);
    if ( !is_admin() ) {
    wp_enqueue_script(‘fancybox’, ‘/wp-content/plugins/fancybox/jquery.fancybox-1.3.4.js’, ‘jquery’, ‘1.3.4’);
    }

    Першою функцією ми додаємо в шаблон сайту css файл стилів, а функцією wp_enqueue_script (); ми безпечно додаємо сам js-скрипт fancybox, таким чином, щоб він обов’язково йшов після підключеного основного jQuery.

  • Відкриваємо в редакторі файл шаблону header.php і відразу перед додаємо наступний js-код виклику:
    <script type=“text/javascript”>$(document).ready(function(){$(‘a[href^=”http://site.ru/wp-content/uploads/”]:has(img)’).fancybox({‘hideOnContentClick’:true,‘titleFromAlt’:true,‘titlePosition’:‘outside’,‘padding’:‘5’,‘margin’:’25’});});</script>

    $(document).ready(function(){$(‘a[href^=”http://site.ru/wp-content/uploads/”]:has(img)’).fancybox({‘hideOnContentClick’:true,’titleFromAlt’:true,’titlePosition’:’outside’,’padding’:’5′,’margin’:’25’});});

  • Чистимо кеш і перезавантажуємо будь-яку сторінку блогу з картинками — насолоджуємося видами 😉
  • Налаштування Fancybox і параметри

    Найскладніше у всьому цьому неподобстві це пункт номер 4. До такого виду я прийшов через місяць, після першої інтеграції. Все геніальне не так і просто, як здається 🙂

    • ‘a[href^=”http://site.ru/wp-content/uploads/”]:has (img)’ – цей код обмежує застосування виклику fancybox тільки на картинки і тільки ті, які завантажуються в папку /wp-content/uploads/ блогу, тобто це як раз картики, які ми додаємо до постів. Без цього коду в модельному вікні починають відкриватися будь-які картинки присутні на сайті, в тому числі і лічильники, і елементи дизайну, і все що завгодно.
    • ‘hideOnContentClick’:true – даний код активує функцію закрити спливне вікно по кліку. Без цього коду закрити вікно можна буде тільки натиснувши на хрестик у правому верхньому кутку відкритого зображення, що, зрозуміло, дуже незручно і нелогічно.
    • ‘titleFromAlt’:true – як раз та функція, якою нас позбавили в fancybox2 – функція, яка бере з атрибута alt зображення текст і показує його як пояснення в модальному вікні.
    • ‘titlePosition’:’outside’ – функція визначає положення пояснення тексту, в даному випадку це під картинкою. Може приймати значення ‘outside’, ‘inside’ або ‘over’ – перевірте кожен варіант і виберіть сподобався.
    • ‘padding’:’5′ – відступ зсередини, кажучи більш зрозуміло, то ця установка визначає товщину рамки.
    • ‘margin’:’25’ – відступ ззовні, визначає відступи модального вікна від кордонів видимого простору в браузері.
    • Інші параметри fancybox та їх налаштування ви можете підглянути на офіційному сайті — fancybox.net/api — так само там описані API методи, але я не впевнений, що вони стануть вам в нагоді, але мало що…

    Ну ось, дорогі друзі, у цілому і все, як встановити та налаштувати я вам розповів, результат ви можете підлаштувати для свого сайту, як вам захочеться, це не складно.

    Будьте на зв’язку, задавайте питання, залишайте коментарі.

    З повагою, Олександр Алаєв