На сегодня всплывающие изображения являются очень популярной частью веб-сайтов. Вы используете их, в частности в галереях, но все больше и больше в статьях. Joomla дает вам возможность очень легко добавлять всплывающие изображения.
Первое, что нужно сделать, это поместить следующую строку кода в файл шаблона index.php:
1 |
<?php JHTML::_( 'behavior.modal' ); ?> |
Она должна быть размещена в верхней части перед HTML частями в начале вашего шаблона (сразу после линии defined('_JEXEC') or die;). Это все, что вам нужно с точки зрения программирования.
Затем просто вставьте ссылку в контент в таком порядке:
1 2 |
<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