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


Изменение Просмотра Изображений

Автор xoldn, 18 дек. 2013 15:05

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

#1 xoldn

xoldn

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

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

Отправлено 18 Декабрь 2013 - 15:05

У меня к товару много фотографий которые добавляются увеличивая пустое пространство под "условиями доставки". Подскажите как сделать чтобы в карточке товара дополнительные изображения можно было прокручивать как ленту.
Я так понимаю за это отвечает строка <div class="allphoto clear"> в шаблоне "товар".

#2 Сake

Сake

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

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

Отправлено 19 Декабрь 2013 - 02:39

Пожалуйста, опишите ваш вопрос подробнее, а так же сообщите о какой теме оформления идет речь. В дополнении укажите номер вашего аккаунта. Указанный вами номер в профиле на форуме - ссылается на заблокированный интернет магазин.

#3 xoldn

xoldn

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

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

Отправлено 19 Декабрь 2013 - 08:32

Прикрепил скрин, на нем красным выделено пустое место которое появляется при добавлении новых фотографий. Как сделать так, чтобы все фото были в синем квадрате и перематывались стрелочками в одну и другую сторону.
Или если это сложно выполнить тогда можно сделать чтобы показывалось два дополнительных изображения, а остальные открывались по нажатию кнопки "посмотреть ещё изображения".
Номер аккаунта изменил в профиле.

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

  • Безымянный.jpg

#4 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 19 Декабрь 2013 - 13:05

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

Панель администратора, "Сайт"->"Редактор Шаблонов".
В конец файла "main.css".
Добавить код:
span.spoiler-title {
	display: inline-block;
	width: 100%;
	cursor: pointer;
	margin: 0 0 10px 0 !important;
}
.spoiler-title span {
	border-bottom: 1px dotted;
}


Панель администратора, "Сайт"->"Редактор шаблонов".
В файле "Товар".
Найти код:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		{% IFNOT goods_images_empty %}
		  {% FOR goods_images %}
			<!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
			{% IF goods_images.first %}
			  <div class="allphoto clear">
				<div  class="title fnt11i" {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>Другие фото {GOODS_NAME}</div>
			{% ENDIF %}

			<!-- Уменьшенное изображение товара -->
			<ul class="txtalgncnt zoomicon">
			  <li>
				  <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}">
					<img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" />
				  </a>
			  </li>
			  <!-- Идентификатор изображения товара, используется для галереи изображений -->
			  <input type="hidden" rel="{goods_images.ID}" />
			</ul>
			<!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
			{% IF goods_images.last %}
				<div class="clear"></div>
			  </div>
			{% ENDIF %}
		  {% ENDFOR %}
		{% ENDIF %}
		<!-- Кнопки социальных сетей от yandex-share -->
Заменить:
		<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		{% IFNOT goods_images_empty %}
		  {% FOR goods_images %}
			<!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
			{% IF goods_images.first %}
			  <div class="allphoto clear">
				<div  class="title fnt11i" {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>Другие фото {GOODS_NAME}</div>
			{% ENDIF %}

			{% IF goods_images.index = 5%}
			  <span class="spoiler-title title"><span>Полный список</span></span>
			  <div class="spoiler-body">
			{% ENDIF %}
			<!-- Уменьшенное изображение товара -->
			<ul class="txtalgncnt zoomicon">
			  <li>
				  <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}">
					<img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" />
				  </a>
			  </li>
			  <!-- Идентификатор изображения товара, используется для галереи изображений -->
			  <input type="hidden" rel="{goods_images.ID}" />
			</ul>


			<!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
			{% IF goods_images.last %}
				</div>
				<script>
				  $('.spoiler-body').hide();
				  $('.spoiler-title').click(function(){
					$(this).next().slideToggle();
				  });
				</script>
				<div class="clear"></div>
			  </div>
			{% ENDIF %}
		  {% ENDFOR %}
		{% ENDIF %}
		<!-- Кнопки социальных сетей от yandex-share -->

#5 xoldn

xoldn

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

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

Отправлено 19 Декабрь 2013 - 15:49

Спасибо, то что нужно.

#6 xoldn

xoldn

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

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

Отправлено 13 Январь 2014 - 10:05

Только сейчас увидел, что в товаре в котором мало фотографий страница отображается как на скриншоте. Левое меню уехало вниз, в т.ч не на том месте кнопки купить, не там расположенны модификация и условия доставки.

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

  • Screenshot_1.png

#7 Сake

Сake

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

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

Отправлено 14 Январь 2014 - 00:47

Данная проблема может происходить при не верно закрытом теге <div>. Если проблема наблюдается только на странице товара, то вероятно ошибка находиться именно в шаблоне "Товар". Попробуйте восстановить шаблон из резервной копии или заменить код шаблона "Товар" на код для данного шаблона "По умолчанию". Код шаблона "Товар" для темы "Радость", по умолчанию выглядит так:

Скрытый текст

#8 xoldn

xoldn

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

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

Отправлено 14 Январь 2014 - 09:58

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

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
			 {% IFNOT goods_images_empty %}
				 {% FOR goods_images %}
					 <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
					 {% IF goods_images.first %}
						 <div class="allphoto clear">
							 <div class="title fnt11i" {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>Другие фото {GOODS_NAME}</div>
					 {% ENDIF %}
					 {% IF goods_images.index = 5%}
						 <span class="spoiler-title title"><span>Полный список</span></span>
						 <div class="spoiler-body">
					 {% ENDIF %}
					 <!-- Уменьшенное изображение товара -->
					 <ul class="txtalgncnt zoomicon">
						 <li>
								 <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}">
									 <img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" />
								 </a>
						 </li>
						 <!-- Идентификатор изображения товара, используется для галереи изображений -->
						 <input type="hidden" rel="{goods_images.ID}" />
					 </ul>

					 <!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
					 {% IF goods_images.last %}
							 </div>
							 <script>
								 $('.spoiler-body').hide();
								 $('.spoiler-title').click(function(){
									 $(this).next().slideToggle();
								 });
							 </script>
							 <div class="clear"></div>
						 </div>
					 {% ENDIF %}
				 {% ENDFOR %}
			 {% ENDIF %}
			 <!-- Кнопки социальных сетей от yandex-share -->

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

#9 Сake

Сake

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

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

Отправлено 14 Январь 2014 - 23:57

Предложенный для замены код - генерируется синтаксически верно. Возможно проблема связана с очисткой потока (float) или же вы немного не правильно произвели замену - удалив или оставив лишний тег. Первое что можно попробовать, так это перенести блок очистки потока - найдите в коде замены следующий фрагмент

<!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
										 {% IF goods_images.last %}
														 </div>
														 <script>
																 $('.spoiler-body').hide();
																 $('.spoiler-title').click(function(){
																		 $(this).next().slideToggle();
																 });
														 </script>
														 <div class="clear"></div>
												 </div>
										 {% ENDIF %}
								 {% ENDFOR %}
						 {% ENDIF %}
						 <!-- Кнопки социальных сетей от yandex-share -->

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

<!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
										 {% IF goods_images.last %}
														 </div>
														 <script>
																 $('.spoiler-body').hide();
																 $('.spoiler-title').click(function(){
																		 $(this).next().slideToggle();
																 });
														 </script>
												 </div>
										 {% ENDIF %}
								 {% ENDFOR %}
						 <div class="clear"></div>
						 {% ENDIF %}
						 <!-- Кнопки социальных сетей от yandex-share -->

Если это не поможет, то попробуйте восстановить исходный код шаблона выполнив восстановление шаблона из резервной копии, а после повторите изменение.

#10 xoldn

xoldn

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

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

Отправлено 15 Январь 2014 - 11:15

Сделал всё как сказали, по разному попробовал, восстанавливал и снова изменял не помогает.
Сейчас у меня вот так.
{% IFNOT goods_images_empty %}
				  {% FOR goods_images %}
						<!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
						{% IF goods_images.first %}
						  <div class="allphoto clear">
								<div  class="title fnt11i" {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>Другие фото {GOODS_NAME}</div>
						{% ENDIF %}
						{% IF goods_images.index = 5 %}
						</div>
						  <span class="spoiler-title title"><span>Ещё изображения</span></span>
						  <div class="spoiler-body">
						{% ENDIF %}
						<!-- Уменьшенное изображение товара -->
						<ul class="txtalgncnt zoomicon">
						  <li>
								  <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}">
										<img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" />
								  </a>
						  </li>
						  <!-- Идентификатор изображения товара, используется для галереи изображений -->
						  <input type="hidden" rel="{goods_images.ID}" />
						</ul>

						<!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
						{% IF goods_images.last %}
								</div>
								<script>
								  $('.spoiler-body').hide();
								  $('.spoiler-title').click(function(){
										$(this).next().slideToggle();
								  });
								</script>
								<div class="clear"></div>						 
						{% ENDIF %}
				  {% ENDFOR %}
				{% ENDIF %}

Перенес закрывающий тег </div> немного выше, но при этом раскрывающие изображения Без форматирования (на скриншоте).

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

  • Screenshot_3.png

#11 Vaccina

Vaccina

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

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

Отправлено 16 Январь 2014 - 04:26 

<div class="spoiler-body">
												{% ENDIF %}
замените на:

<div class="spoiler-body allphoto">
												{% ENDIF %}

Обратно в Общие вопросы


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

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

  1. Форум владельцев интернет-магазинов
  2. → Повышение продаж, продвижение
  3. → Общие вопросы
  4. Privacy Policy