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


Увеличение Фото Товара, Шаблон Весна

увеличениефото товара весна

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

#21 Ирина345

Ирина345

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

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

Отправлено 15 Июль 2014 - 14:29

Просмотр сообщенияMari-ina (15 Июль 2014 - 14:00) писал:

Может я что-то не так делаю, но теперь у меня по щелчку на фото открывается увеличенное фото в этом же окне, а при щелчке по ссылке "увеличить изображение" открывается во всплывающем окне. Мне надо чтобы открывалось во всплывающем окне при щелчке на фото, ссылку "увеличить изображение" вообще убрать и чтобы на открывшемся фото снизу была нумерация "Изображение 1 из 5" например.
Здравствуйте,найдите в шаблоне Товар код
  <div class="left"> 
	  <!-- Большое изображение -->
				 <div class="image">
						 <div id="wrap">
				  {% IF GOODS_IMAGE_EMPTY %}
						<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}"  class="thumbnail .goods-image-medium "/>
				  {% ELSE %}
						<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
						  <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
						</a>
				  {% ENDIF %}			
				</div>
						 <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}"><a href="#">Увеличить изображение</a></center>
				 </div>
замените на

 <div class="left"> 
	  <!-- Большое изображение -->
				 <div class="image">
						 <div id="wrap">
				  {% IF GOODS_IMAGE_EMPTY %}
						<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}"  class="thumbnail .goods-image-medium "/>
				  {% ELSE %}
					   <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}"><a href="#"> 
						  <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
						</a></center>
				  {% ENDIF %}			
				</div>
					   
				 </div>


#22 Mari-ina

Mari-ina

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

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

Отправлено 15 Июль 2014 - 19:41

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

#23 Сake

Сake

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

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

Отправлено 16 Июль 2014 - 05:44

Найдите в вашем шаблоне "Товар" следующий код

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	  {% IFNOT goods_images_empty %}
		{% FOR goods_images %}
		  {% IF goods_images.first %}
			<div class="image-additional"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
			  <h5>Другие фото {GOODS_NAME}</h5>
		  {% ENDIF %}
		  <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>																		   
		  {% IF goods_images.last %}
			</div>
		  {% ENDIF %}
		{% ENDFOR %}
	  {% ENDIF %}

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

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	  {% IFNOT goods_images_empty %}
		{% FOR goods_images %}
		  {% IF goods_images.first %}
			<div class="image-additional"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
			  <h5>Другие фото {GOODS_NAME}</h5>
		  {% ENDIF %}
		  <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>																		   
		  {% IF goods_images.last %}
			</div>
		  {% ENDIF %}
		{% ENDFOR %}
	  {% ENDIF %}

после этого найдите в main.js код

// Увеличение изображение при клике на него и открытие галереи изображений
$('.goodsImageZoom a, .image-additional a').click(function(){
				 if($(this).closest('.image-additional').length) {
						 $('.goodsImageZoom').attr('data', $(this).attr('data'));
						 return(true);
				 }
				 $('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
				 return(false);
});

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

// Увеличение изображение при клике на него и открытие галереи изображений
$('.goodsImageZoom a, .image-additional a').click(function(){
				 if($(this).closest('.image-additional').length) {
						 $('.goodsImageZoom').attr('data', $(this).attr('data'));
				 }
				 $('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
				 return(false);
});


#24 Jaspers_newb

Jaspers_newb

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

  • Пользователи
  • PipPip
  • 15 сообщений
  • ГородОдесса

Отправлено 19 Август 2014 - 21:54

Как увеличить сами изображения в товаре?  
file:///Users/jaspers/Desktop/Снимок%20экрана%202014-08-19%20в%2021.42.16.png

Аккаунт SL-293836

#25 MikDark

MikDark

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

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

Отправлено 19 Август 2014 - 21:56

Просмотр сообщенияJaspers_newb (19 Август 2014 - 21:54) писал:

Как увеличить сами изображения в товаре?  
file:///Users/jaspers/Desktop/Снимок%20экрана%202014-08-19%20в%2021.42.16.png

Аккаунт SL-293836

В админ-панели в разделе Настройки - Основные найдите пункт:
Максимальный размер по высоте/ширине в пикселях для средних изображений

и увеличьте его значение.

#26 blackdron

blackdron

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

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

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

Уважаемая служба поддержки, сделал все по инструкции
1) Только теперь сместились кое-какие надписи направо от изображения. Можно ли их как нибудь убрать под изображение?
Снимок76.jpg
2) И можно ли убрать надпись "Увеличить изображение"?
3) Также можно сделать так, чтобы при наведение на изображение, оно затемнялось и показалась лупа
Заранее спасибо.

#27 Danil

Danil

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

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

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

Просмотр сообщенияblackdron (05 Сентябрь 2014 - 11:48) писал:

Уважаемая служба поддержки, сделал все по инструкции
1) Только теперь сместились кое-какие надписи направо от изображения. Можно ли их как нибудь убрать под изображение?
Прикрепленный файл Снимок76.jpg
2) И можно ли убрать надпись "Увеличить изображение"?
3) Также можно сделать так, чтобы при наведение на изображение, оно затемнялось и показалась лупа
Заранее спасибо.

Здравствуйте.
1) Зайдите в main.css и найдите код
.goodsDataMainImageZoom {
text-align: center;
padding: 0.5em;
}
Замените на
.goodsDataMainImageZoom {
text-align: center;
padding: 0.5em;
float: left;
}
Далее в main.css добавьте код
.rating {
float: left;
padding: 0.5em;
}
Так же добавьте код
.rating a {
padding: 5px 0px 5px 25px;
}
2) В main.css добавьте код
center.goodsImageZoom {
display: none;
}
3) Попробуйте такой вариант http://forum.storela...ора/#entry32048

#28 blackdron

blackdron

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

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

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

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

Здравствуйте.
Одна надпись теперь не показывается, но осталась еще одна надпись "Увеличить изображение", которое нужно удалить. И сдвинуть ссылку Оставить отзыв первым вниз под картинку
Комментарии на скрине.

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

  • Снимок80.jpg


#29 Danil

Danil

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

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

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

Просмотр сообщенияblackdron (05 Сентябрь 2014 - 13:10) писал:

Одна надпись теперь не показывается, но осталась еще одна надпись "Увеличить изображение", которое нужно удалить. И сдвинуть ссылку Оставить отзыв первым вниз под картинку
Комментарии на скрине.

Извините, я Вас неправильно понял
Удалите код из пункта 2.
И добавьте код из пункта 1.
.rating {
float: left;
padding: 0.5em;
}
Так же добавьте код
.rating a {
padding: 5px 0px 5px 25px;
}
Далее в main.css найдите код
.goodsDataMainImageZoom {
text-align: center;
padding: 0.5em;
float: left;
}
И замените на
.goodsDataMainImageZoom {
text-align: center;
padding: 0.5em;
display: none;
float: left;
}


#30 blackdron

blackdron

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

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

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

Просмотр сообщенияDanil (05 Сентябрь 2014 - 13:20) писал:

Извините, я Вас неправильно понял
Удалите код из пункта 2.
И добавьте код из пункта 1.

Смотрите, удаляю код из main.css?
center.goodsImageZoom {
display: none;
}
И уточните, пожалуйста, куда именно добавить?
.rating {
float: left;
padding: 0.5em;
}
.rating a {
padding: 5px 0px 5px 25px;
}


#31 Danil

Danil

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

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

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

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

Смотрите, удаляю код из main.css?
center.goodsImageZoom {
display: none;
}
И уточните, пожалуйста, куда именно добавить?
.rating {
float: left;
padding: 0.5em;
}
.rating a {
padding: 5px 0px 5px 25px;
}

Добавлять нужно в конец файла main.css
Код не удален, он находится на 896 строке.

#32 blackdron

blackdron

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

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

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

Просмотр сообщенияDanil (05 Сентябрь 2014 - 13:26) писал:

Добавлять нужно в конец файла main.css
Код не удален, он находится на 896 строке.

Danil, большое спасибо. Все супер!

А можно ли центрировать изображение в поле? скрин прилагаю Снимок81.jpg
А то, после того, как добавилась надпись "Увеличить изображение", само поле, где находится картинка стала широкой.
Ссылка на товар http://edoshakazan.c...ola-Lajt-1l-PeT

Сообщение отредактировал blackdron: 05 Сентябрь 2014 - 13:44


#33 Dars

Dars

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

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

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

Просмотр сообщенияblackdron (05 Сентябрь 2014 - 13:33) писал:

Danil, большое спасибо. Все супер!

А можно ли центрировать изображение в поле? скрин прилагаю Прикрепленный файл Снимок81.jpg
А то, после того, как добавилась надпись "Увеличить изображение", само поле, где находится картинка стала широкой.
Ссылка на товар http://edoshakazan.c...ola-Lajt-1l-PeT
В main.css найдите строку:

a img{ border:none;}

и замените её на:

a img{ border:none; margin: 0 auto;}


#34 blackdron

blackdron

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

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

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

Просмотр сообщенияDars (05 Сентябрь 2014 - 14:02) писал:

В main.css найдите строку:

a img{ border:none;}

и замените её на:

a img{ border:none; margin: 0 auto;}

Большое спасибо! Все супер!





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

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

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