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


Мелкие Фото Под Главной

Автор kostiano12, 22 мая 2013 15:47

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

#1 kostiano12

kostiano12

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

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

Отправлено 22 Май 2013 - 15:47

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

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

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

#2 Stasya

Stasya

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

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

Отправлено 22 Май 2013 - 18:24

В шаблоне Товар найдите блок 
	  <figure class="main-image" style="width:100%;float:none;margin-bottom: 20px;z-index:50">
	   <div>
	  {% IF GOODS_IMAGE_EMPTY %}
			<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" />
		  {% ELSE %}		   
			<a  itemprop="image" rel="group" href="{GOODS_IMAGE_LARGE}"  class="main"><img src="{GOODS_IMAGE_LARGE}" alt="{GOODS_NAME}"  class="main"/></a>
		  {% ENDIF %}
	 </div>
		{% IFNOT goods_images_empty %}
		  {% FOR goods_images %}
			{% IF goods_images.first %}
			  <ul class="preview_images {% IF goods_images.length=1 %}hide{% ENDIF %}" data-role="preview-images">
			{% ENDIF %}  
				<li>
				  <a  rel="group" href="{goods_images.LARGE}" class="mini"><img src="{goods_images.LARGE}" alt="{goods_images.NAME}" class="mini"/></a>
				</li>
				{goods_images.index | is_divided("4"," ","")}
			{% IF goods_images.last %}
			  </ul>
			{% ENDIF %}		   
		  {% ENDFOR %}
		{% ENDIF %}
	</figure>
и замените его на 
<figure class="main-image" style="width:100%;float:none;margin-bottom: 20px;z-index:50">
	   <div>
		<table><tr>
		<td>
		 {% IFNOT goods_images_empty %}
		  {% FOR goods_images %}
			{% IF goods_images.first %}
			  <ul class="preview_images {% IF goods_images.length=5 %}hide{% ENDIF %}" data-role="preview-images">
			{% ENDIF %}  
				<li>
				  <a  rel="group" href="{goods_images.LARGE}" class="mini"><img src="{goods_images.LARGE}" alt="{goods_images.NAME}" class="mini"/></a>
				</li>
			  
			{% IF goods_images.last %}
			  </ul>
			{% ENDIF %}		   
		  {% ENDFOR %}
		{% ENDIF %}
	 </td>
	  <td cosplan="2">
	  {% IF GOODS_IMAGE_EMPTY %}
			<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" />
		  {% ELSE %}		   
			<a  itemprop="image" rel="group" href="{GOODS_IMAGE_LARGE}"  class="main"><img src="{GOODS_IMAGE_LARGE}" alt="{GOODS_NAME}"  class="main"/></a>
		  {% ENDIF %}
	</td><td></td>
	   </tr></table>
		  </div></figure>
Затем в файле style.css найдите блок 
figure ul {
background: #fff;
overflow: hidden;
padding: 1em;
margin: 1em 0 2em 0;
}
и замените его на 
figure ul {
background: #fff;
overflow: hidden;
padding: 1em;
margin: 0px 0 2px 17px;
width: 110px;
}
теперь найдите блок 
figure ul li {
width: 9.7087379%;
float: left;
margin: 0 1%;
}
и замените его на 
figure ul li {
width: 93%;
float: left;
margin: 0 1%;
padding-top: 13px;
}

#3 kostiano12

kostiano12

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

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

Отправлено 23 Май 2013 - 06:43

Просмотр сообщенияStasya (22 Май 2013 - 18:24) писал:

В шаблоне Товар найдите блок 
	 <figure class="main-image" style="width:100%;float:none;margin-bottom: 20px;z-index:50">
	 <div>
	 {% IF GOODS_IMAGE_EMPTY %}
		 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" />
		 {% ELSE %}		
		 <a itemprop="image" rel="group" href="{GOODS_IMAGE_LARGE}" class="main"><img src="{GOODS_IMAGE_LARGE}" alt="{GOODS_NAME}" class="main"/></a>
		 {% ENDIF %}
	 </div>
	 {% IFNOT goods_images_empty %}
		 {% FOR goods_images %}
		 {% IF goods_images.first %}
			 <ul class="preview_images {% IF goods_images.length=1 %}hide{% ENDIF %}" data-role="preview-images">
		 {% ENDIF %}
			 <li>
				 <a rel="group" href="{goods_images.LARGE}" class="mini"><img src="{goods_images.LARGE}" alt="{goods_images.NAME}" class="mini"/></a>
			 </li>
			 {goods_images.index | is_divided("4"," ","")}
		 {% IF goods_images.last %}
			 </ul>
		 {% ENDIF %}		
		 {% ENDFOR %}
	 {% ENDIF %}
</figure>
и замените его на 
<figure class="main-image" style="width:100%;float:none;margin-bottom: 20px;z-index:50">
	 <div>
	 <table><tr>
	 <td>
		 {% IFNOT goods_images_empty %}
		 {% FOR goods_images %}
		 {% IF goods_images.first %}
			 <ul class="preview_images {% IF goods_images.length=5 %}hide{% ENDIF %}" data-role="preview-images">
		 {% ENDIF %}
			 <li>
				 <a rel="group" href="{goods_images.LARGE}" class="mini"><img src="{goods_images.LARGE}" alt="{goods_images.NAME}" class="mini"/></a>
			 </li>
			
		 {% IF goods_images.last %}
			 </ul>
		 {% ENDIF %}		
		 {% ENDFOR %}
	 {% ENDIF %}
	 </td>
	 <td cosplan="2">
	 {% IF GOODS_IMAGE_EMPTY %}
		 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" />
		 {% ELSE %}		
		 <a itemprop="image" rel="group" href="{GOODS_IMAGE_LARGE}" class="main"><img src="{GOODS_IMAGE_LARGE}" alt="{GOODS_NAME}" class="main"/></a>
		 {% ENDIF %}
</td><td></td>
	 </tr></table>
		 </div></figure>
Затем в файле style.css найдите блок 
figure ul {
background: #fff;
overflow: hidden;
padding: 1em;
margin: 1em 0 2em 0;
}
и замените его на 
figure ul {
background: #fff;
overflow: hidden;
padding: 1em;
margin: 0px 0 2px 17px;
width: 110px;
}
теперь найдите блок 
figure ul li {
width: 9.7087379%;
float: left;
margin: 0 1%;
}
и замените его на 
figure ul li {
width: 93%;
float: left;
margin: 0 1%;
padding-top: 13px;
}
Спасибо!

#4 yvn

yvn

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

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

Отправлено 04 Март 2014 - 23:07

Скажите  как увеличить эти мелкие фото?

#5 Vaccina

Vaccina

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

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

Отправлено 05 Март 2014 - 01:55

на данный момент у вас фото увеличены, ваш вопрос еще актуален?

#6 yvn

yvn

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

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

Отправлено 05 Март 2014 - 11:30

Просмотр сообщенияVaccina (05 Март 2014 - 01:55) писал:

на данный момент у вас фото увеличены, ваш вопрос еще актуален?

Вопрос решен. Спасибо.

#7 ilnarius

ilnarius

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

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

Отправлено 22 Сентябрь 2014 - 14:49

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

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

  • 2tlaXcT-9Fk.jpg

#8 Ирина345

Ирина345

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

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

Отправлено 22 Сентябрь 2014 - 20:30

Просмотр сообщенияilnarius (22 Сентябрь 2014 - 14:49) писал:

Как сделать так, чтобы ползунок и изображения располагались вертикально, по всей высоте главного изображения товара? Скрин прикрепил
Здравствуйте, найдите в style.css
.preview_images {
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
}
замените на

.preview_images {

max-width: 100%;
overflow-y: auto;
white-space: nowrap;
height: 76px;
}

далее найдите
.preview_images > li {
display: inline-block; 
float: none !important;
}
замените на


.preview_images > li {
display:block; 
float: none !important;
}

#9 ilnarius

ilnarius

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

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

Отправлено 22 Сентябрь 2014 - 21:43

Просмотр сообщенияИрина345 (22 Сентябрь 2014 - 20:30) писал:

Здравствуйте, найдите в style.css
.preview_images {
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
}
замените на

.preview_images {

max-width: 100%;
overflow-y: auto;
white-space: nowrap;
height: 76px;
}

далее найдите
.preview_images > li {
display: inline-block;
float: none !important;
}
замените на


.preview_images > li {
display:block;
float: none !important;
}
Спасибо, нужно растянуть ползунок и маленькие изобр. товара по всей высоте большого изображения

#10 Vaccina

Vaccina

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

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

Отправлено 23 Сентябрь 2014 - 01:05

В style.css найдите:
.preview_images {
	height: 76px;
	max-width: 100%;
	overflow-y: auto;
	white-space: nowrap;
}
замените на:
.preview_images {
	height: 430px;
	max-width: 100%;
	overflow-y: auto;
	white-space: nowrap;
}

#11 ilnarius

ilnarius

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

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

Отправлено 23 Сентябрь 2014 - 06:42

Просмотр сообщенияVaccina (23 Сентябрь 2014 - 01:05) писал:

В style.css найдите:
.preview_images {
height: 76px;
max-width: 100%;
overflow-y: auto;
white-space: nowrap;
}
замените на:
.preview_images {
height: 430px;
max-width: 100%;
overflow-y: auto;
white-space: nowrap;
}
спасибо,
1) На некоторых товарах почему то не отображаются маленькие картинки
2) Как сделать маленькие картинки квадратными, а не прямоугольными(просто они растягиваются и меняется качество изображения)

#12 Ирина345

Ирина345

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

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

Отправлено 23 Сентябрь 2014 - 11:49

Просмотр сообщенияilnarius (23 Сентябрь 2014 - 06:42) писал:

спасибо,
1) На некоторых товарах почему то не отображаются маленькие картинки
2) Как сделать маленькие картинки квадратными, а не прямоугольными(просто они растягиваются и меняется качество изображения)
Здравствуйте, уточните у какого товара не отображаются картинки
2. Что бы поменять размер изображения маленьких иконок, Вам нужно изменить размер картинок в Настройки-Основное
Максимальный размер по высоте/ширине в пикселях для маленьких изображений

#13 ilnarius

ilnarius

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

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

Отправлено 23 Сентябрь 2014 - 14:38

Просмотр сообщенияИрина345 (23 Сентябрь 2014 - 11:49) писал:

Здравствуйте, уточните у какого товара не отображаются картинки
2. Что бы поменять размер изображения маленьких иконок, Вам нужно изменить размер картинок в Настройки-Основное
Максимальный размер по высоте/ширине в пикселях для маленьких изображений
Вот у этого товара не отображаются картинки
В настройках размер иконок 56пкс, но на странице товара иконки стали прямоугольными например вот, что делает изображение товара на иконке искаженным.

#14 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 23 Сентябрь 2014 - 15:35

Просмотр сообщенияilnarius (23 Сентябрь 2014 - 14:38) писал:

Вот у этого товара не отображаются картинки
В настройках размер иконок 56пкс, но на странице товара иконки стали прямоугольными например вот, что делает изображение товара на иконке искаженным.
Здравствуйте. В style.css замените на
.preview_images img {
max-height: 56px;
}
на
.preview_images img {
max-height: 56px;
max-width: 56px;
}

#15 ilnarius

ilnarius

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

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

Отправлено 23 Сентябрь 2014 - 17:22

Просмотр сообщенияAlekseys (23 Сентябрь 2014 - 15:35) писал:

Здравствуйте. В style.css замените на
.preview_images img {
max-height: 56px;
}
на
.preview_images img {
max-height: 56px;
max-width: 56px;
}
Вместо кода [size=4]
[/size]
.preview_images img {
max-height: 56px;
}
У меня [size=4]
[/size]
.preview_images img { max-height: {SETTINGS_GOODS_IMAGES_SIZE_ICON}px; }
При замене все иконки удлиняются по высоте, оставаясь постоянным по ширине

#16 Ирина345

Ирина345

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

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

Отправлено 23 Сентябрь 2014 - 19:14

Просмотр сообщенияilnarius (23 Сентябрь 2014 - 17:22) писал:

Вместо кода [size=4]
[/size]
.preview_images img {
max-height: 56px;
}
У меня [size=4]
[/size]
.preview_images img { max-height: {SETTINGS_GOODS_IMAGES_SIZE_ICON}px; }
При замене все иконки удлиняются по высоте, оставаясь постоянным по ширине
Найдите в style.css
.preview_images img { max-height: {SETTINGS_GOODS_IMAGES_SIZE_ICON}px;}
замените на
.preview_images img { max-height: {SETTINGS_GOODS_IMAGES_SIZE_ICON}px;max-width: {SETTINGS_GOODS_IMAGES_SIZE_ICON}px;}

#17 ilnarius

ilnarius

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

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

Отправлено 23 Сентябрь 2014 - 19:41

Просмотр сообщенияИрина345 (23 Сентябрь 2014 - 19:14) писал:

Найдите в style.css
.preview_images img { max-height: {SETTINGS_GOODS_IMAGES_SIZE_ICON}px;}
замените на
.preview_images img { max-height: {SETTINGS_GOODS_IMAGES_SIZE_ICON}px;max-width: {SETTINGS_GOODS_IMAGES_SIZE_ICON}px;}
Спасибо, на некоторых товарах пропал ползунок с иконками изображений например на этом и на этом там еще видно, что большое изображение смещено влево. Как это исправить?

#18 Vaccina

Vaccina

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

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

Отправлено 24 Сентябрь 2014 - 00:04

В шаблоне Товар найдите:
{% IF goods_images.first %}
						 <ul class="preview_images {% IF goods_images.length=5 %}hide{% ENDIF %}" data-role="preview-images">
				 {% ENDIF %}
замените на:
{% IF goods_images.first %}
						 <ul class="preview_images" data-role="preview-images">
				 {% ENDIF %}

#19 ilnarius

ilnarius

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

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

Отправлено 24 Сентябрь 2014 - 09:54

Просмотр сообщенияVaccina (24 Сентябрь 2014 - 00:04) писал:

В шаблоне Товар найдите:
{% IF goods_images.first %}
						 <ul class="preview_images {% IF goods_images.length=5 %}hide{% ENDIF %}" data-role="preview-images">
				 {% ENDIF %}
замените на:
{% IF goods_images.first %}
						 <ul class="preview_images" data-role="preview-images">
				 {% ENDIF %}
Спасибо все исправилось

#20 yvn

yvn

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

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

Отправлено 26 Сентябрь 2014 - 19:34

Здравствуйте, помогите решить такой вопрос:
В карточку товара добавляю четыре фото (рис 1) на странице товара отображается все как надо (рис 2)
Если же добавляю пятую фотографию, то на странице все маленькие фото рядом с большой исчезают (рис 4)

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

  • 1.jpg
  • 2.jpg
  • 3.jpg
  • 4.jpg

Обратно в Страница товара


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

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

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