Делаем слайд шоу в Joomla

Как подключить к Joomla не стандартный слайдер новостей, слайд шоу картинок. В интернете очень много различных подобных приложений, однако некоторых ставит в тупик подключение их к CMS Joomla. Есть конечно готовые модули, но иногда надо именно тот который понравился из сторонних. Я опишу общий принцип подключения на нескольких примерах.
Первое, для подключения надо создать модуль в самой джумле. Делается это так Расширения-->менеджер модулей-->создать-->произвольный HTML код получился новый модуль (custom) в котором мы видим редактор TinyMCE (если другой то надо на время переключить редакторы):

Нас интересует кнопка HTML нажав на неё можно вставлять нужный нам исходный код слайдера, после вставки переключаем опять в режим визуального редактора (повторное нажатие HTML).

Теперь рассмотрим непосредственно примеры подключения слайдеров.
Возьмем для работы этот слайдер:

Пример можно посмотреть здесь:

Скрытый текст виден только зарегистрированным пользователям

Скачать его можно здесь:

Скрытый текст виден только зарегистрированным пользователям

Итак делаем свободный модуль HTML как было описано в начале статьи, но в начале подключаем все стили и скрипты для слайдера, для этого открываем файл index.php Вашего шаблона и добавляем между тегами <head> и </head> код:

Код PHP:

<!-- Стили -->
    <link rel="stylesheet" type="text/css" href="/presentation_cycle/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/presentation_cycle/css/presentationCycle.css" />
 
    <!-- Scripts -->
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type='text/javascript' src='/presentation_cycle/js/jquery.cycle.all.min.js'></script>
    <script type='text/javascript' src='/presentation_cycle/js/presentationCycle.js'></script>

Вот так:

Далее добавляем часть скрипта перед тегом </body):

Код PHP:

<script type="text/javascript">
            presentationCycle.init();
        </script>

Вот так:

Забрасываем папку из архива в корень сайта, (обратите внимание на пути для стилей и скриптов, если будите переименовывать папки то их нужно поправить соответственно).

Теперь непосредственно в наш созданный HTML модуль нажав на кнопку HTML вставляем все содержимое из страницы index.html архива слайдера (все что находится между тегом <body> </body>, кроме скрипта перед закрытием </body> 6

Код PHP:

<div class="container">
 
        <h1>Пример цикла презентации. Установки по умолчанию.</h1>
		<p><a href="index_1.html">Пример цикла презентации. Квадратные метки индикатора.</a></p>
        <p><a href="index_2.html">Пример цикла презентации. Маленькие метки индикатора.</a></p>
 
        <div id="presentation_container" class="pc_container">
            <div class="pc_item">
                <div class="desc">
                    <h1>Парк серверов</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="images/slide1.jpg" alt="slide1" />
            </div>
            <div class="pc_item">
                <div class="desc">
                    <h1>Приложения для iPhone</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="images/slide2.jpg" alt="slide2" />
            </div>
            <div class="pc_item">
                <div class="desc" style="left: 0px;">
                    <h1>Расширения Wordpress</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="images/slide3.jpg" alt="slide3" />
            </div>
            <div class="pc_item">
                <div class="desc" style="left: 165px;">
                    <h1>Городская сеть</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="images/slide4.jpg" alt="slide4" />
            </div>
            <div class="pc_item">
                <div class="desc">
                    <h1>Персик, который нашел Марио</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="images/slide5.jpg" alt="slide5" />
            </div>
            <div class="pc_item">
                <div class="desc">
                    <h1>Слово и дело</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="images/slide6.jpg" alt="slide6" />
            </div>
        </div>

Вот так:

Выставляем позицию для нашего слайдера, и смотрим что получилось:

garin #

5 июня 2012 в 02:10 : 0

Слайдер красивый попробую прикрутить к сайту. Я так понял картинки меняются в папке images, а тексты в коде который вставлять в модуль?

Ответить

tanja1984 #

26 июля 2012 в 09:38 : 0

Что -то у меня не получилось. Картинок нет, только текст в новом модуле. Я закинула все что было в архиве в папку с модулями, в шаблоне изменила как вы написали, в новый модуль в HTML кинула... что я сделала не так?

skaz #

26 июля 2012 в 11:42 : 0

что я сделала не так?

Проверьте пути к картинкам, раз текст появился, а картинки нет, то ошибка с url до картинок.
Чаще бывает, что картинки есть, но они расположены одна под другой, тогда значит неправильно указан адрес (или просто ошибка) до самих скриптов в <head>.

А слайдер то этот же, или другой какой то?

26 июля 2012 в 13:42 : 0

честно сказать очень плохо разбираюсь во всем, даже не знаю как проверить путь к картинкам. а слайдер скачала тут, делала как написано в статье.
и текст у меня один под другим, но без картинок. как-то я по деревянному установила.Если не трудно, объясните чайнику.

26 июля 2012 в 14:05 : 0

Сейчас вот подумал, а Вы когда скачали архив со слайдером и разархивировали его, догадались что у Вас получилось папки presentation_cycle две, одна вложенная в другую, надо вытащить одну с содержимом, и закинуть только её.

даже не знаю как проверить путь к картинкам

href="/presentation_cycle/css/style.css"
это адрес (путь) до файла стилей.
проверьте у Вас на самом деле так, не написано, а именно папки, так расположены на сайте, то есть папка presentation_cycle, в ней папка css, в ней файл style.css. Это и есть проверка пути.

26 июля 2012 в 15:35 : 0

Я создала папку в модулях, назвала ее как у вас presentation_cycle, в ней создала папки соответственно css, images, js в них загрузила их файлы, ну и там были отдельные файлы я их в эту папку кинула, короче так же как в архиве было.

26 июля 2012 в 15:52 : 0

Я создала папку в модулях,

Надо не в модулях, а в корне сайта, (там где все папки джумлы).
У вас путь должен быть таким:
href="/presentation_cycle/css/style.css"
а не таким (как у Вас получился):
href="/modules/presentation_cycle/css/style.css"

26 июля 2012 в 21:07 : 0

Сделала как вы сказали. появился слайдер, меняется там текст но на черном фоне, фотографий нет, а еще шаблон изменился, фон стал в вашу серую клетку.))

26 июля 2012 в 21:19 : 0

фон стал в вашу серую клетку.))

Откройте в папке css (presentation_cycle) файл style.css и в нем удалите вверху строки:

body {
font-family: sans-serif;
font-size: 11px;
color: #ffffff;
background-image: url(../images/pattern.gif);
}

Еще возможно надо будет удалить там же :

h1, a {
color: #DE8F26;
}

p {
padding-bottom: 10px;
}

Это цвет заголовка в слайдере и отступ, но они у вас уже заданы в файле template.css Вашего шаблона.

У Вас произошел конфликт стилей.

фотографий нет,

проверьте правильно ли и без ошибок ли назвали папку images и правильно ли разместили её.