Як зробити спливаюче фото

Як зробити спливаюче фото

Спливаюче зображення — це один з «інструментів», що використовуються для ефективних онлайн-продажів. І це не порожні слова. Як правило, перш ніж щось купити, людина повинна товар розглянути, а оскільки помацати пропонований інтернет-магазином товар покупець не може, тому для нього дуже важливо якісне фото. Але щоб зображення не займало багато місця на сторінці, його роблять зменшеним з можливістю подальшого збільшення при натисканні на нього.

Інструкція

  1. Скачайте плагін JCE Mediabox. Встановіть його через менеджер розширень Joomla, а потім активуйте. Після цього відкрийте менеджер зображень JCE і додайте на сторінку фотографію, яка і буде виступати в ролі прев’ю, тобто, міні-зображення. Потім виділіть доданий фото і клацніть по інструменту додавання гіперпосилання. Слідом за цим, за допомогою браузера файлів JCE вкажіть шлях до зображення, яке повинно з’явитися після натискання на превью. Потім відкрийте вкладку «Додатково» і в розділі «Список класів» оберіть «jcepopup».
  2. Створіть спливаюче зображення за допомогою візуального редактора, який вбудований в систему управління сайтом Ural CMS. Таке зображення при кліці на превью збільшується до великих розмірів. З цією метою скористайтеся функцією «Вставити», розташованої на панелі інструментів, після чого у вікні, встановіть галочку навпроти поля «Створити прев’ю» та завантажте фотографію. Коли зображення завантажиться на сайт, виберіть його в «списку завантажених» і клацніть по ньому.
  3. Після цього у вікні вставки оберіть «Зовнішній вигляд» і змініть розміри фото: в ідеалі вони повинні бути 150-250 пікселів в ширину, адже саме таких розмірів превью. Після внесення всіх змін натисніть «Вставити». В результаті вийде клікабельні зображення.
  4. Скачайте плагін JCE HsExpander. Встановіть його через менеджер розширень. Після установки в JCE в радіаторі з’явиться особлива кнопка: клікніть по ній і вікно відкриється. Що з’явилося на екрані вікно складається з двох частин: Popup Image і Thumbnail Image. У першому задайте параметри спливаючого зображення, а в другому вкажіть розміри і альтернативний текст для превью. Після того як зробите всі необхідні зміни, натисніть «Вставити зображення», а потім «Зберегти».

Зверніть увагу

Зберігайте всі внесені зміни, інакше створити спливаюче фото не вийде!

Корисні поради

Всі перераховані вище плагіни безкоштовні: завантажити їх можна на сайті розробника.