Перейти к содержимому


Изменение Слайдера


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 17

#1 kdi45

kdi45

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений

Отправлено 10 Февраль 2016 - 21:35

тема переехала отсюда. Не могу установить Flexslider,  делаю все вот по этой в том числе инструкции, максимум чего добился флекс встал, но изображения не перелистываются, а просто меняются, и по-моему jssor_slider до конца то же у меня не удалился. Его вообще можно прикрутить? ... или подскажите пожалуйста, как допилить родной слайдер в плане того, что бы он не просто перелистывал изображения, а по нажатию на его него можно было попасть в соответствующую категорию товара?

#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 11 Февраль 2016 - 04:49

По новому слайдеру не увидела у вас изменений, сохраните пожалуйста их, если все еще хотите его установить на свой сайт. по родному слайдеру, для добавления ссылок на баннеры необходимо вставить <a href="#"></a> конструкцию, за 1 слайд отвечает следующая строка в шаблоне HTML:
<div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" />
			  </div>

приведите ее к следующему виду:
<div><a href="ссылка">
				<img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" />
			 </a> </div>

другие баннеры изменяйте по аналогии

#3 kdi45

kdi45

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений

Отправлено 11 Февраль 2016 - 09:55

Добрый день. Про добавление ссылок на баннеры все понял, работает. Правда на родном слайдере перелистывать руками не очень удобно, т.к. срабатывает нажатие кл. мыши и открывается соответствующая страница, может если поставить стрелки по бокам слайдера...
...по поводу flex-а, было востановление ил бэкапа поэтому Вы изменений не заметили.Сейчас сделал еще раз все, что делал вчера, а именно:
в раздел скрипты была удалена строка
<script type="text/javascript" src="{ASSETS_JS_PATH}jssor_slider.js?design=orange"></script>
и  вставлен код
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}flexslider.css" type="text/css">
<script src="{ASSETS_JS_PATH}jquery.flexslider.js"></script>

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>

вместо этого кода
<div u="slides" class="slides_container">
  <div>
    <img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" />
  </div>
  <div>
    <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
  </div>
  <div>
    <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
  </div>
  <div>
    <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
  </div>
   <div>
    <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
  </div>
    </div>
  </div>
    </div>
    {% ENDIF %}

вставлен этот
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="{ASSETS_IMAGES_PATH}slide1.png" />
</li>
<li>
<img src="{ASSETS_IMAGES_PATH}slide2.png" />
</li>
<li>
<img src="{ASSETS_IMAGES_PATH}slide3.png" />
</li>
</ul>
</div>

#4 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 11 Февраль 2016 - 10:49

Просмотр сообщенияkdi45 (11 Февраль 2016 - 09:55) писал:

Добрый день. Про добавление ссылок на баннеры все понял, работает. Правда на родном слайдере перелистывать руками не очень удобно, т.к. срабатывает нажатие кл. мыши и открывается соответствующая страница, может если поставить стрелки по бокам слайдера...
...по поводу flex-а, было востановление ил бэкапа поэтому Вы изменений не заметили.Сейчас сделал еще раз все, что делал вчера, а именно:
в раздел скрипты была удалена строка
<script type="text/javascript" src="{ASSETS_JS_PATH}jssor_slider.js?design=orange"></script>
и  вставлен код
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}flexslider.css" type="text/css">
<script src="{ASSETS_JS_PATH}jquery.flexslider.js"></script>

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>

вместо этого кода
<div u="slides" class="slides_container">
  <div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" />
  </div>
  <div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
  </div>
  <div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
  </div>
  <div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
  </div>
   <div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
  </div>
</div>
  </div>
</div>
{% ENDIF %}

вставлен этот
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="{ASSETS_IMAGES_PATH}slide1.png" />
</li>
<li>
<img src="{ASSETS_IMAGES_PATH}slide2.png" />
</li>
<li>
<img src="{ASSETS_IMAGES_PATH}slide3.png" />
</li>
</ul>
</div>

Здравствуйте.
Создали Вам новый бэкап (11.02.2016 10:05:02) и внесли поправки для установленного Flex слайдера.
Проверьте, пожалуйста.

#5 kdi45

kdi45

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений

Отправлено 11 Февраль 2016 - 12:06

Восстановил из бэкап (11.02.2016 10:05:02), появилось сообщение об ошибке, отсутствуют кнопки и слайдер в 1.5. раза шире экрана. ...и перед появлением flex-а проскакивает фон родного слайдера
...изображение автоматически не меняется

#6 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 11 Февраль 2016 - 14:17

Просмотр сообщенияkdi45 (11 Февраль 2016 - 12:06) писал:

Восстановил из бэкап (11.02.2016 10:05:02), появилось сообщение об ошибке, отсутствуют кнопки и слайдер в 1.5. раза шире экрана. ...и перед появлением flex-а проскакивает фон родного слайдера
...изображение автоматически не меняется
Здравствуйте, найдите в шаблоне hTML  и удалите
<!-- Запуск слайдера -->
{% IF index_page %}
<script>
	 $(function(){ slideShow()});
</script>
{% ENDIF %}


далее найдите
{% IF index_page %}
<div id="slideshow" class="wrap">
		 <div id="slider">
		 <!-- Slides Container -->
		 <!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide1.png" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide2.png" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide3.png" />
</li>
</ul>
</div>
		 </div>
	 </div>
	 {% ENDIF %}

замените на
{% IF index_page %}
		 <div class="container">
	 <div id="slideshow" class="wrap">
		 <div id="slider">
		 <!-- Slides Container -->
		 <!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide1.png" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide2.png" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide3.png" />
</li>
</ul>
</div>
		 </div>
	 </div> </div>
	 {% ENDIF %}


далее найдите в файле main.css
#slideshow {margin: 0 0;position: relative;}
#slider {position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1920px; height: 570px; overflow: hidden;z-index:1;}
и удалите
далее найдите и удалите
#breadcrumbs, #product-next-pre, .container-slider .page-title-slider, #main_left .block-title, .success, #slideshow  {
background: #f79242;
background: -moz-linear-gradient(left, #fb7e3e 0%, #ac2c77 160%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fb7e3e), color-stop(160%,#ac2c77));
background: -webkit-linear-gradient(left, #fb7e3e 0%,#ac2c77 160%);
background: -o-linear-gradient(left, #fb7e3e 0%,#ac2c77 160%);
background: -ms-linear-gradient(left, #fb7e3e 0%,#ac2c77 160%);
background: linear-gradient(to right, #fb7e3e 0%,#ac2c77 160%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb7e3e', endColorstr='#ac2c77',GradientType=1 );
}


далее найдите в файле flexslider.css
.flex-direction-nav a:before {
font-family: "flexslider-icon";
font-size: 40px;
display: inline-block;
content: '\f001';
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
content: '\f002';
}
замените на
.flex-direction-nav a:before {
font-family: "FontAwesome";
font-size: 40px;
display: inline-block;
content: '\f053';
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
content: '\f054';
}


#7 kdi45

kdi45

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений

Отправлено 11 Февраль 2016 - 15:11

в целом работает, но смена изображения происходит не как у оригинала, а статически, т.е. просто меняется картинка.

#8 kdi45

kdi45

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений

Отправлено 11 Февраль 2016 - 16:29

это поправимо?

#9 RedHead

RedHead

    Активный участник

  • Модераторы
  • 1 052 сообщений

Отправлено 11 Февраль 2016 - 16:44

Просмотр сообщенияkdi45 (11 Февраль 2016 - 15:11) писал:

в целом работает, но смена изображения происходит не как у оригинала, а статически, т.е. просто меняется картинка.

Здравствуйте. В шаблоне html замените строки:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
на:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
  $('.flexslider').flexslider({
	animation: "slide"
  });
});
</script>

Теперь слайды будут перелистываться плавно.

#10 kdi45

kdi45

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений

Отправлено 11 Февраль 2016 - 17:40

да это то, что нужно. Всем большое, большое спасибо.

#11 kdi45

kdi45

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений

Отправлено 11 Февраль 2016 - 21:58

все-таки возникли некоторые вопросы ).
1. После всех манипуляций вверху между слайдером и шапкой осталась узкая белая полоса, которая была не заметна на безфоновом изображении
2. чтоб слайдер не выглядел таким обрезанным, как его можно либо сделать на ширину экрана, либо залить по бокам и под ним (там, где точки) фон, как под шапкой -f2f2f2.
3. как уменьшить расстояние, или вообще этот промежуток убрать, а точки поместить на сам слайдер

Прикрепленные изображения

  • Снимок экрана от 2016-02-11 23-34-53.png


#12 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 12 Февраль 2016 - 05:53

1. В flexslider.css найдите:
.flexslider {
  margin: 0 0 60px;
  background: #ffffff;
  border: 4px solid #ffffff;
  position: relative;
  zoom: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
}

замените на:
.flexslider {
  margin: 0;
  background: #ffffff;
  position: relative;
  zoom: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
}

2. В шаблоне HTML найдите:
<!-- Слайдер на главной -->
		{% IF index_page %}
				 <div class="container">
		 <div id="slideshow" class="wrap">
				 <div id="slider">
				 <!-- Slides Container -->
				 <!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
				 <img src="{ASSETS_IMAGES_PATH}slide1.png" />
</li>
<li>
				 <img src="{ASSETS_IMAGES_PATH}slide2.png" />
</li>
</ul>
</div>
				 </div>
		 </div> </div>
		 {% ENDIF %}
		<!-- /END Слайдер на главной -->
замените на:
<!-- Слайдер на главной -->
		{% IF index_page %}
		 <div id="slideshow" class="wrap">
				 <div id="slider">
				 <!-- Slides Container -->
				 <!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
				 <img src="{ASSETS_IMAGES_PATH}slide1.png" />
</li>
<li>
				 <img src="{ASSETS_IMAGES_PATH}slide2.png" />
</li>
</ul>
</div>
				 </div>
		 </div>
		 {% ENDIF %}
		<!-- /END Слайдер на главной -->

3. В flexslider.css найдите:
.flex-control-nav {
	width: 100%;
	position: absolute;
	bottom: -40px;
	text-align: center;
}

замените на:
.flex-control-nav {
	width: 100%;
	position: absolute;
	bottom: 20px;
	text-align: center;
}


#13 kdi45

kdi45

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений

Отправлено 12 Февраль 2016 - 12:40

да, спасибо

#14 kdi45

kdi45

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений

Отправлено 12 Февраль 2016 - 15:57

Здравствуйте, обнаружилось, что сейчас ширина страницы больше экрана (рис)

Прикрепленные изображения

  • 2.png


#15 RedHead

RedHead

    Активный участник

  • Модераторы
  • 1 052 сообщений

Отправлено 12 Февраль 2016 - 16:16

Просмотр сообщенияkdi45 (12 Февраль 2016 - 15:57) писал:

Здравствуйте, обнаружилось, что сейчас ширина страницы больше экрана (рис)

Здравствуйте. Попробуйте в шаблоне main.css заменить строку:

body {background-color: #ffffff;color: #666666;font-family: Arial;font-size: 12px;line-height: 1;outline: none;position: relative;}
на:
body {
background-color: #ffffff;
color: #666666;
font-family: Arial;
font-size: 12px;
line-height: 1;
outline: none;
position: relative;
overflow: hidden;
}


#16 kdi45

kdi45

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений

Отправлено 12 Февраль 2016 - 18:10

пропал вертикальный скролинг )

подозреваю, что нужно применить где то в коде слайдера. ...наверно

#17 RedHead

RedHead

    Активный участник

  • Модераторы
  • 1 052 сообщений

Отправлено 12 Февраль 2016 - 18:22

Просмотр сообщенияkdi45 (12 Февраль 2016 - 18:10) писал:

пропал вертикальный скролинг )

подозреваю, что нужно применить где то в коде слайдера. ...наверно

Да, вы правы. Отмените предыдущие изменения из поста #15, и добавьте в конец шаблона main.css строку

.flexslider { overflow: hidden;   }


#18 kdi45

kdi45

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений

Отправлено 12 Февраль 2016 - 18:32

да, спасибо




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных