Простое слайдшоу (увеличение изображения при клике)

(Ответов: 1, Просмотров: 659)
  1. Дипломник Аватар для Mohatma
    • Регистрация: 29.01.2013
    • Сообщений: 124
    • Репутация: 8
    Хорошего всем дня

    В скринах привел примеры слайдшоу, подобное хотелось бы реализовать на своем сайте.

    Нажмите на изображение для увеличения.  Название:	screenshot 4.jpg  Просмотров:	5  Размер:	99.4 Кб  ID:	19244
    Нажмите на изображение для увеличения.  Название:	Screen 5.jpg  Просмотров:	4  Размер:	16.6 Кб  ID:	19245

    Что то по типу "быстрого просмотра". Т.е. есть анонс статьи на главной (фотография + текст), при клике идет увеличение изображения, далее при клике в свободную область экрана слайдшоу закрывается и пользователь оказывается опять на главной странице.

    Решение где только не используется, уверен для Joomla что то похожее есть.

    Знающие люди, поделитесь

    Работаю на Joomla 3.4
    • 0
  2. Новичок
    • Регистрация: 16.10.2015
    • Сообщений: 8
    • Репутация: 0
    Mohatma, Вы можете использовать стандартные средства Joomla - JHTML::_('behavior.modal')

    В зависимости от того какой шаблон Вы используете свой или чужой, то действия могут немного отличаться, но принцип один, Вам нужно переопределить вывод интро картинки. Например, если Вы используете обычный блог, то создаете файл templates/yourtemplate/html/com_content/blog_item.php если его нет и правите код.

    После строк: defined('_JEXEC') or die; обязательно добавляем JHTML::_('behavior.modal'); и строку где идёт вывод картинки обрамляете: тегом <a> с классом class="modal"

    Пример:
    Код HTML:
     <div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>"> <a class="modal" href="<?php echo htmlspecialchars($images->image_fulltext); ?>"><img
    <?php if ($images->image_intro_caption):
    	echo 'class="caption"'.' title="' . htmlspecialchars($images->image_intro_caption) . '"';
    	endif; ?>
    	src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/></a> </div>
    В итоге у Вас должно получится, что при клике на интро картинку она будет открываться во всплывающем окне. Надеюсь помог.
    • 1

    Спасибо сказали:

    Mohatma(07.11.2015),

Похожие темы

Темы Раздел Ответов Последний пост
Выпадание подменю при клике на меню
WordPress 10 13.11.2013 12:31
Простое портфолио
Joomla 6 23.07.2013 23:37
копирование ссылки при клике
Web программирование 2 17.05.2013 16:40
Похожий модуль слайдшоу
Joomla 4 12.11.2012 14:30
Простое создание баннеров на CSS3
Web программирование 6 13.09.2012 15:32

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры