Автор Тема: Nivo Slider  (Прочитано 11373 раз)

Оффлайн lugobor

  • Пользователь
  • **
  • Сообщений: 83
    • Просмотр профиля
    • Студия web дизайна Lugobor
Nivo Slider
« : Июня 14, 2012, 07:43:44 am »
В /core/js/ заливаем jquery.nivo.slider.pack.js

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

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

<script type="text/javascript" src="./core/js/jquery.nivo.slider.pack.js"></script>
В файл /css/ваша_тема/theme/index.tpl.html перед тегом </body> добавляем

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

(для версии 4,6 заключите в {literal}{/literal})

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

/*Слайдер*/
.theme-default #slider {
margin:0 auto 0 auto;
width:742px; /* Make sure your images are the same size */
height:456px; /* Make sure your images are the same size */
}
.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;
}

Здесь можно отредактировать размер окна слайдера, цвет подложки и остальные стили.

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

<div id="wrapper">

<div class="slider-wrapper theme-default">

<div id="slider" class="nivoSlider">

<a href="ссылка"><img src="Путь к картинке" alt="" title="Надпись к изображению" /></a>

<img src="Путь к картинке" alt=""/>

<img src="Путь к картинке" alt="" data-transition="slideInLeft" />

<img src="Путь к картинке" alt=""/>

</div>

</div>

</div>

Пример _http://sofi.cc.ua

архив во вложении

[вложение удалено администратором]
« Последнее редактирование: Октября 01, 2012, 11:04:11 pm от lugobor »
Студия web дизайна http://lugobor.ru

Jordan

  • Гость
Re: Nivo Slider
« Ответ #1 : Июня 30, 2012, 10:03:55 am »
Внесу свою лепту. ;D
Coin Slider Demo
в core/js заливаем coin-slider.js и coin-slider.min.js
в css/ваша_тема/stylesheet заливаем coin-slider-styles.css
далее в head.tpl.html добавляем
<script type="text/javascript" src="./core/js/coin-slider.js"></script>
<script type="text/javascript" src="./core/js/coin-slider.min.js"></script>
<link rel="stylesheet" href="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/stylesheet/coin-slider-styles.css" type="text/css" />
В файл index.tpl.html перед тегом </body> добавляем
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider();
});
</script>
код самого слайдера ( в моем случае home.tpl.html)
<div id="wrapper">
            <div>
           
           <div id='coin-slider'>

        <img src='/путь/картинко.jpg' >
        <img src='/путь/картинко.jpg' >
                   <img src='/путь/картинко.jpg' >
                   <img src='/путь/картинко.jpg' >
</div>

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

Оффлайн Юрий

  • Старожил
  • ****
  • Сообщений: 322
    • Просмотр профиля
    • Во-Сток
Re: Nivo Slider
« Ответ #2 : Июня 30, 2012, 11:48:54 am »
Цитировать
<script type="text/javascript" src="./core/js/coin-slider.js"></script>
<script type="text/javascript" src="./core/js/coin-slider.min.js"></script>

Как то подозрительно что два скрипта слайдера подключаются... Мне кажется что одного хватит :)

Jordan

  • Гость
Re: Nivo Slider
« Ответ #3 : Июня 30, 2012, 12:13:37 pm »
Как то подозрительно что два скрипта слайдера подключаются... Мне кажется что одного хватит :)
Как то не заморачивался, но вы правы
<script type="text/javascript" src="./core/js/coin-slider.js"></script>можно не подключать...

maksalf

  • Гость
Re: Nivo Slider
« Ответ #4 : Августа 09, 2012, 07:02:49 pm »
а фотки куда заливать ? в какую папку ?

maksalf

  • Гость
Re: Nivo Slider
« Ответ #5 : Августа 11, 2012, 12:10:02 pm »
ок! спасибо за помощь!
просто Nivo Slider как только не пытался не получилось вставить фотки :) забил, поставил coin-slider все работает все спасибо!
slamm™ спасибо за подсказку попробую так и сделать наверное так правильно будет как Вы сказали ,
еще раз Большое Спасибо за подсказки !!!

maksalf

  • Гость
Re: Nivo Slider
« Ответ #6 : Августа 29, 2012, 10:18:44 am »
по поводу Coin Slider
почему то если добавить другой код у меня получается все банеры развернуты сверху вниз
пример добавил кнопку Акция
банер Coin Slider поплыл сверху вниз убрал кнопку все стало на свои места ...и так не только с этой кнопкой...
пример freshapple.kiev.ua

что не так сделал ?
зы lego 5.02
Спасибо...

maksalf

  • Гость
Re: Nivo Slider
« Ответ #7 : Августа 30, 2012, 12:32:17 am »
там что то с кнопкой :(

nictboom

  • Гость
Re: Nivo Slider
« Ответ #8 : Августа 30, 2012, 12:43:52 am »
пробуй закоментировать:<!-- START Jquery library (remove this if you have already use one) -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <!-- END Jquery library -->
одна библиотека уже подключена(интегрирована в скрипт магазина) в head.tpl.html
и чистить core/cache/ не забываем.
если не поможет <script type="text/javascript">
   $(document).ready(function()
{       $('#coin-slider').coinslider();    });
 </script>
подтянуть к слайдеру.

wket

  • Гость
Re: Nivo Slider
« Ответ #9 : Ноября 12, 2012, 01:46:01 pm »
Подскажите пожайлуста что не правильно сделал - слайдер не отображается

aquagrunt.elitno.net

Оффлайн Юрий

  • Старожил
  • ****
  • Сообщений: 322
    • Просмотр профиля
    • Во-Сток
Re: Nivo Slider
« Ответ #10 : Ноября 12, 2012, 05:29:28 pm »
1) Начните с того что бы не использовать кавычки в названии сайта:
"Аквагрунт" - интернет-магазин  аквариумистики.

2)что то я не вижу что бы у Вас присутствовали эти изображения
     <img src='/images/01.jpg' >
                <img src='/images/02.jpg' >
                <img src='/images/03.jpg' >

wket

  • Гость
Re: Nivo Slider
« Ответ #11 : Ноября 12, 2012, 06:53:48 pm »
Юрий спасибо огромное за ответ. Да это у меня была ошибка в пути к изображениям