Автор Тема: Как работает Слайдер  (Прочитано 13073 раз)

Оффлайн Al_Uk

  • Спец
  • ***
  • Сообщений: 247
    • Просмотр профиля
Как работает Слайдер
« : Ноября 29, 2011, 10:12:35 am »
Шаблон Restorante.

Не могу понять, как работает баннер вверху страницы! Четыре картинки jpg меняются одна за другой плавно.
[spoiler][/spoiler]
Неужели это сделано силами CSS без JavaScript?
Чудо какое то. Сломал голову над изучением кода.
Просветите пожалуста камрады , как работает этот баннер?

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


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

.contentShade {border1px #dbb772 solid; background:#f5daa7; margin-bottom:10px;}
.slide {text-align:centerpadding: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 но непонятно как настраивать, и вообще оно или нет. Доков в инете не нахожу.






« Последнее редактирование: Ноября 29, 2011, 10:30:27 am от Al_Uk »

Оффлайн Al_Uk

  • Спец
  • ***
  • Сообщений: 247
    • Просмотр профиля
Re: Как работает Слайдер
« Ответ #1 : Ноября 29, 2011, 02:53:31 pm »
спасибо, понял суть. пойду доки читать.

uorec

  • Гость
Re: Как работает Слайдер
« Ответ #2 : Марта 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
помогите разобраться!!! заранее спасибо!!!

Оффлайн Юрий

  • Старожил
  • ****
  • Сообщений: 322
    • Просмотр профиля
    • Во-Сток
Re: Как работает Слайдер
« Ответ #3 : Марта 20, 2012, 11:38:54 pm »
я бы не советовал использовать тот слайдер. Он предназначен для хит продаж. Просто не было времени исправить его в аква. Лучше используйте http://forum.shop-script.org/index.php?topic=567.msg4306#msg4306

uorec

  • Гость
Re: Как работает Слайдер
« Ответ #4 : Марта 21, 2012, 12:57:20 am »
я бы не советовал использовать тот слайдер. Он предназначен для хит продаж. Просто не было времени исправить его в аква. Лучше используйте http://forum.shop-script.org/index.php?topic=567.msg4306#msg4306

Все отлично спасиб помогло!
  ток  при старте страничке появляются сразу 1 и 2 картинка  но через 2 секунды вторая пропадает и все идет  нормально. до тех пор пока не обновишь или не перейдешь на новую стр.

Оффлайн Юрий

  • Старожил
  • ****
  • Сообщений: 322
    • Просмотр профиля
    • Во-Сток
Re: Как работает Слайдер
« Ответ #5 : Марта 21, 2012, 01:28:49 am »
не знаю. Скрипт конечно не очень доработан, но вроде все норм работает http://vo-stok.com.ua/

uorec

  • Гость
Re: Как работает Слайдер
« Ответ #6 : Марта 21, 2012, 01:36:17 am »
http://sibzdorove.ru ну вот у меня как)
и еще вопрос ток уже не по теме этой) Как поменять цвет текста  в  админке не меняется

Оффлайн Юрий

  • Старожил
  • ****
  • Сообщений: 322
    • Просмотр профиля
    • Во-Сток
Re: Как работает Слайдер
« Ответ #7 : Марта 21, 2012, 01:58:36 am »
ну то нужно скрипт дорабатывать. Все таки глючноватый


style-backend.css посмотрите...
« Последнее редактирование: Марта 21, 2012, 02:04:09 am от Юрий »

uorec

  • Гость
Re: Как работает Слайдер
« Ответ #8 : Марта 21, 2012, 12:01:38 pm »
причем сдесь style-backend.css
пусть смотрят css шаблона ./css/css_aqua/stylesheet/stylesheet.css
кикието правале цвета берутся видать отуда

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

Огромное спасибо за помощь!

uorec

  • Гость
Re: Как работает Слайдер
« Ответ #9 : Марта 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]+'">&nbsp;</div><div "
где выделено синим были сделаны изменения:
где второй нолик бала  единичка
видать тут идет  как раз обращение к выводу картинок:  0-1картинка, а 1-это вторая картинка
мож я и не прав в выводах но это заработало и наслоение картинок пропало что и есть хорошо))) ;)