Legosp Forum

Shop-Script "Legosp" => Дизайн и шаблоны => Тема начата: Al_Uk от Ноября 29, 2011, 10:12:35 am

Название: Как работает Слайдер
Отправлено: Al_Uk от Ноября 29, 2011, 10:12:35 am: Шаблон Restorante.

Не могу понять, как работает баннер вверху страницы! Четыре картинки jpg меняются одна за другой плавно.
[spoiler](http://my.jetscreenshot.com/7446/20111129-ji3w-74kb.jpg)[/spoiler]
Неужели это сделано силами CSS без JavaScript?
Чудо какое то. Сломал голову над изучением кода.
Просветите пожалуста камрады , как работает этот баннер?

Сидел вчера до 2 ночи, ковырял шаблон Restorante.

код CSS баннера прост
[spoiler]

.contentShade {border: 1px #dbb772 solid; background:#f5daa7; margin-bottom:10px;}
.slide {text-align:center; padding:4px 0}

<div class="contentShade">
<div style="display: block;" class="slide" id="slide0"><img src="/css/css_{$smarty.const.CONF_COLOR_SCHEME}/image/slide1.jpg" alt="" height="238px" width="530px"></div>
<div class="slide" id="slide1" style="display: none;"><img src="/css/css_{$smarty.const.CONF_COLOR_SCHEME}/image/slide2.jpg" alt="" height="238px" width="530px"></div>
<div class="slide" id="slide2" style="display: none;"><img src="/css/css_{$smarty.const.CONF_COLOR_SCHEME}/image/slide3.jpg" alt="" height="238px" width="530px"></div>
<div class="slide" id="slide3" style="display: none;"><img src="/css/css_{$smarty.const.CONF_COLOR_SCHEME}/image/slide4.jpg" alt="" height="238px" width="530px"></div>
</div>[/spoiler]

Но повторить такой же трюк, подставив свои картинки не удается...

Непонятно что за класс такой id=slide1 id=slide2 id=slide3, нигде в шаблонах его не нахожу

есть похожие классы в js_scripts.js но непонятно как настраивать, и вообще оно или нет. Доков в инете не нахожу.
Название: Re: Как работает Слайдер
Отправлено: Al_Uk от Ноября 29, 2011, 02:53:31 pm: спасибо, понял суть. пойду доки читать.
Название: Re: Как работает Слайдер
Отправлено: uorec от Марта 20, 2012, 04:13:55 pm: У меня проблемка)
Суть в том что баннер вообще не крутится а стоит на 1 картинке
{* front-end homepage*}

<div class="contentShade">
<div style="display: block;" class="slide" id="slide0"><img src="/css/css_{$smarty.const.CONF_COLOR_SCHEME}/images/impuls.png" alt="" height="300px" width="730px"></div>
<div class="slide" id="slide1" style="display: none;"><img src="/css/css_{$smarty.const.CONF_COLOR_SCHEME}/images/gommaj.png" alt="" height="300px" width="730px"></div>
<div class="slide" id="slide3" style="display: none;"><img src="/css/css_{$smarty.const.CONF_COLOR_SCHEME}/images/impuls.png" alt="" height="300px" width="730px"></div>
<div class="slide" id="slide4" style="display: none;"><img src="/css/css_{$smarty.const.CONF_COLOR_SCHEME}/images/reforma.png" alt="" height="300px" width="730px"></div>
<div class="slide" id="slide5" style="display: none;"><img src="/css/css_{$smarty.const.CONF_COLOR_SCHEME}/images/tea.png" alt="" height="300px" width="730px"></div>
</div>
<br />

такая же штука на "ХИТ ПРОДАЖ" стоит на максимально большом количестве проданного товара.
тема стоит css_aqua
помогите разобраться!!! заранее спасибо!!!
Название: Re: Как работает Слайдер
Отправлено: Юрий от Марта 20, 2012, 11:38:54 pm: я бы не советовал использовать тот слайдер. Он предназначен для хит продаж. Просто не было времени исправить его в аква. Лучше используйте http://forum.shop-script.org/index.php?topic=567.msg4306#msg4306
Название: Re: Как работает Слайдер
Отправлено: uorec от Марта 21, 2012, 12:57:20 am: Цитата: Юрий от Марта 20, 2012, 11:38:54 pm
я бы не советовал использовать тот слайдер. Он предназначен для хит продаж. Просто не было времени исправить его в аква. Лучше используйте http://forum.shop-script.org/index.php?topic=567.msg4306#msg4306

Все отлично спасиб помогло!
ток при старте страничке появляются сразу 1 и 2 картинка но через 2 секунды вторая пропадает и все идет нормально. до тех пор пока не обновишь или не перейдешь на новую стр.
Название: Re: Как работает Слайдер
Отправлено: Юрий от Марта 21, 2012, 01:28:49 am: не знаю. Скрипт конечно не очень доработан, но вроде все норм работает http://vo-stok.com.ua/
Название: Re: Как работает Слайдер
Отправлено: uorec от Марта 21, 2012, 01:36:17 am: http://sibzdorove.ru ну вот у меня как)
и еще вопрос ток уже не по теме этой) Как поменять цвет текста в админке не меняется
Название: Re: Как работает Слайдер
Отправлено: Юрий от Марта 21, 2012, 01:58:36 am: ну то нужно скрипт дорабатывать. Все таки глючноватый

style-backend.css посмотрите...
Название: Re: Как работает Слайдер
Отправлено: uorec от Марта 21, 2012, 12:01:38 pm: Цитата: pehser от Марта 21, 2012, 09:36:40 am
причем сдесь style-backend.css
пусть смотрят css шаблона ./css/css_aqua/stylesheet/stylesheet.css
кикието правале цвета берутся видать отуда

да именно сдесь редактируется цвет ссылок:
"a{text-decoration:underline; cursor:pointer; color:#343434; }"
изменил на 343434 и все стало на свои места!

Огромное спасибо за помощь!
Название: Re: Как работает Слайдер
Отправлено: uorec от Марта 21, 2012, 12:57:13 pm: по поводу наложение картинок вроде тож разобрался

"function xfade(hash){var ind = 1;var ind2 = 1;try{if(!hash){hash={fade:700,rotate:3500}}if(hash["fade"]>hash["rotate"]){hash["fade"]=hash["rotate"]}if(bg){var order=[];var i=0;for(k in bg){order=k;i++}$('#'+hash["container"]).html('<a id="xfade" href="'+bg[order[0]][0]+'" title="'+hash["title"]+'"><div id="main-fade" class="rotate '+bg[order[0]][0]+'"> </div><div "
где выделено синим были сделаны изменения:
где второй нолик бала единичка
видать тут идет как раз обращение к выводу картинок: 0-1картинка, а 1-это вторая картинка
мож я и не прав в выводах но это заработало и наслоение картинок пропало что и есть хорошо))) ;)