Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

Фильтр

Автор leonamx, 14 мая 2016 14:59

фильтр главная карточка товар

Авторизуйтесь для ответа в теме

Сообщений в теме: 38

#21 MikDark

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

Модераторы
6 468 сообщений

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

leonamx (09 Июнь 2016 - 12:14) писал:

Не получилось(

Сделайте, пожалуйста, изменения, чтобы мы могли посмотреть. Можете сохранить их в отельном бэкапе и далее вернуть обычный вид сайта.

Наверх

#22 leonamx

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

Пользователи
67 сообщений

Отправлено 11 Июнь 2016 - 10:40

Сделал изменения согласно Вашей инструкции - посмотрите пожалуйста.

Наверх

#24 leonamx

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

Пользователи
67 сообщений

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

Не работает(

Наверх

#25 leonamx

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

Пользователи
67 сообщений

Отправлено 22 Июнь 2016 - 00:46

Ребята! дайте код пожалуйста!

Наверх

#26 Vaccina

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

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

Отправлено 23 Июнь 2016 - 05:33

Попробуйте следующее.

В шаблоне HTML найдите:

<div id="slider">
	 <!-- Slides Container -->
<div u="slides" class="slides_container">
<div>
								 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" oncontextmenu="return false"/>
		 <img u="thumb" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" />
		 </a>
								 </div>
								 <div>
								 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" oncontextmenu="return false"/>
		 <img u="thumb" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" />
		 </a>
								 </div>
			 <!-- Arrow Left -->
			 <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span>
			 <!-- Arrow Right -->
			 <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span>
<!-- thumbnail navigator container -->
<div u="thumbnavigator" class="jssort16 " style="width: 800px; height: 100px; left:0px; bottom: 0px;">
<!-- Thumbnail Item Skin Begin -->
<div u="slides" style="cursor: move;">
	 <div u="prototype" class="p">
		 <div class=w><div u="thumbnailtemplate" class="t"></div></div>
		 <div class=c></div>
	 </div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Thumbnail Navigator Skin End -->
		 </div>

замените на:

<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 600px; height: 400px; overflow: hidden; visibility: hidden;">
	 <!-- Loading Screen -->
	 <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
		 <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
		 <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
	 </div>
	 <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;">
		 <div data-p="112.50" style="display: none;">
			 <img data-u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg" />
			 <div data-u="thumb">
				 <img src="{ASSETS_IMAGES_PATH}slide1.jpg" />
			 </div>
		 </div>
		 <div data-p="112.50" style="display: none;">
			 <img data-u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg" />
			 <div data-u="thumb">
				 <img src="{ASSETS_IMAGES_PATH}slide2.jpg" />
			 </div>
		 </div>
	
	 </div>
	 <!-- Thumbnail Navigator -->
	 <div data-u="thumbnavigator" class="jssort16" style="position:absolute;left:0px;bottom:0px;width:600px;height:100px;" data-autocenter="1">
		 <!-- Thumbnail Item Skin Begin -->
		 <div data-u="slides" style="cursor: default;">
			 <div data-u="prototype" class="p">
				 <div data-u="thumbnailtemplate" class="t"></div>
			 </div>
		 </div>
		 <!-- Thumbnail Item Skin End -->
	 </div>
	 <!-- Arrow Left -->
			 <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span>
			 <!-- Arrow Right -->
			 <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span>
</div>

В файле jssor_slider.js найдите:

var jssor_slider1 = new $JssorSlider$("slider", options);

замените на:

var jssor_slider1 = new $JssorSlider$("jssor_1", options);

В шаблоне HTML найдите:

<script type="text/javascript" src="{ASSETS_JS_PATH}jssor_slider.js?design=summer"></script>

после него пропишите:

<script type="text/javascript" src="{ASSETS_JS_PATH}jssor.slider.min.js"></script>

и загрузите себе в раздел Редактор шаблонов файл из архива:

jssor.slider.min.zip 20,7К 59 Количество загрузок:

Наверх

#27 leonamx

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

Пользователи
67 сообщений

Отправлено 23 Июнь 2016 - 10:50

Спасибо! Заработало!))) Только переключение сладейров очень быстрое и картинки немного растянутые

Наверх

#29 leonamx

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

Пользователи
67 сообщений

Отправлено 27 Июнь 2016 - 21:16

По слайдеру не получается( Он не похож на тот вариант который Вы мне предложили. Переключение на примере нет, и не понять как поставить остальные картинки.

Наверх

#31 leonamx

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

Пользователи
67 сообщений

Отправлено 07 Июль 2016 - 20:15

Давайте доработаем пожалуйста эти слайдеры. На примере слайдера thumbnail 16 автоматических переключений между картинками нет.
На моём сайте всего 2 картинки в слайдере, хотелось бы добавить 3-ью. И сопоставить по размерам, что бы они были не растянуты как сейчас.
Помогите пожалуйста. Хочется уже видеть красивый функционирующий сайт

Наверх

#32 Stasya

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

Модератоpы
4 007 сообщений

Отправлено 12 Июль 2016 - 11:07

leonamx (07 Июль 2016 - 20:15) писал:

Чтобы картинки не тянулись по высоте Вам необходимо в шаблоне HTML найти блок

<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 600px; height: 400px; overflow: hidden; visibility: hidden;">
		 <!-- Loading Screen -->
		 <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
				 <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
				 <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
		 </div>
		 <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;">
				 <div data-p="112.50" style="display: none;">
						 <img data-u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg" />
						 <div data-u="thumb">
								 <img src="{ASSETS_IMAGES_PATH}slide1.jpg" />
						 </div>
				 </div>
				 <div data-p="112.50" style="display: none;">
						 <img data-u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg" />
						 <div data-u="thumb">
								 <img src="{ASSETS_IMAGES_PATH}slide2.jpg" />
						 </div>
				 </div>
	
		 </div>
		 <!-- Thumbnail Navigator -->
		 <div data-u="thumbnavigator" class="jssort16" style="position:absolute;left:0px;bottom:0px;width:600px;height:100px;" data-autocenter="1">
				 <!-- Thumbnail Item Skin Begin -->
<div id="thumb" data-u="slides" style="cursor: default;">
												 <div data-u="prototype" class="p">
																 <div data-u="thumbnailtemplate" class="t"></div>
												 </div>
								 </div>
				 <!-- Thumbnail Item Skin End -->
		 </div>
		 <!-- Arrow Left -->
						 <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span>
						 <!-- Arrow Right -->
						 <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span>
</div>

и заменить его на

<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 525px; height: 310px; overflow: hidden; visibility: hidden;">
		 <!-- Loading Screen -->
		 <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
				 <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
				 <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
		 </div>
		 <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 525px; height: 210px; overflow: hidden;">
				 <div data-p="112.50" style="display: none;">
						 <img data-u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg" />
						 <div data-u="thumb">
								 <img src="{ASSETS_IMAGES_PATH}slide1.jpg" />
						 </div>
				 </div>
				 <div data-p="112.50" style="display: none;">
						 <img data-u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg" />
						 <div data-u="thumb">
								 <img src="{ASSETS_IMAGES_PATH}slide2.jpg" />
						 </div>
				 </div>
	
		 </div>
		 <!-- Thumbnail Navigator -->
		 <div data-u="thumbnavigator" class="jssort16" style="position:absolute;left:0px;bottom:0px;width:600px;height:100px;" data-autocenter="1">
				 <!-- Thumbnail Item Skin Begin -->
<div id="thumb" data-u="slides" style="cursor: default;">
												 <div data-u="prototype" class="p">
																 <div data-u="thumbnailtemplate" class="t"></div>
												 </div>
								 </div>
				 <!-- Thumbnail Item Skin End -->
		 </div>
		 <!-- Arrow Left -->
						 <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span>
						 <!-- Arrow Right -->
						 <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span>
</div>

Так же в дальнейшем Вам нужно будет грузить картинки пропорциональные размеру 525*210

Чтобы добавить еще одну картинку в слайдер, то Вам необходимо в разделе Сайт-> Редактор шаблонов загурзить ее( в левой колонке кнопка Добавит файл) и затем в блоке, замененном Выше найти блок

<div data-p="112.50" style="display: none;">
						 <img data-u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg" />
						 <div data-u="thumb">
								 <img src="{ASSETS_IMAGES_PATH}slide2.jpg" />
						 </div>
				 </div>

и сразу после него добавить такой же

<div data-p="112.50" style="display: none;">
						 <img data-u="image" src="{ASSETS_IMAGES_PATH}название новой картинки" />
						 <div data-u="thumb">
								 <img src="{ASSETS_IMAGES_PATH}название новой картинки" />
						 </div>
				 </div>

Заместо Название новой картинки укажите реальное имя картинки с расширением (.jpg)

Так же в файл main.css добавьте в самый конец блок

.jssora21l, .jssora21r{top:79.5px !important;}

Наверх

#33 leonamx

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

Пользователи
67 сообщений

Отправлено 13 Июль 2016 - 19:42

ОГРОМНОЕ СПАСИБО!!!!!!

Наверх

#34 leonamx

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

Пользователи
67 сообщений

Отправлено 14 Июль 2016 - 09:40

И ещё маленький вопрос: как увеличить временной интервал переключений слайдов. Спасибо

Наверх

#35 Stasya

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

Модератоpы
4 007 сообщений

Отправлено 14 Июль 2016 - 17:45

leonamx (14 Июль 2016 - 09:40) писал:

И ещё маленький вопрос: как увеличить временной интервал переключений слайдов. Спасибо

В файле jssor_slider.js найдите строку

$SlideDuration: 4000,

и изменяйте значение 4000 на то, которое Вам удобнее.
Это время указывается в милисекундах. Т.е. 4000 - это 4сек.

Наверх

#36 leonamx

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

Пользователи
67 сообщений

Отправлено 16 Июль 2016 - 11:45

Этот код меняет лишь скорость движения самих слайдов. Мне необходимо что бы слайд оставался на некий промежуток времени, а не переключался сразу на следующий. Спасибо!

Наверх

#37 Firefly

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

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

Отправлено 16 Июль 2016 - 11:50

leonamx (16 Июль 2016 - 11:45) писал:

Здравствуйте.
За временной интервал переключения слайдера отвечает код:

	  $AutoPlayInterval: 4000,

Наверх

#38 leonamx

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

Пользователи
67 сообщений

Отправлено 16 Июль 2016 - 11:57

Здравствуйте. Не получается. Заменил значение в коде - изменений не произошло.

http://justwatches.ru/

Наверх

#39 Firefly

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

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

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

leonamx (16 Июль 2016 - 11:57) писал:

Здравствуйте. Не получается. Заменил значение в коде - изменений не произошло.

http://justwatches.ru/

При проверке оказалось, что установленный у Вас слайдер берет стандартные (неизменяемые) параметры из файла скрипта jssor.slider.min.js.
Для того, чтобы можно было настраивать слайдер - Вам необходимо там, где Вы получали файлы слайдера выбрать/сгенерировать полноценный файл jssor_slider.js и загрузить его вместо уже имеющегося одноименного в разделе "Скрипты".
На данный момент стандартный файл от старого слайдера jssor_slider.js новым слайдером не распознается и следовательно не может взять из него настройки.

После загрузки нового jssor_slider.js подключения файла jssor.slider.min.js в шаблоне HTML:

  <script type="text/javascript" src="{ASSETS_JS_PATH}jssor.slider.min.js"></script>

Вам нужно будет удалить, как и сам файл в разделе "Скрипты".

Наверх

Обратно в Изменение общей стилистики

Темы с аналогичным тегами фильтр, главная, карточка, товар

Вопросы работы сервиса StoreLand → Предложения по улучшению сервиса → Перенести Указание Цены Из Модификаций И Сделать Обязательное Поле Пустым Автор Гость_Максим Бакланов_* , 18 февр. 2020 цена, товар, модификации	1 Ответ 2 481 Просмотров	Никита Фёдоров 19 авг. 2020
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Город → Сделать Поле Пустым По Умолчанию Автор Гость_Максим Бакланов_* , 18 февр. 2020 товар, страница товара и 1 еще...	2 Ответов 1 925 Просмотров	Максим Бакланов 09 марта 2020
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Карамель → Каталог товаров → Не Вмещается Полностью Наименование Товара В Мобильной Версии Автор Гость_Alexsandra_* , 28 окт. 2019 наименование, моб, товар и 1 еще...	2 Ответов 1 748 Просмотров	Alexsandra 29 окт. 2019
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Веган → Другое → Главная Страница Для Чайников Автор Гость_Zhanna_* , 02 марта 2019 главная	1 Ответ 1 412 Просмотров	Vaccina 05 марта 2019
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Хамелеон → Отображение Разделов На Главной Странице, Как В Теме "лето" Автор Гость_Роберт_* , 05 нояб. 2018 главная, лето, разделы, хамелеон и 3 еще...	1 Ответ 2 907 Просмотров	Роберт 06 нояб. 2018

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

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

Фильтр

#21 MikDark

#22 leonamx

#23 Vaccina

#24 leonamx

#25 leonamx

#26 Vaccina

#27 leonamx

#28 Vaccina

#29 leonamx

#30 Vaccina

#31 leonamx

#32 Stasya

#33 leonamx

#34 leonamx

#35 Stasya

#36 leonamx

#37 Firefly

#38 leonamx

#39 Firefly

Темы с аналогичным тегами фильтр, главная, карточка, товар

Перенести Указание Цены Из Модификаций И Сделать Обязательное Поле Пустым

Сделать Поле Пустым По Умолчанию

Не Вмещается Полностью Наименование Товара В Мобильной Версии

Главная Страница Для Чайников

Отображение Разделов На Главной Странице, Как В Теме "лето"

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

Google поиск

Фильтр

Темы с аналогичным тегами фильтр, главная, карточка, товар

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

Войти

Google поиск