Создание модальных ссылок в виде всплывающих окон в Joomla - 2.3 out of 5 based on 6 votes

На сегодня всплывающие изображения являются очень популярной частью веб-сайтов. Вы используете их, в частности в галереях, но все больше и больше в статьях. Joomla дает вам возможность очень легко добавлять всплывающие изображения.

Первое, что нужно сделать, это поместить следующую строку кода в файл шаблона index.php:

<?php JHTML::_( 'behavior.modal' ); ?>

Она должна быть размещена в верхней части перед HTML частями в начале вашего шаблона (сразу после линии defined('_JEXEC') or die;). Это все, что вам нужно с точки зрения программирования.

Затем просто вставьте ссылку в контент в таком порядке:

<a class="modal" href="/images/stories/big_picture.jpg">
    <img src="/images/stories/thumb_picture.jpg" border="0" alt="A picture" /></a>

Важным битом является class="modal".

Это очень просто! Вы только должны запомнить три вещи.

  • Вставьте миниатюрный размер изображения в ссылку.
  • Укажите href ссылку на ваше полноразмерное изображение.
  • Включите модальный класс в ссылку тега.

Вместо того чтобы использовать эскиз, вы можете использовать полный размер, но его необходимо будет уменьшить в теге изображения. Преимущество заключается в том, что ваше всплывающее окно будет отображаться очень быстро. Недостаток заключается в том, что загрузка страницы будет занимать чуть больше времени, чем прежде.

Источник: The Art Of Joomla. COM

1 1 1 1 1 1 1 1 1 1 Rating 2.42

Комментарии   

 
0 #3 Ольга 20.06.2016 14:03
Спасибо, получилось, только вставила после аналогичной строки jhtml, убрав
Цитировать
 
 
0 #2 iluha 07.01.2016 04:54
А как к этому окну добавить листалку, если изображений несколько? Спасибо.
Цитировать
 
 
0 #1 lipsait 21.03.2015 14:25
Статья полезная, но как бы к этому прикрутить лупу при наведении на картинку, что бы пользователю было понятно что картинка кликабельна.
Цитировать
 

Добавить комментарий


Защитный код
Обновить