Как сделать спойлер на joomla
Обновлено: 03.07.2024
Lazy Velo Spoiler: плагин для вставки спойлеров на сайт Joomla
Lazy Velo Spoiler плагин для добавления спойлеров на сайт Joomla версии 1.5, 1.7. Этот плагин является улучшенной версией плагина pb_spoiler.
- Изображения подгружаются только для открывающихся или уже открытых спойлеров.
- Добавлен параметр "оставлять открытыми"
- Рус. и англ. языки
Чтобы добавить спойлер в текст статьи нужно вставить следующий код:
Часто сталкиваюсь с тем, что дети не верят в то, что могут учиться и научиться, считают, что учиться очень трудно.
Вкладки, Слайдеры и Спойлеры для Joomla 2.5 - 3.x
- Теперь не нужно использовать по 3 плагина для разных эффектов - всё в одном!
- Очень мало весит
- Специальные теги для вставки
Таб (вкладки)
В материале вставляем ( Внимание! При копировании кода, удаляйте пробелы до-после знаков = и / ):
На странице отображается:
Заголовок вкладки 1
Содержимое вкладки 1
Содержимое второй вкладки
Содержимое третьей вкладки и так далее.
Слайдеры
В материале вставляем:
На странице отображается:
Содержимое первого слайдера
Содержимое второго слайдера
Содержимое третьего слайдера и так далее .
Спойлеры
В материале вставляем:
На странице отображается:
В качестве содержимого может быть добавлен любой текст, картинки, фото и т.п.
Если Вы являетесь автором материалов или обладателем авторских прав, и Вы возражаете против его использования на моем интернет-ресурсе - пожалуйста, свяжитесь со мной. Информация будет удалена в максимально короткие сроки.
Спасибо тем авторам и правообладателям, которые согласны на размещение своих материалов на моем сайте! Вы вносите неоценимый вклад в обучение, воспитание и развитие подрастающего поколения.
В сборник я включил, на мой взгляд, самые удобные и работоспособные спойлеры для ссылок, текста, изображений, видео: Lazy Velo Spoiler (русский), EJS - Easy Joomla Spoiler (русский), табы в статьи - tabber v2.1.0, автоматические переводчики для Вашего сайта, форума или блога (дву- или многоязычные сайты): MultiTrans, интернет сервисы для сайтов, работающих на движке Джумла.
Работоспособность инструментов я тестировал на Joomla версии 2.5 и выше.
В сборник для Joomla 2.5 включено:
спойлер Lazy Velo Spoiler,
спойлер EJS - Easy Joomla Spoiler,
табы в статьи - tabber v2.1.0,
автоматические переводчики сайта - MultiTrans, интернет сервисы
Версия joomla: 2.5 и выше
Lazy Velo Spoiler (русский язык) - плагин для вставки спойлеров на сайт Joomla 2.5.
Плагин Lazy Velo Spoiler RUS для сайта на Joomla 2.5.
Нередко возникает необходимость спрятать часть текста на странице от пользователя.
Спойлер - полезная штука на тех сайтах, где на странице есть много видео/фото-файлов, длинные тексты, где есть страница с вопросами и ответами (FAQ).
Поэтому, чтобы не нагружать сильно страницу, ставят спойлер.
Благодаря этому, во-первых, освобождается место на странице сайта, во-вторых вопрос доступен для прочтения, а ответ открывается только по желанию и клику пользователя, в-третьих - это хорошо для тех посетителей, у которых слабое интернет-соединение.
Достоинства Lazy Velo Spoiler:
- Изображения подгружаются только для открывающихся или уже открытых спойлеров.
- Добавлен параметр "оставлять открытыми".
- Русский и английский языки
Установка, настройки, нюансы работы даны в архиве сборника для скачивания.
Пример работы можно посмотреть здесь под номером 0.2.
EJS - Easy Joomla Spoiler (русский язык) - спойлер на сайт Joomla 2.5 для сокрытия текста, ссылок, фото, видео, флэш.
Плагин EJS - Easy Joomla Spoiler для Joomla 2.5.
Пример работы можно посмотреть здесь .
Установка, настройка, нюансы даны в архиве сборника для скачивания.
Tabber v2.1.0 (русский) - табы в статьи.
Плагин tabber v2.1.0 для Joomla 2.5 - шикарный плагин для статей.
Он позволяет в статью вставлять несколько вкладок (табов) или вкладок во вкладке. Работает без перезагрузки страницы,поддерживает русские символы в URL. После установки, у Вас появится в редакторе статей кнопка для вставки
синтаксиса.
Во вкладки можно вносить всё, что вам угодно: текст, изображения, аудио и видео, флэш.
Пример работы можно посмотреть здесь .
Описание настройки, работы и нюансов дано в архиве сборника для скачивания.
Автопереводчики для Вашего сайта, форума или блога - создание двуязычного или многоязычного сайта.
MultiTrans: модуль для автоперевода сайта на Joomla
Отличный модуль, быстрый, всё переводит, много тонких настроек для расположения вывода модуля на страничке сайта. Может выводиться в модулях, а может прикрепляться к краям страниы сайта внизу или вверху.
Онлайн интернет-сервисы
Также можно воспользоваться онлайн сервисами автоматического перевода сайтов на разные языки. Недостаток их в том, что присутствует их реклама.
Ссылки на сервисы даны в архиве сборника для скачивания.
Пример работы можно посмотреть здесь .
В случае, если нижепредставленные ссылки окажутся неработоспособными, то актуальные ссылки можно получить здесь
Пароль на архив, при скачивании по прямой ссылке, получите после небольшой оплаты
Если будут проблемы с работоспособностью каких-либо расширений скачайте бесплатно и установите JB Library Plugin - решает проблемы Javascript, MooTools и jquery.
Еще по теме:
Если Вы считаете, что данная информация интересна или полезна,
то нажмите ниже кнопочку,
соответствующую аккаунту вашей Социальной Сети
(а если его еще нет, то можете создать),
добавьте себе ссылку на данный материал, и поделитесь с друзьями.
Другие разделы сайта с программами
(используйте бегунок справа для прокрутки,
если бегунок невиден - обновите страницу)
Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:
- Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.
- Улучшится связанность текста, и поисковики смогут более качественно индексировать сайт, так как будут лучше понимать, как связаны между собой видимый и скрытый текст.
- Будет доступно управление элементами с клавиатуры и других устройств.
- Уменьшается количество javascript кода, который нужно подгружать, что увеличивает скорость загрузки страницы, скорость обработки и корректность.
- Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.
- Работает при выключенном javascript.
- Старые браузеры не знают таких тегов и не будут скрывать информацию.
С одной стороны выглядит не очень красиво, с другой стороны нейтрально и легко может вписаться во многие дизайны. Кстати, дефолтный вид тега Details очень похож на спойлер от хабра, только нужно чуть перекрасить, сделать подчеркивание и получим семантически правильный, без javascript и дивов, хабровский спойлер.
К сожалению, у дефолтного маркера есть два недостатка:
- Старые браузеры его не видят.
- Вебкит баузеры не позволяют менять символ маркера.
Рассмотрим первый пример Details/Summary с измененным текстовым маркером:
Дефолтным маркерам делаем display:none и показываем альтернативный при помощи summary:before
summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.
Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.
Текстовый маркер справа + простейшая анимация текста и маркера:
В новом примере я использую для маркера summary:after вместо summary:before, для того чтоб он отображался справа.
Анимация маркера при помощи transform: scale(1,-1);
Всем элементам, которые находится после summary, ставлю анимацию плавного появления при помощи animation: sweep .5s ease-in-out;
Svg маркер + анимация поворота:
Summary:before пришлось серьезно переделать:
- Поставить position: absolute; left: .3em; top: .4em; width: 1em; height: 1em;
- Текстовому маркеру надо обязательно поставить color: transparent; иначе он будет виден.
- Картинку вешаем при помощи background.
Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.
Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.
Для summary поставить padding-right: 1.5em;
Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:
Svg маркер справа + эффект зеркального поворота стрелки:
Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.
Прежде чем убирать outline, 100 раз подумайте, чем вы можете его заменить, чтоб человек мог видеть фокус и мог перемещаться с клавиатуры или других устройств.
Если вам нужно, чтоб при открытии одного спойлера, закрывались остальные, то придется применить javascript, ниже привожу пример простого JS кода, который решит эту проблему.
С уважением, создатель конструктора лэндингов для фрилансеров CMS cPortfolio
Читайте также: