Куда идем?

Дорогие друзья, рад приветствовать вас на сайте 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.  

Описание настроек

Я решил сделать модуль максимально простым. Не люблю, когда в расширении нужно разбираться пол дня, а потому добавил только самое необходимое:

wedal-joomla-slider

Настройки следующие:

  • Суффикс класса модуля – стандартная опция для всех модулей Joomla. Позволяет задать для модуля уникальный CSS-класс.
  • Ширина модуля – ширина слайдшоу. Должна совпадать с шириной изображений, которые будут демонстрироваться. Все изображения должны иметь одинаковые ширину и высоту.
  • Изображение X – выпадающий список с доступными изображениями для слайдшоу. Чтобы изображения появились в списке, они должны быть загружены в папку images/slides.
  • Ссылка X – добавляет ссылку, по которой будет перенаправлен пользователь, если кликнет по изображению.
  • Заголовок X – заголовок подписи изображения.
  • Описание X – подпись изображения.

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

Вот и все настройки. После установки автоматически задаются демо-настройки, показывающие слайдшоу, как в демо выше.

Важное замечание!

Модуль Wedal Joomla Slider будет корректно работать только в том случае, когда в используемом шаблоне сайта подключен Bootstrap Framework!

Как проверить, так ли это?  Откройте любую страницу сайта. Нажмите в любом ее месте правую кнопку мыши и выберите пункт «Просмотр исходного кода» (в разных браузерах текст может отличаться). В исходном коде поиском по тексту попробуйте найти слово «bootstrap». Если таковое имеется, то фреймворк скорее всего подключен и используется в шаблоне. Если нет, то нет.

Предвижу вопрос: почему я не включил Bootstrap в модуль? Только потому, что использование фреймворка ради одного модуля – это стрельба из пушки по воробьям. Не стоит этого делать, лучше подобрать другой модуль.

Локализация

Модуль включает языковые файлы на двух языках: русском и английском.

Пожалуй, на этом все. Добавлю, что код модуля очень прост и если вы хотя бы немного разбираетесь в PHP, то легко сможете прочитать и изменить его под себя.

Вот ссылка на скачивание:

Скачать модуль Wedal Joomla Slider (только для Joomla 3 и выше)/ Download Wedal Joomla Slider module (only for Joomla 3 and higher).

Надеюсь, модуль вам понравиться.

UPD.: Для автозапуска слайдера добавьте в самый конец файла modules/mod_wedal_joomla_slider/mod_wedal_joomla_slider.php следующий код:

<script type="text/javascript">jQuery('.carousel').carousel();</script> 

UPD2.: Выпущен обновленный модуль Wedal Joomla Slider 2. Все подробности и ссылка на скачивание здесь.

Об авторе
Wedal
(Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.
Добавить комментарий

Комментарии  
2
Привет, Wedal!
Модуль нужный, только сразу из опыта:

1. Помимо работы с отдельными картинками, предусмотри также работу со статьями J! и с материалами к2. Сделай селектор сверху, откуда брать инфу. Ну и ссылки с заголовков модуля соответственно в те статьи.

2. Для работы с отдельными картинками предусмотри их кроп/ресайз по указаным размерам.

3. Добавь пару-тройку эффектов помимо слайда.

Это всё добавит модулю 99% функциональности.
4
Magnum79, 99% функциональности можно найти в 99% других подобных модулей. "Фишка" этого модуля - простота. Установил, задал пару опций и забыл - модуль работает. Слайды обычно меняются очень редко. Не думаю, что сделать несколько картинок одинакового размера очень сложно вручную.
Что касается статей и прочего. Мое мнение - для каждой подобной задачи нужно отдельное простое расширение. Все должно быть легко, быстро и просто. Такая философия. :-)
0
«Слайды обычно меняются очень редко.»
Это очень плохо, что у некоторых они редко меняются.
2
В JED таких до кучи :-)

Лучше сделать так. Не просто "Изображение 1", "Изображение 2", а новые слайдики добавляются кнопочкой "+" (как в некоем поле SEBLOD), причем все их можно менять местами, лучше драг-н-дропом, и без ограничений на количество. Тогда будет действительно оригинально.
2
Кстати, лично я окончательно отказался от ВСЕХ сторонних расширений, только Joomla + SEBLOD + JCE + VirtueMart + Kunena, не люблю забивать платформу лишним мусором, а все красоты навожу через свои шаблоны.

Для подобных модулей слайдров использую, либо, в тяжелом случае, SEBLOD + свой шаблон, либо один очень простой и суровый способ.

Берем стандартный модуль "HTML код". Прописываем ему некий CSS суффикс. В его визуальном редакторе выставляем для параграфов в качестве контейнера тег DIV. Каждый параграф будет отдельным слайдом. Можно забивать туда любое содержимое, в один, скажем, картинку, в другой текст, оформить их можно тоже по-разному через CSS стили.

Далее, подключаем к шаблону jQuery, если он еще не подключен. Подключаем какой-нибудь плагин слайдера, например jQuery Cycle Plugin. Ну и при помощи малюсенького JavaScript кода, через селектор (указанный CSS суффикс), заставляем все это двигаться.

Довольно удобно редактируется в дальнейшем, очень легко и просто, и без всяких глупых ограничений, вроде ограничения на количество.
-1
athree,

Цитата:

Кстати, лично я окончательно отказался от ВСЕХ сторонних расширений

Поддерживаю, правильный подход, но только для сайтов, которые делаете для себя. Заказчику при таком подходе будет сложно объяснить, как и почему он должен ковырять html-код чтобы поменять одну картинку в слайдах.
0
Да не нужно его ковырять. JCE, если в редакторе в качестве контейнеров заданы DIV'ы, все новые параграфы автоматом будут DIV'ами. Просто надо объяснить, что делаем тут ентер, и присовокупляем картинку. Только заранее нужно правильно оформить стили для DIV'ов через шаблон.
Но если заказчику сиё не потребно, сделаем через SEBLOD, будет интеграция с менеджером материалов. Каждый слайд - отдельный материал. Там поля: картинка, заголовок, описание; а можно еще: цвет подложки, метод ресайза... И через свой списочный шаблон с помощью какого-нибудь JavaScript плагина... Тоже весьма удобно.
-1
athree,

Цитата:

Каждый слайд - отдельный материал

Шутите? Это же дьявольское извращение :-) .
Все-таки владелец сайта должен заполнять формы, не более. Все остальное - ошибки в проектировании и разработке.
0
Ну почему же? Я встречал такой подход, правда, там было через отдельный менеджер, но суть та же.
Интеграция с менеджером материалов дает свои плюшки. Например, удобная и легкая сортировка, или легкая реализация снятия с публикации отдельных слайдов. Особенно, если слайдер выполняет не только одну лишь задачу разнообразить внешний вид сайта, но и несет какое-нибудь функциональное применение. К тому же, владелец только и делает, что заполняет формы - какие же здесь противоречия?
Мне кажется, никакой проектировочной ошибки тут нет, с SEBLOD менеджер материалов это много больше, чем просто менеджер материалов, а некая единая панель управления всем и вся... Если воспринимать его в таком ключе, проблем никаких не будет :-)
0
athree, ну вот всегда так у русских: квадратное катаем, круглое таскаем :-) . Нет, делать так можно, и подход вполне имеет право на жизнь, но все же нормальный модуль лучше.
Ладно, давайте уже бросим это обсуждение, а то что-то отклонились от темы статьи совсем.
0
athree,

Цитата:

В JED таких до кучи

А вот найдите хоть один, который использует Bootstrap. ;-) Я встречал только платный.
0
Для простого слайдера это не критично.
0
athree, это большой плюс, когда шаблон использует Bootstrap. Мы не подключаем дополнительный скрипт, а используем то, что уже и так встроено.
4
Подскажите, пожалуйста, каким образом осуществить изначальную автоматическую прокрутку слайдера
0
Заинтересовалась вашим слайдером. Настроила. все действительно просто и понятно. Единственное при перелистывании картинки -она вообще пропадает. пока не обновишь страницу. А когда крутится сама по себе - то перелистывается через раз. Как будто слайдер складывается а потом раскладывается. Причем полоса прокрутки меняет высоту страницы. Не пойму в чем дело...
0
и происходит это только на главной странице...на остальных все прекрасно работает!
0
Lilu, покажите сайт.
0
Сайт hi-techservice.ru Я его только начала делать. И он странно себя ведет. то крутит слайд то нет...
0
кажется поняла , почему так происходит. Если в настройках не указываешь изображение-то есть не выбираешь из списка- то сайт начинает съезжать...Если все картинки на месте - то он все нормально прокручивает)
0
Я извиняюсь но проблема опять появилась...
2
Как подключить Bootstrap в свой шаблон joomla 3 ??????????
0
Эльдар, для Joomla 3:

Код:

JHtml::_('bootstrap.framework');

0
По центру можно поставить, или будет относительно левого края в позиции?
0
sss, почему нет? Это вопрос исключительно шаблона сайта и CSS.
0
хочу поставить в шапку, она в шаблоне резиновая (принципиальноchs), есть одна позиция, слайдшоу выравнивается по левому краю, в результате чего при большом разрешении съезжает влево, как в css прописать его поцентру? margin 0 auto; text-align: left; не помогают
0
sss, нужен живой пример, тогда подскажу.
0
пример привел ниже, есть ли возможность подсказать?
1
sss, так где там вообще слайдер?
0
в шапке, щас несколько картинок запущу для наглядности
0
sss, для:

Код:

<div class="art-nostyle">


сделать стили:

Код:

margin: 0 auto;position: relative;

0
Не получается так :sad:
слайдер по левому краю
0
Вот пример, в шапке слайдер 1920 длина, выравнивается по левому краю за ним картинка по центру, как слайдер сделать по центру?
http://test.allhomejob.ru/
2
Прокрутка не начинается автоматически. Там и должно быть? Как исправить?
0

Цитата:

Ссылка X – добавляет ссылку, по которой будет перенаправлен пользователь, если кликнет по изображению.

Кликнула. Ссылка открылась во фрейме.... Так и должно быть? Некрасиво((
2
owl, нет, так работает только в этой статье, поскольку здесь вставлен не модуль, а просто демо. На сайте будет открываться нормально.
0
а как сделать ето
1
не получилось. как сделать навигацию с помощью < ol >
1
Как сделать, чтобы модуль отображался по середине:
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;}';}
0
Возникла следующая проблема. При установке в меню, например 5 картинок, в случае нажатия на кнопки "Назад" или "Вперед" показываются также изображения с 6-10, который нет. Соответственно отображается пустое место.
Решение проблемы (как у меня получилось):
1. Открываем файл modules/mod_wedal_joomla_slider/mod_wedal_joomla_slider.php
2. Строка 9. Меняем for ($i = 1; $i
2
приветствую, модуль замечательный.
и все же как сделать, чтобы прокрутка запускалась автоматом с самого начала?
т.е. по крайней мере в FF после обновления страницы слайдер не крутится, а начинает он это делать только после нажатия на стрелки.
спасибо!
1
Я проверила свой сайт на использование bootstar. присутствует. Только слайдер выводит сразу все назначенные фото друг под другом. Что не так7 как изменить настройки?
0
csusha, активируйте web-инспектор в браузере(F12). Откройте вкладку "Консоль". Перезагрузите страницу. Напишите ошибки, которые там появятся.
0
В комментариях есть вопросы про автозапуск показа слайдов, но на них нет ответа. Возможно ли, чтобы показ изображений начинался сразу после загрузки сайта и если да, то как это сделать? :-)
0
Мария, обновил статью. Ответ на ваш вопрос в самом конце.
0
:-) :-) :-) Ура-ура) Спасибо огромное) Из всех модулей этот оказался самым простым, без лишних ненужных настроек, а теперь еще и с автозапуском))) Он идеален) Спасибо!
-1
под фотографиями непонятная надпись MOD_WEDAL_JOOMLA_SLIDER_�0�2���0�5PR
как её убрать?
0
Fynjy, была ошибочка. Исправил. Скачайте архив заново и переустановите модуль.
0
Переустановил, надпись изменилась.
теперь вижу MOD_WEDAL_JOOMLA_SLIDER_CPR
0
Fynjy, у вас скорее всего язык фронтенда сайта не русский/английский. В этом случае зайдите в менеджер языков -> Переопределение констант. Добавьте эту константу и задайте для нее пустое значение или пробел.
0
язык англ. добавил еще русский, но надпись осталась по прежнему
0
Fynjy, у меня уже заканчиваются варианты :-). Есть железобетонный. Зайдите в макет модуля(папака modules, название модуля) и удалите из него эту строчку.
0

Цитирую Wedal:

Fynjy, у меня уже заканчиваются варианты :-). Есть железобетонный. Зайдите в макет модуля(папака modules, название модуля) и удалите из него эту строчку.


Мне эта строчка наоборот понравилась - как подпись общая ко всем слайдам, только в теги взял:

Код:

<h3><?php echo JText::_( 'текст' ); ?></h3>

Теперь вот думаю, как этот текст позиционировать вторым слоем поверх картинки...
0
Спасибо за модуль. Возник всего один вопрос - где задать время смены кадров? В mod_wedal_joomla_slider.php вроде бы нигде не упоминается...
0
Nic, по аналогии с тем, как описано в самом конце статьи:

Код:

$('.carousel').carousel({
interval: 2000
})

0
Будет крайне удобным, если сразу в настройках можно будет задавать ширину слайдера железно, в пикселях, и в % для резины.
0
Nic, согласен с вами. Этого не хватает. Сам частенько использую этот слайдер и каждый раз изменяю его под резиновые макеты. Давно хочу обновить модуль, но руки никак не доходят.
0
Интересная бага вылазит. Когда входишь как гость - слайдшоу нет, только первый кадр (хотя в фоне подгружаются все), для зарегеных - работает.
Интересно - только у меня, или чаще?
0
Nic, в модуле нет никаких ограничений по группам пользователей или уровням доступа, кроме стандартных от Joomla. Если все картинки подгружаются, скорее всего не срабатывает скрипт, который должен запускать слайдер. Посмотрите в отладчике(F12 в FF или Chrome, вкладка "Console") ошибки при загрузке страницы.
0
Отличный модуль. Спасибо. Один вопрос: как отключить заголовок?
0
Martin, добавьте в CSS-файл вашего шаблона:

Код:

.carousel-caption{
display:none;
}

1
В какой именно? их около 15. попробовал в каждый. не помогло.

спасибо
-1
Martin, откройте исходный html-код страницы сайта и увидите в нем подключенные CSS-файлы шаблона. Добавить этот код можно в любой из них.
0
И еще вопрос:
В настройках модуля можно вставить описание и заголовок фотографии, а также ссылку. По умолчанию в первых трех фотографиях прописаны ссылки и демо-заголовок/описание. Однако, когда я пытаюсь оставить фотографии без заголовка/описания, после нажатия кнопки сохранить, демо-подписи возвращаются. От них можно избавиться только путем написания нового заголовка/описания. Можно ли как-то оставить фотографии без заголовка/описания?
Спасибо
0
Martin, вы можете:
1) Поставить для заголовка и описания в место текста просто пробел.
2) Скрыть блок заголовка и описания, как я описывал выше, оставив в них минимальную информацию, например, ключевые слова.
3) Удалить блок с классом carousel-caption из макета модуля.
1
Спасибо за модуль и в целом за сайт! Очень нравится контент и манера изложения. Скачала модуль, так как искала вторую карусель бутсрап на страницу (первая карусель показывается на экранах >600 пикселей, вторая - на экранах меньшей 600 пикселей ширины). Первая карусель тоже была бесплатная на бутстрапе, нашла ее на гитхабе. Возникла проблема: поскольку у обеих каруселей одинаковый id , вторая не прокручивалась. Поэтому в вашем модуле я поменяла id=Carousel. От ссылок и описаний для первых трех слайдов избавилась, удалив значения default в файле mod_wedal_joomla_slider.xml. Строчку с MOD_WEDAL_JOOMLA_SLIDER_CPR тоже удалила. Теперь проблема: слайдер крутится, но картинки не показываются. При прокрутке видно верхнюю полоску картинки, а потом все исчезает. Где я накосячила? :-) спасибо заранее!
0
Дина, во-первых, зачем вам вообще две карусели? Эта карусель адаптивная и уменьшается с размерами экрана. В чем смысл плодить несколько расширений? Уменьшение размеров изображений в слайдере на маленьких экранах?

Посмотрел ваш сайт. Там одна карусель и она работает. Не вижу проблемы.
0
подскажите как убрать строчку MOD_WEDAL_JOOMLA_SLIDER_CPR под слайдером
0
Да, проблему я уже решила. Сделала копию карусели с гитхаба и поменяла в ней id. А две карусели вы и не увидите на одной странице. Одна всегда скрыта, вторая показывается (в зависимости от разрешения экрана). У меня другой вопрос возник: а можно ли в бутстрапе задавать класс hidden в зависимости не от разрешения экрана, а от его ориентации? если горизонтально - то горизонтальная карусель, если вертикально - то вертикальная. Мы ведь потому и сделали две карусели, потому что хотим, чтобы на мониторе компьютера и смартфона карусель занимала всю ширину экрана. А если использовать одну карусель, то либо на смартфоне будет узенькая полосочка, либо слишком высокая картинка на десктопе. Вот сижу и думаю, как дизайнеры делают такой выбор. По идее, можно смартфон повернуть горизонтально, и смотреть карусель для десктопов. но первое то движение - открыть сайт , держа смартфон вертикально. Дилемма :-?
-1
Дина, чтобы решить этот вопрос, сначала нужно определиться, как вы будете обрабатывать пропорции изображений. Если изображение не квадратное, то при уменьшении ширины экрана (повороте устройства в вертикальное положение), оно может либо уменьшаться (то, о чем вы говорите), либо растягиваться, срезая края.
Просто подобрать подходящие пропорции под все экраны (размеры которых совершенно разные), не представляется возможным. Так что придется либо мириться с тем, что изображение занимает не всю ширину экрана, либо срезать его часть.
Вы, вероятно, будете срезать часть изображения. В этом случае задача сводиться к тому, чтобы в CSS сделать для слайдера ширину и высоту на 100% экрана и добавить к блоку слайдера overflow:hidden.
0
Wedal, большое спасибо за ваш развернтутый ответ. Непременно учту, если решим все-таки делать одну карусель. Пока решили остановиться на двух. Не хотелось бы идти на компромисс, срезая края фото.
А про обработку пропорций изображений я и не знала. Все-таки тонкости CSS мне еще изучать и изучать :-)
1
Отличный слайдер, спасибо!
Для тех, у кого скрывается 2й\4й и т.д. слайд - добавляем в index.php фикс https://github.com/joomla/joomla-cms/issues/475
0
Поддерживаю. Верный фикс.
0
Спасибо большое за слайдер, красивый и удобный!
А можно ли как то настроить адаптивность слайдера для мобильных устройств?
При открытии на телефоне сам сайт адаптируется под размер устройства, а слайдер выходит за границы зоны, отображаемой на экране.
0
Mar, нужно задать ширину слайдера в процентах (100%), но в настройках это сделать нельзя, только в макете.
0
Спасибо большое, изменила параметр - все отлично!
0
Благодарю Вас за продукт!
Очень много вариантов пересмотрел (включая dj image slider), но только Ваш слайдер оказался самым простым, удобным и понятным в использовании! И главное реально работающим! А dj image slider я так и не смог запустить, про остальные вообще молчу.
0
Спасибо, отличный и легкий слайдер.
Единственное, через несколько дней обнаружил странную штуку - слайдер показывает первый слайд, переключается на следующие, но они пустые. Посмотрел код - вроде бы все изображения и заголовки присутствуют.
После того, как перехожу в меню в произвольное место и возвращаюсь на главную, все работает корректно.
Чешу репу:)
0
Константин, кажется у меня было такое... Было связано исключительно со стилями оформления CSS. Точно не помню, как исправлял. Каким-то CSS-правилом. Подобное случается не всегда, а в отдельных шаблонах.

Кстати, к выходу готовится гораздо более интересный слайдер...