Nivo Slider для Lego 6

[lugobor]

По многочисленным просьбам выкладываю слайдер для лего6 с подробным описанием
[spoiler]
Скачать архив

В ваш_сайт/css/ваша_тема/javascript/ заливаем jquery.nivo.slider.pack.js

В ваш_сайт/css/ваша_тема/image/ заливаем arrows.png  bullets.png  loading.gif

В файл ваш_сайт/css/ваша_тема/theme/head.tpl.html перед тегом </head> добавляем

Код: [Выделить]

<script type="text/javascript" src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/javascript/jquery.nivo.slider.pack.js"></script>


В файл ваш_сайт/css/ваша_тема/theme/index.tpl.html перед тегом </body> добавляем

Код: [Выделить]

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>


В файл ваш_сайт/css/ваша_тема/stylesheet/stylesheet.css в самый низ добавьте

Код: [Выделить]

/*Слайдер*/
.theme-default #slider {
    margin:0 auto 0 auto;
    width:742px; /* Ширина слайдера */
    height:456px; /* Высота слайдера */
}
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#ccc;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:9;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}
/*дефолт тема*/
.theme-default .nivoSlider {
    position:relative;
    background:#fff url(../image/loading.gif) no-repeat 50% 50%;
    margin-bottom:50px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.theme-default .nivoSlider a {
    border:0;
    display:block;
}

.theme-default .nivo-controlNav {
    position:absolute;
    left:50%;
    bottom:-42px;
    margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(../image/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.theme-default .nivo-controlNav a.active {
    background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(../image/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
.theme-default a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
.theme-default a.nivo-prevNav {
    left:15px;
}

.theme-default .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
    color:#fff;
}
Здесь можно отредактировать размер окна слайдера, цвет подложки и остальные стили.

Картинки для слайдера 1.jpg 2.jpg 3.jpg 4.jpg положить в ваш_сайт/css/ваша_тема/image/

Теперь в нужное Вам место вставьте код самого слайдера

Код: [Выделить]

<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<a href="#"><img src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/image/1.jpg" alt="" title="Надпись к изображению" /></a>
<img src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/image/2.jpg" alt=""/>
<img src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/image/3.jpg" alt="" data-transition="slideInLeft" />
<img src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/image/2.jpg" alt=""/>
</div>
</div>
</div>
<br><br>
Например, если нужно его разместить на главной вверху, добавьте этот код в ваш_сайт/css/ваша_тема/theme/home.tpl.html перед

Код: [Выделить]

{$index}[/spoiler]

[вложение удалено администратором]

[lugobor]

А почему админ удалил вложение (архив со слайдером)?

Или это теперь платный модуль будет?)))))))))))))))

В таком случае берите его у меня на сайте http://lugobor.org.ua/users/files/download10.html