Дорогие друзья, рад приветствовать вас на сайте wedal.ru в новом, 2013 году! В этот раз, я решил, что год нужно начать чем-то особенным.
2013 в мире Joomla, очевидно, будет годом Joomla 3. Мы должны увидеть сразу две новые версии CMS, одна из которых выйдет в марте, а другая в сентябре.
Для всех читателей wedal.ru я подготовил первое публичное расширение для Joomla 3 – модуль Wedal Joomla Slider. Этот модуль основан на bootstrap-carousel и позволяет вам создавать на сайте красивое слайдшоу с подписями. Модуль распространяется бесплатно. Посмотреть демо-версию, описание настроек, а также скачать Wedal Joomla Slider вы сможете в этой статье.
Содержание
Демонстрация
Что представляет из себя данный модуль? Это простой способ организовать на сайте демонстрацию изображений с подписями и, если необходимо, ссылками. Вот как это выглядит:
Оформление модуля и скрипт, реализующий слайдшоу, взяты из фреймворка Bootstrap, который интегрирован в Joomla 3. Когда я увидел данный скрипт, он мне сразу понравился. Просто и изящно, а главное, работает с любым шаблоном Joomla 3, использующим Bootstrap Framework.
Описание настроек
Я решил сделать модуль максимально простым. Не люблю, когда в расширении нужно разбираться пол дня, а потому добавил только самое необходимое:
Настройки следующие:
- Суффикс класса модуля – стандартная опция для всех модулей Joomla. Позволяет задать для модуля уникальный CSS-класс.
- Ширина модуля – ширина слайдшоу. Должна совпадать с шириной изображений, которые будут демонстрироваться. Все изображения должны иметь одинаковые ширину и высоту.
- Изображение X – выпадающий список с доступными изображениями для слайдшоу. Чтобы изображения появились в списке, они должны быть загружены в папку images/slides.
- Ссылка X – добавляет ссылку, по которой будет перенаправлен пользователь, если кликнет по изображению.
- Заголовок X – заголовок подписи изображения.
- Описание X – подпись изображения.
В одно слайдшоу может быть добавлено максимум 10 изображений, по количеству доступных в модуле полей.
Вот и все настройки. После установки автоматически задаются демо-настройки, показывающие слайдшоу, как в демо выше.
Важное замечание!
Модуль Wedal Joomla Slider будет корректно работать только в том случае, когда в используемом шаблоне сайта подключен Bootstrap Framework!
Как проверить, так ли это? Откройте любую страницу сайта. Нажмите в любом ее месте правую кнопку мыши и выберите пункт «Просмотр исходного кода» (в разных браузерах текст может отличаться). В исходном коде поиском по тексту попробуйте найти слово «bootstrap». Если таковое имеется, то фреймворк скорее всего подключен и используется в шаблоне. Если нет, то нет.
Предвижу вопрос: почему я не включил Bootstrap в модуль? Только потому, что использование фреймворка ради одного модуля – это стрельба из пушки по воробьям. Не стоит этого делать, лучше подобрать другой модуль.
Локализация
Модуль включает языковые файлы на двух языках: русском и английском.
Пожалуй, на этом все. Добавлю, что код модуля очень прост и если вы хотя бы немного разбираетесь в PHP, то легко сможете прочитать и изменить его под себя.
Вот ссылка на скачивание:
Надеюсь, модуль вам понравиться.
UPD.: Для автозапуска слайдера добавьте в самый конец файла modules/mod_wedal_joomla_slider/mod_wedal_joomla_slider.php следующий код:
<script type="text/javascript">jQuery('.carousel').carousel();</script> UPD2.: Выпущен обновленный модуль Wedal Joomla Slider 2. Все подробности и ссылка на скачивание здесь.
Модуль нужный, только сразу из опыта:
1. Помимо работы с отдельными картинками, предусмотри также работу со статьями J! и с материалами к2. Сделай селектор сверху, откуда брать инфу. Ну и ссылки с заголовков модуля соответственно в те статьи.
2. Для работы с отдельными картинками предусмотри их кроп/ресайз по указаным размерам.
3. Добавь пару-тройку эффектов помимо слайда.
Это всё добавит модулю 99% функциональности.
Что касается статей и прочего. Мое мнение - для каждой подобной задачи нужно отдельное простое расширение. Все должно быть легко, быстро и просто. Такая философия.
Это очень плохо, что у некоторых они редко меняются.
Лучше сделать так. Не просто "Изображение 1", "Изображение 2", а новые слайдики добавляются кнопочкой "+" (как в некоем поле SEBLOD), причем все их можно менять местами, лучше драг-н-дропом, и без ограничений на количество. Тогда будет действительно оригинально.
Для подобных модулей слайдров использую, либо, в тяжелом случае, SEBLOD + свой шаблон, либо один очень простой и суровый способ.
Берем стандартный модуль "HTML код". Прописываем ему некий CSS суффикс. В его визуальном редакторе выставляем для параграфов в качестве контейнера тег DIV. Каждый параграф будет отдельным слайдом. Можно забивать туда любое содержимое, в один, скажем, картинку, в другой текст, оформить их можно тоже по-разному через CSS стили.
Далее, подключаем к шаблону jQuery, если он еще не подключен. Подключаем какой-нибудь плагин слайдера, например jQuery Cycle Plugin. Ну и при помощи малюсенького JavaScript кода, через селектор (указанный CSS суффикс), заставляем все это двигаться.
Довольно удобно редактируется в дальнейшем, очень легко и просто, и без всяких глупых ограничений, вроде ограничения на количество.
Но если заказчику сиё не потребно, сделаем через SEBLOD, будет интеграция с менеджером материалов. Каждый слайд - отдельный материал. Там поля: картинка, заголовок, описание; а можно еще: цвет подложки, метод ресайза... И через свой списочный шаблон с помощью какого-нибудь JavaScript плагина... Тоже весьма удобно.
Все-таки владелец сайта должен заполнять формы, не более. Все остальное - ошибки в проектировании и разработке.
Интеграция с менеджером материалов дает свои плюшки. Например, удобная и легкая сортировка, или легкая реализация снятия с публикации отдельных слайдов. Особенно, если слайдер выполняет не только одну лишь задачу разнообразить внешний вид сайта, но и несет какое-нибудь функциональное применение. К тому же, владелец только и делает, что заполняет формы - какие же здесь противоречия?
Мне кажется, никакой проектировочной ошибки тут нет, с SEBLOD менеджер материалов это много больше, чем просто менеджер материалов, а некая единая панель управления всем и вся... Если воспринимать его в таком ключе, проблем никаких не будет
Ладно, давайте уже бросим это обсуждение, а то что-то отклонились от темы статьи совсем.
сделать стили:
слайдер по левому краю
http://test.allhomejob.ru/
1. Открываем файл modules/mod_wedal_joomla_slider/mod_wedal_joomla_slider.php
2. В строке 21 меняем if($moduleWidth){echo '#myCarousel{width:'.$moduleWidth.'px;}';} на
if($moduleWidth){echo '#myCarousel{width:'.$moduleWidth.'px; margin: 0 auto; position: relative;}';}
Решение проблемы (как у меня получилось):
1. Открываем файл modules/mod_wedal_joomla_slider/mod_wedal_joomla_slider.php
2. Строка 9. Меняем for ($i = 1; $i
и все же как сделать, чтобы прокрутка запускалась автоматом с самого начала?
т.е. по крайней мере в FF после обновления страницы слайдер не крутится, а начинает он это делать только после нажатия на стрелки.
спасибо!
как её убрать?
теперь вижу MOD_WEDAL_JOOMLA_SLIDER_CPR
Мне эта строчка наоборот понравилась - как подпись общая ко всем слайдам, только в теги взял:
Интересно - только у меня, или чаще?
спасибо
В настройках модуля можно вставить описание и заголовок фотографии, а также ссылку. По умолчанию в первых трех фотографиях прописаны ссылки и демо-заголовок/описание. Однако, когда я пытаюсь оставить фотографии без заголовка/описания, после нажатия кнопки сохранить, демо-подписи возвращаются. От них можно избавиться только путем написания нового заголовка/описания. Можно ли как-то оставить фотографии без заголовка/описания?
Спасибо
1) Поставить для заголовка и описания в место текста просто пробел.
2) Скрыть блок заголовка и описания, как я описывал выше, оставив в них минимальную информацию, например, ключевые слова.
3) Удалить блок с классом carousel-caption из макета модуля.
Посмотрел ваш сайт. Там одна карусель и она работает. Не вижу проблемы.
Просто подобрать подходящие пропорции под все экраны (размеры которых совершенно разные), не представляется возможным. Так что придется либо мириться с тем, что изображение занимает не всю ширину экрана, либо срезать его часть.
Вы, вероятно, будете срезать часть изображения. В этом случае задача сводиться к тому, чтобы в CSS сделать для слайдера ширину и высоту на 100% экрана и добавить к блоку слайдера overflow:hidden.
А про обработку пропорций изображений я и не знала. Все-таки тонкости CSS мне еще изучать и изучать
Для тех, у кого скрывается 2й\4й и т.д. слайд - добавляем в index.php фикс https://github.com/joomla/joomla-cms/issues/475
А можно ли как то настроить адаптивность слайдера для мобильных устройств?
При открытии на телефоне сам сайт адаптируется под размер устройства, а слайдер выходит за границы зоны, отображаемой на экране.
Очень много вариантов пересмотрел (включая dj image slider), но только Ваш слайдер оказался самым простым, удобным и понятным в использовании! И главное реально работающим! А dj image slider я так и не смог запустить, про остальные вообще молчу.
Единственное, через несколько дней обнаружил странную штуку - слайдер показывает первый слайд, переключается на следующие, но они пустые. Посмотрел код - вроде бы все изображения и заголовки присутствуют.
После того, как перехожу в меню в произвольное место и возвращаюсь на главную, все работает корректно.
Чешу репу:)
Кстати, к выходу готовится гораздо более интересный слайдер...