Сьогодні ми поговоримо про те, як вставляти картинки з ефектом lightbox через поля типу "wysiwyg".
Часто, при написанні контенту (статей, новин, тесту про компанію) вам потрібно вставити в текст картинку або кілька картинок. При цьому, дати можливість відвідувачеві сайту подивитися збільшену версію даної картинки, у спливаючому вікні (lightbox ефект). У більшості випадків, такі речі реалізуються через окреме поле, в якому ви можете задати картинку. А розробник шаблону сайту може вивести цю картинку спеціальним чином, з ефектом lightbox. Але такі питання добре вирішувати в процесі створення сайту, а ми поговоримо про те, як зробити це через адмінку при мінімальними змінами в шаблоні.
Цей код буде особливо корисний якщо вам:
- Треба розмістити фотогалерею на сторінці, при тому що у вас немає модуля «Фотогалереї»
- Хочеться уникнути необхідності, змушувати користувача прикріплювати фотографії через інший фотоальбом пов'язаний з цією сторінкою
- Хочеться обійтися без створення додаткових полів на цій сторінці для прикріплення фотографій
- Хочеться щоб ваші картинки на сторінці розкривалися lightbox
В результаті ми повинні отримати механізм, що дозволяє створювати ось такі картинки (натисніть на неї)
Як створити таку картинку:
- При редагуванні будь-якого html поля, додамо картинку в область контента через кнопку «Вставити / редагувати зображення»
- додамо саму фотографію (якщо виникнуть питання, cмотри тут Вставка зображень та тут Файловий менеджер)
- не закриваючи вікна "Вставити / редагувати зображення", перейдемо на вкладку "Додаткові" і в полі "Код мови" вкажемо текст "lightbox".
Це текст підкаже нашому скрипту (див. Нижче), що дана картинка повинна відкриватися з lightbox ефектом. - не закриваючи вікна "Вставити / редагувати зображення" перейдемо на вкладку "Оформлення" і вкажемо зменшені розміри нашої картинки. Досить вказати одне значення, друге вирахувати автоматично.
Так само ви можете змінювати розмір фотографії вже після вставки в html поле. - збережемо наші зміни на сторінці
Все ... більше нічого робити не треба, все інше зробить скрипт.
Залишилося тільки додати той самий скрипт, який все зробить за нас
Установка скрипта:
- Додаємо в шаблон необхідний нам скрипт.
Варто сказати, що додавати скрипт краще в сам шаблон (при необхідності, зверніться до розробника.). Також варто згадати, що скрипт буде використовувати функціонал fancybox. Він використовується за умовчанням в umi.cms, але якщо, з якихось причин, його немає, то варто звернутися до розробника сайту, з проханням поставити його або використовувати інший lightbox механізм, якщо такі використовуються в вашому шаблоні. Я вкажу, де саме потрібно внести зміни в нашому js коді доданому нижче, для використання іншої lightbox js бібліотеки.
Варто згадати, що дане підключення варто робити після завантаження самої jquery бібліотеки і fancebox бібіліотека, тобто після макросу (в разі TPL)
або (в разі XSLT)