Сообщений в теме: 29

[destorrr]

Здравствуйте!

Не могу разобраться с внедрение скрипта описанным в примере 3: http://zoomsl.sergeland.ru/example/
Помогите пожалуйста разобраться.

Мой сайт: fdress.ru

Спасибо.

[MikDark]

destorrr (22 Март 2015 - 23:09) писал:

Здравствуйте!

Не могу разобраться с внедрение скрипта описанным в примере 3: http://zoomsl.sergeland.ru/example/
Помогите пожалуйста разобраться.

Мой сайт: fdress.ru

Спасибо.

Предлагаем Вам воспользоваться другим скриптом.
1) Скачайте приложенный фал и загрузите файлы из него в раздел Сайт - Редактор шаблонов.
2) В шаблон HTML перед тэгом </head> добавьте:

<link href="{ASSETS_STYLES_PATH}cloud-zoom.css" rel="stylesheet" type="text/css" />
<!-- Загрузка Cloud Zoom JavaScript файла -->
<script type="text/JavaScript" src="{ASSETS_JS_PATH}cloud-zoom.1.0.1.min.js"></script>

3) В шаблоне Товар найдите код:

{% IF GOODS_IMAGE_EMPTY %}
			 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
			 {% ELSE %}
			 <a href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
			 {% ENDIF %}

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

{% IF GOODS_IMAGE_EMPTY %}
			 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
			 {% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom cornerAll withBorder" id="zoom1" rel="position: 'inside', zoomPosition: '3', showTitle: false, adjustX:-4, adjustY:-4">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image">
			 {% ENDIF %}

[destorrr]

MikDark (23 Март 2015 - 10:04) писал:

Предлагаем Вам воспользоваться другим скриптом.
1) Скачайте приложенный фал и загрузите файлы из него в раздел Сайт - Редактор шаблонов.
2) В шаблон HTML перед тэгом </head> добавьте:

<link href="{ASSETS_STYLES_PATH}cloud-zoom.css" rel="stylesheet" type="text/css" />
<!-- Загрузка Cloud Zoom JavaScript файла -->
<script type="text/JavaScript" src="{ASSETS_JS_PATH}cloud-zoom.1.0.1.min.js"></script>

3) В шаблоне Товар найдите код:

{% IF GOODS_IMAGE_EMPTY %}
			 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
			 {% ELSE %}
			 <a href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
			 {% ENDIF %}

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

{% IF GOODS_IMAGE_EMPTY %}
			 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
			 {% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom cornerAll withBorder" id="zoom1" rel="position: 'inside', zoomPosition: '3', showTitle: false, adjustX:-4, adjustY:-4">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image">
			 {% ENDIF %}

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

[Vaccina]

Уточните пожалуйста, что именно в визуальной части вы бы хотели изменить?

[destorrr]

Vaccina (31 Март 2015 - 02:51) писал:

Уточните пожалуйста, что именно в визуальной части вы бы хотели изменить?

Для начала, хотелось бы чтобы увеличенное изображение появлялось рядом с основным изображением.
В реализации скрипта, который мне предложили, появляются какие-то рамки изображений, появляются несколько надписей loading ниже изображения, при эффекте увеличения, увеличенное изображение накладывается на основное, но не ровно и видно край основного изображения.
Приложил картинку.

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

• 

[Vaccina]

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

[destorrr]

Vaccina (01 Апрель 2015 - 00:10) писал:

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

Применил изменения.

[Vaccina]

В конец main.css вставьте:

.goodsDataMainImageBlock > #wrap, .goodsDataMainImageZoom > #wrap {
  display: none;
}
#cloud-zoom-big {
  left: 300px !important;
}

[destorrr]

Vaccina (02 Апрель 2015 - 00:18) писал:

В конец main.css вставьте:

.goodsDataMainImageBlock > #wrap, .goodsDataMainImageZoom > #wrap {
display: none;
}
#cloud-zoom-big {
left: 300px !important;
}

Спасибо, вроде получилось.
Но появилась рамка. Раньше она была только вокруг изображения и масштабировалась вместе с изображениями разного размера, а теперь она опоясывает всю зону где находится картинка и не масштабируется.
Теперь при клике на саму картинку, она не открывается отдельным окном. Хотелось бы вернуть эту возможность.

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

• 

[Vaccina]

1. В main.css добавьте:

.goodsDataMainImage #wrap a {
  float: left;
}

2. На основное изображение сверху накладывается слой, который перекрывает функцию увеличения при клике, если уменьшить этому слою z-index, отвечающий за порядок наложения, то некорректно будет работать увеличение при наведении.

[destorrr]

Vaccina (03 Апрель 2015 - 01:07) писал:

1. В main.css добавьте:

.goodsDataMainImage #wrap a {
float: left;
}

2. На основное изображение сверху накладывается слой, который перекрывает функцию увеличения при клике, если уменьшить этому слою z-index, отвечающий за порядок наложения, то некорректно будет работать увеличение при наведении.

Спасибо за ответ, теперь все корректно отображается.
Подскажите, где можно посмотреть полный список параметров скрипта (указываемых после rel=), который отвечает за увеличение картинки?
На сайте разработчика http://www.starplugins.com/cloudzoom нашел параметры только для новой платной версии.
Спасибо.

[Vaccina]

Как вариант, можно посмотреть параметры данного плагина на следующих сайтах:
http://ruseller.com/...e/howtouse.html
http://jquerylist.ru...cloud-zoom.html

[destorrr]

Vaccina (03 Апрель 2015 - 04:51) писал:

Как вариант, можно посмотреть параметры данного плагина на следующих сайтах:
http://ruseller.com/...e/howtouse.html
http://jquerylist.ru...cloud-zoom.html

Спасибо

[Konstantin1105]

Помогите пожалуйста установить на сайт скрипт лупа мой адрес electrobibi.ru аккаунт SL-358396

[Firefly]

Konstantin1105 (08 Февраль 2016 - 01:00) писал:

Помогите пожалуйста установить на сайт скрипт лупа мой адрес electrobibi.ru аккаунт SL-358396

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

$(document).ready(function(){
  if ($('#thumblist').length) {
	$('.thumblist .goods-image-icon').click(function(){
	  $('#zoom1 img').attr('src', $(this).attr('rel'));
	})
  }
})

Проверьте, пожалуйста.

[Konstantin1105]

Firefly (08 Февраль 2016 - 15:43) писал:

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

$(document).ready(function(){
if ($('#thumblist').length) {
$('.thumblist .goods-image-icon').click(function(){
	 $('#zoom1 img').attr('src', $(this).attr('rel'));
})
}
})

Проверьте, пожалуйста.

спасибо большое, все работает

[GeryM]

Уважаемые модераторы и техподдержка подскажите пожалуйста как реализовать данный эффект для темы "Лазурь" так чтоб не напортачить... Спасибо.

[Vaccina]

Вначале выполните данную инструкцию и установите файлы:
http://forum.storela..._20#entry212112

Далее в конец main.js добавьте:

$(document).ready(function(){
if ($('#thumblist').length) {
$('.thumblist .goods-image-icon').click(function(){
		 $('#zoom1 img').attr('src', $(this).attr('rel'));
})
}
})

[GeryM]

Спасибо большое... Скажите пожалуйста перед обращением смотрел некоторые варианты исполнения.. в данном примере как можно вариации попробовать... дело в том что в текущей версии ( она работает все классно) но там появляется рамка и если картинка первичная небольшая ... то "лупа" как бы урезает ее и получается маленькая картинка с рамкой а под ней видна основная картинка... http://ger-begovel.s...mod_id=93554809

Мне бы хотелось применить вот такой эффект (http://zoomsl.sergeland.ru/example/) пример №6 ( самый нижний) ... такое исполнение возможно в текущей версии...


Спасибо за быструю реакцию на вопрос вы молодцы...

[GeryM]

Извините пожалуйста а данный эффект работает только для раздела когда непосредственно заходишь в карточку товара??? а если нажать на лупу ?! Быстрый просмотр... там этот эффект не будет работать?! или можно настроить ??? Доскажите пожалуйста... Спасибо