Автор Тема: Баннеры на главной странице  (Прочитано 21289 раз)

Оффлайн alpha33

  • Пользователь
  • **
  • Сообщений: 33
    • Просмотр профиля
Баннеры на главной странице
« : Января 13, 2012, 08:52:01 pm »
Доброго времени суток!

Как-то поднимался уже такой вопрос, но решения, насколько помню, не было.
Смысл:
На главной странице есть баннер. Пример: http://shop.4x4tet.ru/ (Лего 4.6)
Сейчас там два баннера. Возможно ли сделать так, чтобы изображения сменялись на одном и том же месте?
Когда-то такое было на демо-сайте, когда там лежал 4.7

Оффлайн favn

  • Спец
  • ***
  • Сообщений: 121
    • Просмотр профиля
Re: Баннеры на главной странице
« Ответ #1 : Января 13, 2012, 09:06:58 pm »
в поиск гугла вбейте "слайдер для сайта" и "выберайте" из миллиона предложений Ваш. (как один из вариантов решения)

Оффлайн Юрий

  • Старожил
  • ****
  • Сообщений: 322
    • Просмотр профиля
    • Во-Сток
Re: Баннеры на главной странице
« Ответ #2 : Января 13, 2012, 10:01:57 pm »
есть слайдер в шаблоне арилинфо. Только он глючноватый. От него начинает страница потом дергаться когда спецпредложения меняются.
Я себе делал такой:

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/

[вложение удалено администратором]
« Последнее редактирование: Января 28, 2012, 11:11:04 pm от Юрий »

Оффлайн alpha33

  • Пользователь
  • **
  • Сообщений: 33
    • Просмотр профиля
Re: Баннеры на главной странице
« Ответ #3 : Января 24, 2012, 06:50:08 pm »
В результате всё получилось. Юрий, спасибо!
(на момент написания этого сообщения слайдер отключен)

Остался единственный вопрос: Юрий, а каким образом прописать разные ссылки на отдельные баннеры/кадры слайдера? Осталось непонятным. Ссылка прописывается, но только одна, первая. То есть, она получается на весь слайдер целиком.

Подскажите, пожалуйста!

Оффлайн Юрий

  • Старожил
  • ****
  • Сообщений: 322
    • Просмотр профиля
    • Во-Сток
Re: Баннеры на главной странице
« Ответ #4 : Января 24, 2012, 08:50:19 pm »
Я ж писал в скрипте где сами картинки комент. Масив bg.
//Ссылки при нажатии на банер
var bg = {
    
'1':['/','bg1'],
    
'2':['/','bg2'],
    
'3':['/','bg3']
};
« Последнее редактирование: Января 24, 2012, 09:26:17 pm от slamm »

Оффлайн alpha33

  • Пользователь
  • **
  • Сообщений: 33
    • Просмотр профиля
Re: Баннеры на главной странице
« Ответ #5 : Января 29, 2012, 02:09:12 pm »
С исправленным скриптом всё полностью заработало.
Юрию спасибо.

Таким образом, работающий слайдер для 4.6 имеется.

Для тех, кто захочет это установить:
возможно, кому-то важно знать, что для функционирования эта штука обращается к гуглю;
параметры смены кадров лично мне наиболее адекватными показались - fade: 1000 , rotate: 9000
впрочем, на вкус все фломастеры разные. )))

Оффлайн sokrbam

  • Спец
  • ***
  • Сообщений: 168
    • Просмотр профиля
    • Оригинальные подарки для девушек
Re: Баннеры на главной странице
« Ответ #6 : Апреля 11, 2012, 12:51:49 am »
есть слайдер в шаблоне арилинфо. Только он глючноватый. От него начинает страница потом дергаться когда спецпредложения меняются.
Я себе делал такой:

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  проблема в том, что не показываются картинки...просто пустое поле
В чем может быть проблема?

Оффлайн sokrbam

  • Спец
  • ***
  • Сообщений: 168
    • Просмотр профиля
    • Оригинальные подарки для девушек
Re: Баннеры на главной странице
« Ответ #7 : Апреля 11, 2012, 01:24:41 am »
а фотки 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> 

Оффлайн Юрий

  • Старожил
  • ****
  • Сообщений: 322
    • Просмотр профиля
    • Во-Сток
Re: Баннеры на главной странице
« Ответ #8 : Апреля 11, 2012, 01:39:48 am »
фотки ложить нужно в папку с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;}

Оффлайн sokrbam

  • Спец
  • ***
  • Сообщений: 168
    • Просмотр профиля
    • Оригинальные подарки для девушек
Re: Баннеры на главной странице
« Ответ #9 : Апреля 11, 2012, 02:12:03 am »
Спасибо, все получилось. Оказалось версия движка на денвере была перерыта и там куча косяков было в коде. поставил заново движок и все заработало

Оффлайн sokrbam

  • Спец
  • ***
  • Сообщений: 168
    • Просмотр профиля
    • Оригинальные подарки для девушек
Re: Баннеры на главной странице
« Ответ #10 : Апреля 11, 2012, 03:38:06 am »
Я так понимаю, что скрипт расчитан на 3 картинки...а если я хочу вставить gif анимацию, подскажите что подправить?

Dionis_NA

  • Гость
Re: Баннеры на главной странице
« Ответ #11 : Апреля 11, 2012, 09:41:34 am »
Как дети, ей Богу.
Хотите больше картинок, так добавьте ещё по строчке:

.bg4{background:url(../images/slide4.jpegtop left no-repeat;}
.
bg5{background:url(../images/slide5.jpegtop left no-repeat;}
..................
.
bg100{background:url(../images/slide100.jpegtop left no-repeat;}
_______________________
'4':['/','bg4']
'5':['/','bg5']
.................
'100':['/','bg100']

А хотите анимацию, так поменяйте имя картинки:
.bg1{background:url(../images/slide1.giftop left no-repeat;}
Только вряд ли у вас эта анимация дойдёт до конца, она смениться следующей картинкой, если не выставить большее время перед сменой картинки.
ак как выставить больше времени на показ а то я как то раньше хотел сделать и ничего не получилось(
Так и не смог найти где время выставляется

Оффлайн sokrbam

  • Спец
  • ***
  • Сообщений: 168
    • Просмотр профиля
    • Оригинальные подарки для девушек
Re: Баннеры на главной странице
« Ответ #12 : Апреля 11, 2012, 11:39:09 am »
Как дети, ей Богу.
Хотите больше картинок, так добавьте ещё по строчке:

.bg4{background:url(../images/slide4.jpegtop left no-repeat;}
.
bg5{background:url(../images/slide5.jpegtop left no-repeat;}
..................
.
bg100{background:url(../images/slide100.jpegtop left no-repeat;}
_______________________
'4':['/','bg4']
'5':['/','bg5']
.................
'100':['/','bg100']

А хотите анимацию, так поменяйте имя картинки:
.bg1{background:url(../images/slide1.giftop 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 показа и просто висит картинка. что может быть неправильно?

Оффлайн sokrbam

  • Спец
  • ***
  • Сообщений: 168
    • Просмотр профиля
    • Оригинальные подарки для девушек
Re: Баннеры на главной странице
« Ответ #13 : Апреля 11, 2012, 11:58:14 am »
Как сделать чтобы у меня этот один файл gif просто воспроизводился зацикленно?
у меня он останавливается через некоторое время на последнем этапе анимации и все
Залил на сайт http://ostrov-babochek.ru/
через минуту он останавливается и пытается моргать....
« Последнее редактирование: Апреля 11, 2012, 01:20:51 pm от sokrbam »

Оффлайн sokrbam

  • Спец
  • ***
  • Сообщений: 168
    • Просмотр профиля
    • Оригинальные подарки для девушек
Re: Баннеры на главной странице
« Ответ #14 : Апреля 11, 2012, 04:11:49 pm »
Так зачем вам этот скрипт вообще ?
Когда делаете гифку, то просто в самой проге выставьте "зацикливание" что бы не останавливалось да и всё.
Или откройте её и гиф-аниматоре роскадруйте и соберите по новой с нужной скоростью смены и т.д.

Да, скрипт оказался не нужен. сделал так <!--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 -->