Legosp Forum
Shop-Script "Legosp" => Дизайн и шаблоны => Тема начата: alpha33 от Января 13, 2012, 08:52:01 pm
-
Доброго времени суток!
Как-то поднимался уже такой вопрос, но решения, насколько помню, не было.
Смысл:
На главной странице есть баннер. Пример: http://shop.4x4tet.ru/ (http://shop.4x4tet.ru/) (Лего 4.6)
Сейчас там два баннера. Возможно ли сделать так, чтобы изображения сменялись на одном и том же месте?
Когда-то такое было на демо-сайте, когда там лежал 4.7
-
в поиск гугла вбейте "слайдер для сайта" и "выберайте" из миллиона предложений Ваш. (как один из вариантов решения)
-
есть слайдер в шаблоне арилинфо. Только он глючноватый. От него начинает страница потом дергаться когда спецпредложения меняются.
Я себе делал такой:
css(в нем указываем путь к нашим изображениям):
[spoiler]
#xfader{height:200px;display:block;position:relative; margin-left:9px;}
.rotate{height:200px;cursor:pointer;width:580px; border: 1px #ccc solid;-moz-box-shadow:1px 1px 3px #555;-webkit-box-shadow:1px 1px 3px #555;box-shadow:1px 1px 3px #555;}
#main-fade ,#slave-fade{position:absolute;left:0;}#slave-fade {z-index:1;}
#main-fade{z-index:2;}
.bg1{background:url(../images/slide1.jpg) top left no-repeat;}
.bg2{background:url(../images/slide2.jpg) top left no-repeat;}
.bg3{background:url(../images/slide3.jpg) top left no-repeat;}[/spoiler]
Дальше где сами картинки:
[spoiler]<!-- image slide -->
<script type="text/javascript" src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/javascript/xfade.js"></script>
<script>
//Ссылки при нажатии на банер
var bg = {
'1':['/','bg1'],
'2':['/','bg2'],
'3':['/','bg3']
};
$(document).ready(function() {
xfade({
fade :1500, //speed of image fade
rotate :4000, //speed images rotate
container :'xfader', // element name for rotate
title :'Подробнее'// href title
});
});
</script>
<div id="xfader"></div>
<!-- image slide -->[/spoiler]
Скрипт приложен ниже. Его кидаем в /css/css_тема/javascript/
[вложение удалено администратором]
-
В результате всё получилось. Юрий, спасибо!
(на момент написания этого сообщения слайдер отключен)
Остался единственный вопрос: Юрий, а каким образом прописать разные ссылки на отдельные баннеры/кадры слайдера? Осталось непонятным. Ссылка прописывается, но только одна, первая. То есть, она получается на весь слайдер целиком.
Подскажите, пожалуйста!
-
Я ж писал в скрипте где сами картинки комент. Масив bg.
//Ссылки при нажатии на банер
var bg = {
'1':['/','bg1'],
'2':['/','bg2'],
'3':['/','bg3']
};
-
С исправленным скриптом всё полностью заработало.
Юрию спасибо.
Таким образом, работающий слайдер для 4.6 имеется.
Для тех, кто захочет это установить:
возможно, кому-то важно знать, что для функционирования эта штука обращается к гуглю;
параметры смены кадров лично мне наиболее адекватными показались - fade: 1000 , rotate: 9000
впрочем, на вкус все фломастеры разные. )))
-
есть слайдер в шаблоне арилинфо. Только он глючноватый. От него начинает страница потом дергаться когда спецпредложения меняются.
Я себе делал такой:
css(в нем указываем путь к нашим изображениям):
[spoiler]
#xfader{height:200px;display:block;position:relative; margin-left:9px;}
.rotate{height:200px;cursor:pointer;width:580px; border: 1px #ccc solid;-moz-box-shadow:1px 1px 3px #555;-webkit-box-shadow:1px 1px 3px #555;box-shadow:1px 1px 3px #555;}
#main-fade ,#slave-fade{position:absolute;left:0;}#slave-fade {z-index:1;}
#main-fade{z-index:2;}
.bg1{background:url(../images/slide1.jpg) top left no-repeat;}
.bg2{background:url(../images/slide2.jpg) top left no-repeat;}
.bg3{background:url(../images/slide3.jpg) top left no-repeat;}[/spoiler]
Дальше где сами картинки:
[spoiler]<!-- image slide -->
<script type="text/javascript" src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/javascript/xfade.js"></script>
<script>
//Ссылки при нажатии на банер
var bg = {
'1':['/','bg1'],
'2':['/','bg2'],
'3':['/','bg3']
};
$(document).ready(function() {
xfade({
fade :1500, //speed of image fade
rotate :4000, //speed images rotate
container :'xfader', // element name for rotate
title :'Подробнее'// href title
});
});
</script>
<div id="xfader"></div>
<!-- image slide -->[/spoiler]
Скрипт приложен ниже. Его кидаем в /css/css_тема/javascript/
Сделал все также на версии 5,0,2 проблема в том, что не показываются картинки...просто пустое поле
В чем может быть проблема?
-
а фотки images/slide3.jpg и т.д действительно там есть ?
И дайте ссылку на сайт по возможности !
И папка images эта находиться не в корне магазина, а её нужно создать в папке вашей темы, или укажите свой путь к картинкам
Тестирую на денвере..
фотки положил уже везде, и в корне, и в теме и создал еще одну в теме. Сами файлы формата jpeg
код ставлю после id content
кусок кода из css: #xfader{height:200px;display:block;position:relative; margin-left:9px;}
.rotate{height:200px;cursor:pointer;width:580px; border: 1px #ccc solid;}
#main-fade ,#slave-fade{position:absolute;left:0;}#slave-fade {z-index:1;}
#main-fade{z-index:2;}
.bg1{background:url(../images/slide1.jpeg) top left no-repeat;}
.bg2{background:url(../images/slide2.jpeg) top left no-repeat;}
.bg3{background:url(../images/slide3.jpeg) top left no-repeat;}
и из index.tpl.html: <div id="content">
<!-- image slide -->
<script type="text/javascript" src="./css/css_default-full/javascript/xfade.js"></script>
<script>
//Ссылки при нажатии на банер
var bg = {
'1':['/catalog/bukety-iz-myagkih-igrushek/','bg1'],
'2':['/','bg2'],
'3':['/','bg3']
};
$(document).ready(function() {
xfade({
fade :1500, //speed of image fade
rotate :4000, //speed images rotate
container :'xfader', // element name for rotate
title :'Подробнее'// href title
});
});
</script>
<div id="xfader"></div>
<!-- image slide -->
<div class="left"></div>
<div class="right"></div>
-
фотки ложить нужно в папку сcs/css_ваша тема/images/ это по стандарту если не меняли путь и имена картинок в этих строках
.bg1{background:url(../images/slide1.jpeg) top left no-repeat;}
.bg2{background:url(../images/slide2.jpeg) top left no-repeat;}
.bg3{background:url(../images/slide3.jpeg) top left no-repeat;}
-
Спасибо, все получилось. Оказалось версия движка на денвере была перерыта и там куча косяков было в коде. поставил заново движок и все заработало
-
Я так понимаю, что скрипт расчитан на 3 картинки...а если я хочу вставить gif анимацию, подскажите что подправить?
-
Как дети, ей Богу.
Хотите больше картинок, так добавьте ещё по строчке:
.bg4{background:url(../images/slide4.jpeg) top left no-repeat;}
.bg5{background:url(../images/slide5.jpeg) top left no-repeat;}
..................
.bg100{background:url(../images/slide100.jpeg) top left no-repeat;}
_______________________
'4':['/','bg4']
'5':['/','bg5']
.................
'100':['/','bg100']
А хотите анимацию, так поменяйте имя картинки:
.bg1{background:url(../images/slide1.gif) top left no-repeat;}
Только вряд ли у вас эта анимация дойдёт до конца, она смениться следующей картинкой, если не выставить большее время перед сменой картинки.
ак как выставить больше времени на показ а то я как то раньше хотел сделать и ничего не получилось(
Так и не смог найти где время выставляется
-
Как дети, ей Богу.
Хотите больше картинок, так добавьте ещё по строчке:
.bg4{background:url(../images/slide4.jpeg) top left no-repeat;}
.bg5{background:url(../images/slide5.jpeg) top left no-repeat;}
..................
.bg100{background:url(../images/slide100.jpeg) top left no-repeat;}
_______________________
'4':['/','bg4']
'5':['/','bg5']
.................
'100':['/','bg100']
А хотите анимацию, так поменяйте имя картинки:
.bg1{background:url(../images/slide1.gif) top left no-repeat;}
Только вряд ли у вас эта анимация дойдёт до конца, она смениться следующей картинкой, если не выставить большее время перед сменой картинки.
Попробовал сделать логически:
удалил '2':['/catalog/salyuty-iz-babochek/','bg2'],
'3':['/catalog/salyuty-iz-babochek/','bg3'] и в css тоже удалил путь к slide1 и slide2 - все исчезает
Хотя, если вы говорите что хочешь добавить добавляй, одна картинка - убавь.
Получается только так: var bg = {
'1':['/catalog/salyuty-iz-babochek/','bg1'],
'2':['/catalog/salyuty-iz-babochek/','bg2'],
'3':['/catalog/salyuty-iz-babochek/','bg3']
};
$(document).ready(function() {
xfade({
fade :1500, //speed of image fade
rotate :9000, //speed images rotate
container :'xfader', // element name for rotate
title :'Подробнее'// href title
}); а в css .bg1{background:url(../image/slide1.gif) top left no-repeat;}
.bg2{background:url(../image/slide1.gif) top left no-repeat;}
.bg3{background:url(../image/slide1.gif) top left no-repeat;} но в итоге слайд залипает после 10 показа и просто висит картинка. что может быть неправильно?
-
Как сделать чтобы у меня этот один файл gif просто воспроизводился зацикленно?
у меня он останавливается через некоторое время на последнем этапе анимации и все
Залил на сайт http://ostrov-babochek.ru/
через минуту он останавливается и пытается моргать....
-
Так зачем вам этот скрипт вообще ?
Когда делаете гифку, то просто в самой проге выставьте "зацикливание" что бы не останавливалось да и всё.
Или откройте её и гиф-аниматоре роскадруйте и соберите по новой с нужной скоростью смены и т.д.
Да, скрипт оказался не нужен. сделал так <!--banner-->
<div id="banner" style="text-align: center;">
<div class="banner"><a href="http://hokolo.ru/catalog/kompyutery/"><img src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/image/slide1.gif"</a> </div>
<!-- eof banner -->
-
Замечательный ротатор - спасибо автору.
У меня небольшой вопрос, средний блок у меня резиновый, следовательно при имеющемся коде цсс ротатор не по центру.
Перекопал все варианты центрирования - не получается выставить по центру. Не подскажете как?
-
Уважаемый автор скрипта, можно ли платно допилить ротатор под мои нужды.
1. Чтобы центрировался на резиновом сайте
2. Чтобы первое изображение было случайным, а за ним шло сдедующее.
-
Разобрался сам путем замены слайдера.
Всем рекомендую Nivo Slider
Настроек куча, установить просто, работает ровно и в резине и в статике )