Слайдер баннеров для Шаблона t5 и не только.

640
Простой слайдер баннеров из компонента с одноименным названием. :)





Пример

создаем файл шаблон/modules/module_banner_slider.tpl
заполняем его нижу приведенным кодом и сохраняем.
в админке сайта отредактируем(если нет модуля, создаем его) существующей модуль, как на снимке.
каждый новый баннер берем в теги <p></p>.
редактируем в режиме "Исходник".

Код PHP:
	<script type="text/javascript">
    {literal}
	

  $(function() {

var newsVisual = 2; // Numero di news da visualizzare - news to be displayed
var intervallo = 9000; // >800
var numNews;
var numNewsOrizzontal;

$(document).ready(function() {
    // Totale news
    var numNews = $("#banner_slider").children().length;

    // Controllo di overflow
    if (newsVisual > numNews) {
        newsVisual = numNews;
    }

    // Hide delle news superflue all'inizializzazione
    for (var i = newsVisual; i < numNews; i++) {
        $($("#banner_slider").children()[i]).css("opacity", "0");
    }
    
    var gestInter = setInterval(banner_sliderRotate, intervallo);

    // Gestione del mouseover-mouseout
    $("#banner_slider").mouseover(function() { clearInterval(gestInter) });
    $("#banner_slider").mouseout(function() { gestInter = setInterval(banner_sliderRotate, intervallo); });
});

function banner_sliderRotate(_newsVisual) {

    // Inserire lo stesso valore utilizzato per definire l'altezza ed i margini dei div nel file css/style.css
    var altezzaP = -80;
    var margineP = 0;

    // Hide della prima news
    $($("#banner_slider").children()[0]).animate({ opacity: 0 }, 1000, "linear", function() {
    // Movimento verso l'alto
        $($("#banner_slider").children()[0]).animate({ marginTop: altezzaP }, 1000, "linear", function() {
        // Ripristino posizione elemento nascosto
            $($("#banner_slider").children()[0]).css("margin", margineP);
            // Spostamento in coda dell'elemento nascosto
            $("#banner_slider").append($($("#banner_slider").children()[0]));
            // Visualizzazione dell'ultima news
            $($("#banner_slider").children()[(newsVisual - 1)]).animate({ opacity: 1 }, 1000);
        });
    });
}
  });

	    {/literal}
</script>


<style>
	    {literal}

#banner_slider
{
	overflow: hidden;
	height: 60px;

}

#banner_slider P
{

	display: block;
	overflow: hidden;
	height: 60px;
margin:0;
padding:0
 

}

	    {/literal}

</style>


<div class="mod_banner" align=center>
 <div id="banner_slider">
    {$mod.body}
	</div>
</div>
стили настроены для вертикального баннера с высотой не более 60px.
если будете использовать другой баннер то нужно править стили.
чтобы поменять макс допустимую высоту, правьте строчку height: 60px;
Шаблон для InstantCMS #5 | Расширенный модуль - Новое в блогах. И небольшое дополнение к компоненту Блоги
Комментарии (6)
vitalson9 24 февраля 2012 в 07:45 0
no profile
Торчат дивы
Денис Васильевич 24 февраля 2012 в 14:02 +1
small user social cms
это не дивы :)

Внимательней и логику включайте. Я за Вас это делать не буду.

каждый новый баннер берем в теги <p></p>.
Значит есть пустые теги <p>. либо муссор в коде.

и я ведь заметил - редактируем в режиме "Исходник".
yury 24 февраля 2012 в 19:06 0
no avatar
тобы поменять макс допустимую ширину, правьте строчку height: 60px;
только не ширину, а высоту наверное?
Денис Васильевич 24 февраля 2012 в 19:11 0
small user social cms
ширину по вертикали ;)
Harconen 27 октября 2012 в 11:49 0
small user social cms
а поточней путь скрипта можете показать как прописывать ?
GarikKR 9 апреля 2012 в 18:35 0
small user social cms
В опере касяк,не работает,вернее работае но криво пипец.В IE Отлично работает,в Хроме отлично,В Лисе отлично.Помогите в Опере поправить пжалуста..