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


Увеличение Фотографий


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

#21 Ирина345

Ирина345

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

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

Отправлено 06 Октябрь 2015 - 15:23

Просмотр сообщенияVovan (05 Октябрь 2015 - 13:26) писал:

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

далее найдите в шаблоне hTML
 </head>
замените на


<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}cloud-zoom.css">
<script type="text/javascript" src="{ASSETS_JS_PATH}cloud-zoom.1.0.2.js"></script>
</head>



далее в шаблоне Товар найдите
<div class="general-img popup-gallery">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=azure" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
{% ELSE %}
<a href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" class="goods-image-medium" />
</a>
{% ENDIF %}
{% IF GOODS_IS_NEW %}
<span class="ico-product new">Новинка</span>
{% ELSEIF GOODS_IS_TOP %}
<span class="ico-product best">Хит</span>
{% ENDIF %}
{% IF GOODS_MOD_MAX_DISCOUNT %}
<span class="ico-product sale">Скидка</span>
{% ENDIF %}
</div><!-- END основное изображение товара -->
замените на
<div class="general-img popup-gallery">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=spring" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom " id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
</a>
{% ENDIF %}

{% IF GOODS_IS_NEW %}
<span class="ico-product new">Новинка</span>
{% ELSEIF GOODS_IS_TOP %}
<span class="ico-product best">Хит</span>
{% ENDIF %}
{% IF GOODS_MOD_MAX_DISCOUNT %}
<span class="ico-product sale">Скидка</span>
{% ENDIF %}
</div><!-- END основное изображение товара -->

Прикрепленные файлы



#22 Vovan

Vovan

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

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

Отправлено 06 Октябрь 2015 - 15:45

Просмотр сообщенияИрина345 (06 Октябрь 2015 - 15:23) писал:

Здравствуйте, скачайте и установите на ваш сайт в раздел Сайт-Редактор шаблонов следующие файлы

далее найдите в шаблоне hTML
 </head>
замените на


<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}cloud-zoom.css">
<script type="text/javascript" src="{ASSETS_JS_PATH}cloud-zoom.1.0.2.js"></script>
</head>



далее в шаблоне Товар найдите
<div class="general-img popup-gallery">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=azure" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
{% ELSE %}
<a href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" class="goods-image-medium" />
</a>
{% ENDIF %}
{% IF GOODS_IS_NEW %}
<span class="ico-product new">Новинка</span>
{% ELSEIF GOODS_IS_TOP %}
<span class="ico-product best">Хит</span>
{% ENDIF %}
{% IF GOODS_MOD_MAX_DISCOUNT %}
<span class="ico-product sale">Скидка</span>
{% ENDIF %}
</div><!-- END основное изображение товара -->
замените на
<div class="general-img popup-gallery">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=spring" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom " id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
</a>
{% ENDIF %}

{% IF GOODS_IS_NEW %}
<span class="ico-product new">Новинка</span>
{% ELSEIF GOODS_IS_TOP %}
<span class="ico-product best">Хит</span>
{% ENDIF %}
{% IF GOODS_MOD_MAX_DISCOUNT %}
<span class="ico-product sale">Скидка</span>
{% ENDIF %}
</div><!-- END основное изображение товара -->

к сожалению ничего не вышло, фотографии вобще перестали увеличиваться

#23 Юля123

Юля123

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

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

Отправлено 06 Октябрь 2015 - 16:10

Просмотр сообщенияVovan (06 Октябрь 2015 - 15:45) писал:

к сожалению ничего не вышло, фотографии вобще перестали увеличиваться

Здравствуйте, на вашем сайте в разделе Сайт > Редактор шаблонов в файле cloud-zoom.1.0.2.js найдите код

// Fix ie6 select elements wrong z-index bug. Placing an iFrame over the select element solves the issue...
			 if ($.browser.msie && $.browser.version < 7) {
				 $ie6Fix = $('<iframe frameborder="0" src="#"></iframe>').css({
					 position: "absolute",
					 left: xPos,
					 top: yPos,
					 zIndex: 99,
					 width: w,
					 height: h
				 }).insertBefore(zoomDiv);
			 }

и удалите его.

#24 Vovan

Vovan

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

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

Отправлено 06 Октябрь 2015 - 16:30

Просмотр сообщенияЮлия Лаврова (06 Октябрь 2015 - 16:10) писал:

Здравствуйте, на вашем сайте в разделе Сайт > Редактор шаблонов в файле cloud-zoom.1.0.2.js найдите код

// Fix ie6 select elements wrong z-index bug. Placing an iFrame over the select element solves the issue...
			 if ($.browser.msie && $.browser.version < 7) {
				 $ie6Fix = $('<iframe frameborder="0" src="#"></iframe>').css({
					 position: "absolute",
					 left: xPos,
					 top: yPos,
					 zIndex: 99,
					 width: w,
					 height: h
				 }).insertBefore(zoomDiv);
			 }

и удалите его.

Все получилось, спасибо! А где можно увеличить зумер, и в мобильной версии хочется отключить его

#25 Ирина345

Ирина345

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

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

Отправлено 06 Октябрь 2015 - 17:29

Просмотр сообщенияVovan (06 Октябрь 2015 - 16:30) писал:

Все получилось, спасибо! А где можно увеличить зумер, и в мобильной версии хочется отключить его
Найдите в шаблоне Товар код
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=spring" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom " id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
</a>
{% ENDIF %}
замените на
 <div class="test1">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=spring" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom " id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
</a>
{% ENDIF %}
</div>
<div class="test2"> {% IF GOODS_IMAGE_EMPTY %}
			<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=azure" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
		  {% ELSE %}
			<a href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
			  <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" class="goods-image-medium" />
			</a>
		  {% ENDIF %}</div>

далее найдите в файле main.css
@media all and (max-width: 481px) {
после вставьте

.test2{display:block !important;}
  .test1{display:none;}

далее в конец main.css добавьте



  .test2{display:none;}



#26 Vovan

Vovan

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

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

Отправлено 06 Октябрь 2015 - 19:01

Просмотр сообщенияИрина345 (06 Октябрь 2015 - 17:29) писал:

Найдите в шаблоне Товар код
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=spring" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom " id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
</a>
{% ENDIF %}
замените на
<div class="test1">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=spring" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom " id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
</a>
{% ENDIF %}
</div>
<div class="test2"> {% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=azure" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
{% ELSE %}
<a href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" class="goods-image-medium" />
</a>
{% ENDIF %}</div>

далее найдите в файле main.css
@media all and (max-width: 481px) {
после вставьте

.test2{display:block !important;}
.test1{display:none;}

далее в конец main.css добавьте



.test2{display:none;}


спасибо! все получилось!

#27 DevidINA

DevidINA

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

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

Отправлено 19 Январь 2018 - 18:59

Спасибо Вам огромное. Еще подскажите как сделать Срочно надо решить эту проблему
1. Сделать чтобы при выбирании другой картинки, не показывало зум первой
2. В левом верхнем углу вставить иконку лупы и чтобы при нажатии на нее открывался слайдер с фотографиями.
3. При выборе любой модификации меняется цена, как на фото

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

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

  • 123.png


#28 DevidINA

DevidINA

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

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

Отправлено 19 Январь 2018 - 22:02

Актуален только 3-й вопрос

#29 Stasya

Stasya

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

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

Отправлено 24 Январь 2018 - 17:20

Просмотр сообщенияDevidINA (19 Январь 2018 - 18:59) писал:

Спасибо Вам огромное. Еще подскажите как сделать Срочно надо решить эту проблему
1. Сделать чтобы при выбирании другой картинки, не показывало зум первой
2. В левом верхнем углу вставить иконку лупы и чтобы при нажатии на нее открывался слайдер с фотографиями.
3. При выборе любой модификации меняется цена, как на фото

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




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

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