Як на сайті Drupal зробити збільшення картинки при натисканні на неї (Lightbox2), Storvild - s Blog

Записки програміста

Як на сайті Drupal зробити збільшення картинки при натисканні на неї (Lightbox2)

Якщо у своїй статті на сайті ви хочете, щоб ілюстрації (картинки) збільшувалися при натисканні на них, можна скористатися модулем для Drupal -LightBox2.

Він вміє підлаштовувати картинку під екран браузера, а також може показувати картинку в повному її розмірі.

1. Завантажуємо модуль Lightbox2

2. Завантажуємо модуль Iimage_resize_filter (для можливості автоматичної зміни розміру зображення)

Розпаковуємо модулі на сервер в /sites/all/modules/

Заходимо в модулі /admin/modules івстановлюємо ці два модулі.

Потім заходимо до налаштувань Ligthbox2.

зробити

Далі у вкладку "Автоматична обробка зображень", де зі спискувибираємо "Lightbox". Натискаємо "Зберегти".

збільшення

Знову заходимо в модулі /admin/modules і входимо доналаштувань Image_resize_filter, де необхідно змінити налаштування для кожного формату тексту, який ви використовуєте. Наприклад, натискаємо "налаштувати" у форматі "Full HTML".

зробити

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

збільшення

Далі натискаємо на налаштування цього фільтра та включаємо галочки: Locally, On remote servers, Додавати посилання на оригінальне зображення.

Налаштування закінчено. Тепер можна розпочинати написання статті.

Вставивши в статтю картинку, якщо ви використовуєте IMCE, то в "Налаштування картинки/Додатково/Ставлення " вписуємоlightbox.

натисканні

Якщо ви вставляєте код картинки самі, код повинен бути приблизно таким: rel="lightbox">

Після збереження статті, натиснувши на картинку, ви побачите, що вона збільшується. Натискання на неї призведе до її закриття.

Також є можливість згрупувати картинки у статті, що дозволить збільшивши одну картинку, переходити до наступної або попередньої, не закриваючи її. Для цього в пункті "Ставлення" замість lightbox необхідно написатиlightbox[mygroup1], де mygroup1 - це назва вашої групи (може бути будь-якою).

Тепер, при натисканні на картинку вона збільшується і праворуч на неї повинна з'явитися велика стрілка вперед, а зліва відповідно назад.

Для переходу між картинками можна скористатися гарячими клавішами: z-збільшити, Стрілки вправо, вліво – гортати картинки, Esc – вихід.

Клавіші можна переналаштувати у налаштуваннях Lightbox2.