Legosp Forum
Shop-Script "Legosp" => Разработка => Тема начата: lugobor от Июня 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
архив во вложении
[вложение удалено администратором]
-
Внесу свою лепту. ;D
Coin Slider Demo (http://workshop.rs/projects/coin-slider/)
в 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>
[вложение удалено администратором]
-
<script type="text/javascript" src="./core/js/coin-slider.js"></script>
<script type="text/javascript" src="./core/js/coin-slider.min.js"></script>
Как то подозрительно что два скрипта слайдера подключаются... Мне кажется что одного хватит :)
-
Как то подозрительно что два скрипта слайдера подключаются... Мне кажется что одного хватит :)
Как то не заморачивался, но вы правы
<script type="text/javascript" src="./core/js/coin-slider.js"></script>
можно не подключать...
-
а фотки куда заливать ? в какую папку ?
-
ок! спасибо за помощь!
просто Nivo Slider как только не пытался не получилось вставить фотки :) забил, поставил coin-slider все работает все спасибо!
slamm™ спасибо за подсказку попробую так и сделать наверное так правильно будет как Вы сказали ,
еще раз Большое Спасибо за подсказки !!!
-
по поводу Coin Slider
почему то если добавить другой код у меня получается все банеры развернуты сверху вниз
пример добавил кнопку Акция
банер Coin Slider поплыл сверху вниз убрал кнопку все стало на свои места ...и так не только с этой кнопкой...
пример freshapple.kiev.ua
что не так сделал ?
зы lego 5.02
Спасибо...
-
там что то с кнопкой :(
-
пробуй закоментировать:
<!-- 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>
подтянуть к слайдеру.
-
Подскажите пожайлуста что не правильно сделал - слайдер не отображается
aquagrunt.elitno.net
-
1) Начните с того что бы не использовать кавычки в названии сайта:
"Аквагрунт" - интернет-магазин аквариумистики.
2)что то я не вижу что бы у Вас присутствовали эти изображения
<img src='/images/01.jpg' >
<img src='/images/02.jpg' >
<img src='/images/03.jpg' >
-
Юрий спасибо огромное за ответ. Да это у меня была ошибка в пути к изображениям