Відкрити меню

Як підключити скрипт Lightbox до блогу без плагінів – заміна jQuery Colorbox, Lightbox2 та інших

Продовжуємо розглядати тему про позбавлення блогу від великої кількості плагінів і сьогодні у нас в черзі на видалення такі додатки, як jQuery Colorbox, FancyBox for WordPress, Lightbox2 та їм подібні, які застосовуються тоді, коли потрібно збільшити при кліці зображення і розгорнути його з красивим ефектом. За красу потрібно платити, тому при встановленні таких плагінів ми отримуємо: гарний ефект розгортання зображень + додаткове навантаження на ресурс.

Скрипт lightbox2

В цьому пості ми розглянемо можливість підключення до блогу скрипта Lightbox без плагінів, а просто завантаживши його з сайту розробника. Взагалі-то, якщо подивитись глибше, не дуже добре зловживати такими речами, але деколи виникає необхідність розмістити, наприклад, скріншот великого розміру, а тоді без такого ефекту не обійтись. Давайте перейдемо до справи – наразі у мене на блозі стоїть плагін jQuery Colorbox, я його видаляю, підключаю скрипт Lightbox і давайте подивимось, що з цього у нас вийде.

Перше, що нам необхідно зробити – це завантажити сам скрипт з сайту розробника. Йдемо на http://www.lokeshdhakar.com/projects/lightbox2/ і бачимо перед собою таку картину:

Lightbox2

Клацаємо на “DOWNLOAD” і завантажуємо архів зі скриптом собі на ПК. Розпаковуємо і нас цікавить тека lightbox, в середині якої ми бачимо ще три – css, img та js.

Тека з Lightbox

Файли index.html та README.markdown можемо видаляти, вони несуть тільки інформацію і не відіграють ніякої ролі у функціоналі скрипта. Далі ми завантажуємо теку lightbox на хостинг і кладемо її в наш шаблон (як на зображенні).

lightbox на хостингу

Тепер нам необхідно підключити скрипт з цієї теки до нашого шаблону. Тут я не буду завантажувати Вас технічними деталями – справа в тому, що цей скрипт рекомендують підключати в файл header.php перед закриваючим тегом </head> (себто прописувати код підключення). Особисто я буду цей скрипт підвішувати в файл footer.php, тому що розробник шаблону переніс всі скрипти, які працюють на блозі, саме в підвал.

Ви просто спробуйте, поекспериментуйте – якщо не спрацює у файлі footer.php, то в header.php гарантовано буде функціонувати. Отже, як підключити скрипт, який ми завантажили в теку з нашим шаблоном.

Варіант 1. В файлі header.php, перед закриваючим тегом </head>, прописуємо наступний код:

Варіант 2. Цей самий код прописуємо у файлі footer.php, перед закриваючим тегом </body>.

Підключаємо скрипт
Тут є ще один маленький нюанс – перший рядок коду я не прописував, тому що ним ми підключаємо до блогу скрипт jQuery. Так як jQuery у мене вже підключений, повторно це робити не потрібно. Перегляньте свої файли header.php та footer.php і якщо побачите рядок коду з словом jQuery – значить і Вам першу стрічку прописувати немає потреби.

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

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

Відкриваємо файл функцій нашого шаблону functions.php та ближче до початку, після тега <?php, пишемо наступний код:

Ось таким чином я прописав у своєму functions.php. Прописали, зберегли зміни і завантажили файли назад на хостинг.

Файл функцій шаблону

В принципі і все. Можете перевіряти роботу скрипта. Але … може статись так, що зображення на Вашому блозі почнуть залізати на текст, як це було в мене. Коли я виконав всі попередні дії – то побачив ось таку картину:

Глюк скрипта

Все кудись полізло, зображення на текст і одне на одне. Якщо Ви будете спостерігати подібне і в себе, то просто додайте у файл стилів Вашого шаблону style.css наступний клас:

Тоді все стане на свої місця і нікуди не буде лізти. Коли я додав цей стиль в свій файл style.css – проблема зникла миттєво.

Файл стилів

Оновивши сторінку – я переконався, що все окей. Тепер можна сміливо казати, що від ще одного плагіна я позбавився остаточно.

Результат

Тепер давайте проведемо експеримент і подивимось – чи працює наша функція. Я вставлю зображення в зменшеному розмірі і при кліці на нього, повинен викликатися lightbox-ефект. Спробуємо.

kozak-pryklad

Клас! Без жодного плагіна у мене на блозі присутнє ефектне збільшення зображень. Що ж, ставимо ще один плюс (себто мінус) – кількість плагінів на ресурсі зменшилась на одну позицію. Те що треба.

Все друзі. Якщо виникатимуть питання – пишіть коментарі, я допоможу при виникненні проблем.

Шануйтеся.

Нічого цікавогоТак собіНормальноДобреЧудово (Голосів: 3, середній: 5,00 з 5)
Loading...
Обговорення: 4 коментарі
  1. MrVigner сказав:

    Треба не забути спробувати коли доберусь до свогоноута й нормального нету.

    Відповіcти
  2. MrVigner сказав:

    До зображень застосовується, але до стандартної галереї – ні! Як це виправити?

    Відповіcти
    1. Олег Волощук сказав:

      До стандартної галереї вирішення ось тут http://webdigest.com.ua/plaginy-dlya-wordpress/haky/standartna-foto-galereya-na-wordpress.html

      Вибачайте, але зараз не маю можливості оперативно відповідати на коментарі – можуть бути затримки.

      Відповіcти
  3. Саша сказав:

    Дякую. Все працює як треба. Тепер в мене також -1 плагін)

    Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

© 2017 Блог Олега Волощука · Копіювання матеріалів сайту без дозволу заборонено
Авторство підтверджено Google