Плагін jquery для збільшення фото на сайті

Майже на всіх сайтах розміщують фотографії або зображення і не завжди доцільно виводити їх в повному розмірі. Зручніше розміщувати мініатюри, а при натисканні на них виводити зображення в натуральну величину. Для збільшення фото по кліку скористаємося готовими рішеннями - jquery бібліотекою і плагіном «colorbox». Додатково приведу приклад використання плагіна «lazyload».

Щоб не шукати плагіни окремо, пропоную завантажити все одним архівом. Але пам'ятайте, до моменту прочитання статті можуть з'явитися нові версії. Можете пошукати їх в інтернеті - вони бесплатними. В архіві наступні версії:

«Colorbox» відповідає за збільшення зображення і його оформлення. Для цього в архіві є 5 тем. «Lazy Load» призначений для завантаження зображень тільки в момент їх показу на екрані. Це дозволяє прискорити завантаження сторінки і знизити навантаження на веб-сервер. Збільшення буде працювати і без нього. Бібліотека «jQuery» в уявленні, сподіваюся, не потребує.

Підключення бібліотеки і плагінів

Для підключення завантажуємо архів, розпаковуємо і завантажуємо на сайт. Потім в коді сайту (наприклад, перед закривається тегом body) поміщаємо код:

«Colorbox» ви матимете змогу дзвонити параметрами. Щоб виведене зображення зі зміненим розміром за розміром екрану вкажіть процентні значення для максимальної ширини і висоти. Так само можна налаштовувати прозорість фону, формат напису під зображенням і інше.

Після підготовки і завантаження зображень на сайт, розміщуємо на сторінці наступний код:

На засланні вказуємо шлях до повного зображенню, а в тезі «img» - до мініатюрі. Якщо все зроблено правильно, то повинно працювати.

Що робити, якщо не запрацювало:

• Перевірте правильність шляхів до плагінів;
• Переконайтеся що jquery бібліотека підключена один раз;
• Спробуйте пошукати свіжі версії плагінів і jquery бібліотеки;
• Можливо, доданок не буде працювати в CMS Joomla, так як jquery часто конфліктує з фреймворком Mootools.

Вішаємо відкриття вікна «colorbox» з фотографією на будь-яку подію

Іноді потрібно відкрити спливаюче вікно «colorbox" не при кліці на зображення, а при натисканні на текстове посилання або при наведенні миші на певний блок сайту. Все це можливо зробити за допомогою безпосереднього звернення до плагіну з параметром «href».