Увеличение изображений при клике мышкой в Joomla

[Всего голосов: 3    Средний: 5/5]


Как сделать, чтобы при клике мышкой по миниатюре она открывалась в модальном окне и с оригинальными размерами?
Этот вопрос задают многие web-мастера, начинающие освоение CMS Joomla. Прежде всего, можно спросить, а зачем это нужно? Один из вариантов ответа: иногда, чтобы лучше просматривались детали изображения, его нужно вывести на страницу сайта с размерами превышающими выделенное место для контента. И неплохо бы вставить картинку превью (с уменьшенными размерами), а при клике получить оригинал изображения.

Логотип Joomla

Для осуществления такого эффекта нужно применять возможности скриптов или плагинов. В варианте работы с сайтом Joomla оптимальным решением может быть использование плагина SP Thumbnail. Это простой плагин для увеличения картинок. Особенность его заключается в том, что Вам не придётся создавать миниатюры картинок и загружать их наряду с изображениями оригинального размера, как это бывает при установке многих скриптов для выполнения подобных задач. В случае использования плагина SP Thumbnail от Вас потребуется выполнение тех же действий, что и при вставке обычного изображения. Процесс установки плагина не представляет особой сложности, все происходит по знакомому сценарию:

  1. Скачайте архив с плагином.
  2. Распакуйте архив в текущую папку на компьютере. Обратите внимание, что в папке spthumbnail находятся два плагина в zip-архивах. Один для Джумла 2.5, а другой для третьей версии.
  3. Установите плагин в соответствии с версией вашей Joomla. В админ панели выполните следующее: Расширения → Менеджер расширений → Загрузить файл пакета. Выберите нужный zip-архив с плагином и загрузите.
  4. После успешной установки плагина его необходимо активировать. Зайдите в Менеджер плагинов (Расширения → Менеджер плагинов) и найдите искомый плагин (SP Thumbnail) визуально или с помощью поиска. Включите его, изменив состояние таким образом, чтобы в графе стояла зеленая галочка.

Плагин установлен и активирован. Настроек плагина, как таковых, практически нет, кроме выбора создания эскизов изображений. Варианты настроек эскизов:
1. Все изображения. В этом варианте для увеличения будут использоваться все изображения на вашем сайте, независимо от присвоенных классов.
2. Только класс. Плагин будет задействовать изображения только с определенным, указанным вами, классом. Название класса определите самостоятельно.
3. Кроме класса. Выберите этот вариант, чтобы все ваши изображения могли увеличиваться при клике, кроме указанного класса.

Как добавить класс изображения?

Вставьте изображение в вашу статью и в визуальном редакторе уменьшите его размер до состояния миниатюры, соблюдая пропорции. Если в настройках выбран Только класс, зайдите в Свойства изображения и укажите в соответствующем поле Класс имя класса, которые Вы определили.

Увеличение изображения при клике

Но, так весело и красиво добавляется класс к изображению не во всех визуальных редакторах. Если вы используете стандартный редактор TinyMCE, то в этом случае придется открывать HTML-код статьи и править его вручную. Происходит это примерно так:

Открываем исходный код и находим тег img изображения, например:

<p><img class="pull-center" style="display: block; margin-left: auto; margin-right: auto;"
 src="images/joomla/prosmotr-pozishiy.png" alt="позиции модулей" width="600" height="365"/>
</p>

Далее нужно добавить класс изображения (например, zoom). Но, как мы видим, нашему изображению уже присвоен класс pull-center. Ничего страшного, а мы добавим ещё и zoom. Оба класса будут работать равнозначно. Итоговая картина будет выглядеть так:

<p><img class="pull-center zoom" style="display: block; margin-left: auto; margin-right:
 auto;" src="images/joomla/prosmotr-pozishiy.png" alt="позиции модулей" width="600"
 height="365"/></p>

Сохраните материал статьи и проверьте работу плагина. Всё должно быть OK!

Это всё! Пока! Л.М.

 

Поделиться в соц. сетях

Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Яндекс

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

Ваш e-mail не будет опубликован.