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


Создать Карусель Прокрутку Для Доп Фото.

Автор evros, 22 марта 2015 22:24

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

#1 evros

evros

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

  • Пользователи
  • PipPipPipPip
  • 284 сообщений
  • ГородМосква

Отправлено 22 Март 2015 - 22:25

Добрый вечер. Нужна помощь в настройке и внедрения карусели прокрутки в карточку товар под основным фото. Помогите плиииззз!

и как сместить доп фото вправо под кнопки сравнения и избранное?

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

  • Рисунок1.png

#2 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 23 Март 2015 - 11:36

Просмотр сообщенияevros (22 Март 2015 - 22:25) писал:

Добрый вечер. Нужна помощь в настройке и внедрения карусели прокрутки в карточку товар под основным фото. Помогите плиииззз!

и как сместить доп фото вправо под кнопки сравнения и избранное?
Здравствуйте.
В шаблоне style.css найдите код:
.photos {
  padding: 110px 0 0 0;
}
И замените его вот этим кодом:
.photos {
  padding: 60px 0px 0 0;
  margin-left: 439px;
  position: absolute;
  width: 440px;
}
После этого найдите вот этот код:
.tabs_block {
  margin-top: 20px;
}
И так же замените его вот этим кодом:
.tabs_block {
  margin-top: 20px;
  padding-top: 20px;
}

#3 evros

evros

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

  • Пользователи
  • PipPipPipPip
  • 284 сообщений
  • ГородМосква

Отправлено 30 Март 2015 - 23:24

установка карусели необходима... помогите сделать! все перебрал уже.

под основным фото, все дополнительные фото в один ряд с возможностью перелистывания

#4 Turanga Leela

Turanga Leela

    Пользователь

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

Отправлено 01 Апрель 2015 - 11:43

присоединяюсь к вопросу! Очень нужна каруселька для фото

#5 Ирина345

Ирина345

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

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

Отправлено 01 Апрель 2015 - 14:51

Просмотр сообщенияTuranga Leela (01 Апрель 2015 - 11:43) писал:

присоединяюсь к вопросу! Очень нужна каруселька для фото

Просмотр сообщенияevros (30 Март 2015 - 23:24) писал:

установка карусели необходима... помогите сделать! все перебрал уже.

под основным фото, все дополнительные фото в один ряд с возможностью перелистывания
Здравствуйте, с сайтавыберите карусель которую вам необходимо установить, среди первызх

#6 evros

evros

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

  • Пользователи
  • PipPipPipPip
  • 284 сообщений
  • ГородМосква

Отправлено 03 Апрель 2015 - 00:01

Просмотр сообщенияИрина345 (01 Апрель 2015 - 14:51) писал:

Здравствуйте, с сайтавыберите карусель которую вам необходимо установить, среди первызх

Добрый вечер. Ссылка на карусель http://www.gmarwaha..../jcarousellite/

#7 Turanga Leela

Turanga Leela

    Пользователь

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

Отправлено 06 Апрель 2015 - 14:41

Подскажите, пожалуйста, как установить вот такой горизонтальный скроллер на 3 фото http://zendold.lojco...el/example3.asp

#8 Vaccina

Vaccina

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

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

Отправлено 07 Апрель 2015 - 02:22

Просмотр сообщенияevros (03 Апрель 2015 - 00:01) писал:

Добрый вечер. Ссылка на карусель http://www.gmarwaha..../jcarousellite/

Загрузите файл в Редактор шаблонов jquery.jcarousellite, далее в шаблоне HTML перед 
	<script type="text/javascript" src="{ASSETS_JS_PATH}main.js?design=movement"></script>

вставьте:
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousellite.js?design=movement"></script>

Далее в шаблоне Товар найдите:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	  {% IFNOT goods_images_empty %}
		{% FOR goods_images %}
		  {% IF goods_images.length>1 %}
			{% IF goods_images.first %}
			  <div class="photos" id="product_images_small_photos">
			{% ENDIF %}
			 <div class="img_middle_small">
				  <div>
				 <a href="{goods_images.MEDIUM}" target="_blank"><img class="game_img_selected" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
				</div>
			   </div>
			  {% IF goods_images.last %} 
			  <div class="clear"></div>
			  </div>
			{% ENDIF %} 
		  {% ENDIF %}
		{% ENDFOR %}
	  {% ENDIF %}

замените на:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	  {% IFNOT goods_images_empty %}
		{% FOR goods_images %}
		  {% IF goods_images.length>1 %}
			{% IF goods_images.first %}
	<button class="prev">&laquo;</button>
   <button class="next">&raquo;</button>
			  <div class="photos any-class" id="product_images_small_photos">
	 <ul>
			{% ENDIF %}
				<li class="img_middle_small"> <a href="{goods_images.MEDIUM}" target="_blank"><img class="game_img_selected" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a></li>
			  {% IF goods_images.last %} 
	 </ul>
			  <div class="clear"></div>
			  </div>
			  <script>
				$(function() {
	$(".any-class").jCarouselLite({
		btnNext: ".next",
		btnPrev: ".prev"
	});
});
			  </script>
			{% ENDIF %} 
		  {% ENDIF %}
		{% ENDFOR %}
	  {% ENDIF %}

далее остается простилизовать под свой вкус

Просмотр сообщенияTuranga Leela (06 Апрель 2015 - 14:41) писал:

Подскажите, пожалуйста, как установить вот такой горизонтальный скроллер на 3 фото http://zendold.lojco...el/example3.asp

Укажите пожалуйста номер аккаунта вашего магазина

#9 Turanga Leela

Turanga Leela

    Пользователь

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

Отправлено 07 Апрель 2015 - 22:35

Просмотр сообщенияVaccina (07 Апрель 2015 - 02:22) писал:

Загрузите файл в Редактор шаблонов jquery.jcarousellite, далее в шаблоне HTML перед 
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js?design=movement"></script>

вставьте:
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousellite.js?design=movement"></script>

Далее в шаблоне Товар найдите:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	 {% IFNOT goods_images_empty %}
	 {% FOR goods_images %}
		 {% IF goods_images.length>1 %}
		 {% IF goods_images.first %}
			 <div class="photos" id="product_images_small_photos">
		 {% ENDIF %}
			 <div class="img_middle_small">
				 <div>
				 <a href="{goods_images.MEDIUM}" target="_blank"><img class="game_img_selected" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
			 </div>
			 </div>
			 {% IF goods_images.last %}
			 <div class="clear"></div>
			 </div>
		 {% ENDIF %}
		 {% ENDIF %}
	 {% ENDFOR %}
	 {% ENDIF %}

замените на:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	 {% IFNOT goods_images_empty %}
	 {% FOR goods_images %}
		 {% IF goods_images.length>1 %}
		 {% IF goods_images.first %}
<button class="prev">&laquo;</button>
<button class="next">&raquo;</button>
			 <div class="photos any-class" id="product_images_small_photos">
	 <ul>
		 {% ENDIF %}
			 <li class="img_middle_small"> <a href="{goods_images.MEDIUM}" target="_blank"><img class="game_img_selected" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a></li>
			 {% IF goods_images.last %}
	 </ul>
			 <div class="clear"></div>
			 </div>
			 <script>
			 $(function() {
$(".any-class").jCarouselLite({
	 btnNext: ".next",
	 btnPrev: ".prev"
});
});
			 </script>
		 {% ENDIF %}
		 {% ENDIF %}
	 {% ENDFOR %}
	 {% ENDIF %}

далее остается простилизовать под свой вкус



Укажите пожалуйста номер аккаунта вашего магазина

Прошу прощения! Совсем забыла. SL-336818

#10 Vaccina

Vaccina

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

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

Отправлено 08 Апрель 2015 - 01:37

У вас уже установлена карусель по инструкции выше, вы хотели немного другую: http://zendold.lojco...el/example3.asp

Ваш вопрос еще актуален?

#11 Turanga Leela

Turanga Leela

    Пользователь

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

Отправлено 08 Апрель 2015 - 10:19

Просмотр сообщенияVaccina (08 Апрель 2015 - 01:37) писал:

У вас уже установлена карусель по инструкции выше, вы хотели немного другую: http://zendold.lojco...el/example3.asp

Ваш вопрос еще актуален?
Актуален! Карусель по инструкции выше работает несколько.. странно (при нажатии на превью выдает другую картинку в главном окне изображения).

#12 Vaccina

Vaccina

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

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

Отправлено 09 Апрель 2015 - 03:41

Простите, сразу не посмотрела, карусель по вашей ссылке не будет работать на магазинах StoreLand, она разработана для framework Mootools, а у нас используется JQuery

Поэтому лучше или подобрать другую карусель или доработать по инструкции выше

#13 Turanga Leela

Turanga Leela

    Пользователь

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

Отправлено 09 Апрель 2015 - 12:09

А можно установить вот эту карусель http://bxslider.com/ в таком виде как на прикрепленном файле, на 3 или 4 изображения? Если да, то как?
Если нет, то как переделать карусель по инструкции выше под такой вид?

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

  • 10001011.png
  • 1101011.png

#14 Ирина345

Ирина345

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

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

Отправлено 09 Апрель 2015 - 15:21

Просмотр сообщенияTuranga Leela (09 Апрель 2015 - 12:09) писал:

А можно установить вот эту карусель http://bxslider.com/ в таком виде как на прикрепленном файле, на 3 или 4 изображения? Если да, то как?
Если нет, то как переделать карусель по инструкции выше под такой вид?
Здравствуйте, скачайте с сайта архив
Загрузите файл в Редактор шаблонов jquery.bxslider.min.js , jquery.bxslider.css  далее в шаблоне HTML перед
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js?design=movement"></script>
вставьте:
<link rel="stylesheet" href="{FORALL_STYLES_PATH}jquery.bxslider.css" type="text/css" />
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.bxslider.min.js"></script>
далее найдите в шаблоне Товар код
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT goods_images_empty %}
{% FOR goods_images %}
{% IF goods_images.length>1 %}
{% IF goods_images.first %}
<div class="photos" id="product_images_small_photos">
{% ENDIF %}
<div class="img_middle_small">
<div>
<a href="{goods_images.MEDIUM}" target="_blank"><img class="game_img_selected" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
</div>
</div>
{% IF goods_images.last %}
<div class="clear"></div>
</div>
{% ENDIF %}
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}

</div>
замените на




<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT goods_images_empty %}
{% FOR goods_images %}
{% IF goods_images.length>1 %}
<div class="slider">
<div class="bx-wrapper" >
<div class="bx-viewport" >
<ul class="bxslider" ><li class="bx-clone">


<a href="{goods_images.MEDIUM}" target="_blank"><img class="game_img_selected" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
</li>
</ul>
</div> </div> </div>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}

</div>

#15 Turanga Leela

Turanga Leela

    Пользователь

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

Отправлено 09 Апрель 2015 - 21:37

Ирина, спасибо большое за ответ!
Сделала все, как вы сказали, но почему-то теперь все другие изображения товара идут в одинарный столбик и при нажатии открываются в новом окне :(

#16 Vaccina

Vaccina

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

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

Отправлено 10 Апрель 2015 - 00:51 

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
				  {% IFNOT goods_images_empty %}
								{% FOR goods_images %}
								  {% IF goods_images.length>1 %}
										   <div class="slider">
<div class="bx-wrapper" >
<div class="bx-viewport" >
<ul class="bxslider" ><li class="bx-clone">
				  
		
						   <a href="{goods_images.MEDIUM}" target="_blank"><img class="game_img_selected" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
								</li>
</ul>				  
						 </div>  </div>  </div>
								  {% ENDIF %}
								{% ENDFOR %}
				  {% ENDIF %}

замените на:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
				  {% IFNOT goods_images_empty %}
								{% FOR goods_images %}
								  {% IF goods_images.length>1 %}
												{% IF goods_images.first %}
			   <ul class="bxslider photos" id="product_images_small_photos">
												{% ENDIF %}
												 <li class="img_middle_small">
																  <div>
																 <a href="{goods_images.MEDIUM}" target="_blank"><img class="game_img_selected" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
																</div>
												   </li>
												  {% IF goods_images.last %}
												  </ul>
												{% ENDIF %}
								  {% ENDIF %}
								{% ENDFOR %}
				  {% ENDIF %}
		 
		</div>
	   
		<script>
		  $('.bxslider').bxSlider({
  minSlides: 3,
  maxSlides: 4,
  slideWidth: 170,
  slideMargin: 10
});

#17 Turanga Leela

Turanga Leela

    Пользователь

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

Отправлено 10 Апрель 2015 - 12:28

изображения встали, как в дефолтном варианте, а все, что ниже изображений, развалилось

#18 Ирина345

Ирина345

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

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

Отправлено 10 Апрель 2015 - 14:46

Просмотр сообщенияTuranga Leela (10 Апрель 2015 - 12:28) писал:

изображения встали, как в дефолтном варианте, а все, что ниже изображений, развалилось
Здравствуйте, выполните пожалуйста инструкцию из сообщения #14 и #16

#19 Turanga Leela

Turanga Leela

    Пользователь

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

Отправлено 10 Апрель 2015 - 23:17

Выполнила. Не могу понять, что сделала не так(

#20 Vaccina

Vaccina

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

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

Отправлено 11 Апрель 2015 - 00:38

Простите, забыла закрывающий тег указать, в шаблоне Товар найдите:
<script>
				 $('.bxslider').bxSlider({
minSlides: 3,
maxSlides: 4,
slideWidth: 170,
slideMargin: 10
});

после него вставьте:
</script>

После данного изменения карусель должна заработать, остается только простилизовать кнопки, так как они будут выводится текстом
Обратно в Страница товара


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Движение
  5. → Страница товара
  6. Privacy Policy