Писать на форуме DIAFAN.CMS могут только зарегистрированные пользователи. Войдите или зарегистрируйтесь.

Форум Модули DIAFAN.CMS Магазин Эффект лупы для изображений товаров


Виктор Ильясов (isprom) Сайт в Diafan.Cloud15 апреля

Здравствуйте, на сайте family-goods.su хочу установить эффект лупы для изображений. На этом сайте http://zoomsl.sergeland.ru/example/ есть примеры, как можно установить.

Например, надо прописать:

<!-- HTML -->

<img class="my-foto" src="/images/image-small.jpg" data-large="/images/image-big.jpg" title="Фото">

И вот это:

<!-- JAVASCRIPT -->

<script>
jQuery(function(){

$(".my-foto").imagezoomsl({

zoomrange: [3, 3]
});
});
</script>

То, что сами скрипты надо закинуть в папку "js" это понятно.

В блоке head нужно будет указать скрипты:

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/zoomsl-3.0.min.js"></script> - тоже понятно.

А вот как прописать первые два кода? Я так понимаю надо прописать в shop.view.id.php, там есть блок с выводом изображений.

Александр (capitan) 9215 апреля

jquery уде по-умолчанию есть в шаблон

в файл show_js.php надо добавить

Код
<script type="text/javascript" src="'.BASE_PATH.Custom::path('js/zoomsl-3.0.min.js').'" charset="UTF-8"></script>


в shop.view.id.php

Код
echo '<img src="'.BASE_PATH.$img["link"].'" alt="'.$img["alt"].'" title="'.$img["title"].'" image_id="'.$img["id"].'" class="shop_id_img">';


заменить на

Код
echo '<img src="'.BASE_PATH.$img["vs"]["medium"].'" alt="'.$img["alt"].'" title="'.$img["title"].'" image_id="'.$img["id"].'" class="my-foto shop_id_img" data-large="'.BASE_PATH.$img["link"].'">';

Виктор Ильясов (isprom) Сайт в Diafan.Cloud15 апреля

Вроде бы все сделал как написано, но не работает:

вот часть кода show_js.php:

Код
echo '<script type="text/javascript">
jQuery(function(e){
e.datepicker.setDefaults(e.datepicker.regional["'.$lang.'"]);
e.timepicker.setDefaults(e.timepicker.regional["'.$lang.'"]);
});
</script>
<script type="text/javascript" src="'.BASE_PATH.Custom::path('js/jquery.scrollTo.min.js').'" charset="UTF-8"></script>
<script type="text/javascript" src="'.BASE_PATH.Custom::path('js/jquery.maskedinput.js').'" charset="UTF-8"></script>
<script type="text/javascript" src="'.BASE_PATH.Custom::path('js/jquery.touchSwipe.min.js').'" charset="UTF-8"></script>
<script type="text/javascript" src="'.BASE_PATH.Custom::path('js/zoomsl-3.0.min.js').'" charset="UTF-8"></script>

Показать весь код
<script src="'.BASE_PATH.File::compress('js/extsrc.js', 'js').'"></script>';


вот часть кода shop.view.id.php:
Код
//вывод изображений товара
if (!empty($result["img"]))
{
echo '<div class="js_shop_all_img shop_all_img shop-item-big-images">';
$k = 0;
foreach ($result["img"] as $img)
{
switch ($img["type"])
{
case 'animation':

Показать весь код
echo '<a class="js_shop_img shop-item-image'.(empty($k) ? ' active' : '').'" href="'.BASE_PATH.$img["link"].'" rel="prettyPhoto[gallery'.$result["id"].'shop]" style="background-image:url('.BASE_PATH.$img["link"].')" image_id="'.$img["id"].'">';
break;
case 'large_image':
echo '<a class="js_shop_img shop-item-image'.(empty($k) ? ' active' : '').'" href="'.BASE_PATH.$img["link"].'" rel="large_image" width="'.$img["link_width"].'" height="'.$img["link_height"].'" style="background-image:url('.BASE_PATH.$img["link"].')" image_id="'.$img["id"].'">';
break;
default:
echo '<a class="js_shop_img shop-item-image'.(empty($k) ? ' active' : '').'" href="'.BASE_PATH.$img["link"].'" style="background-image:url('.BASE_PATH_HREF.$img["link"].')" image_id="'.$img["id"].'">';
break;
}
/* echo '<div class="item"><img src="'.BASE_PATH.$img["link"].'" alt="'.$img["alt"].'" title="'.$img["title"].'" image_id="'.$img["id"].'" class="img-responsive shop_id_img"></div>'; */
echo '<div class="item"><img src="'.BASE_PATH.$img["vs"]["medium"].'" alt="'.$img["alt"].'" title="'.$img["title"].'" image_id="'.$img["id"].'" class="my-foto shop_id_img" data-large="'.BASE_PATH.$img["link"].'"></div>';
echo '</a>';
$k++;
}

Александр (capitan) 9215 апреля

а в каком файле инициализация проходит?

Код
<script>
jQuery(function(){
$(".my-foto").imagezoomsl({
zoomrange: [3, 3]
});
});
</script>

Александр (capitan) 9215 апреля

надо или туда же в show_js добавить или в файле http://family-goods.su/custom/my/js/main.js

Виктор Ильясов (isprom) Сайт в Diafan.Cloud15 апреля

Спасибо большое , все заработало. Остались только 2 мелочи.

1. Можно ли сделать так, чтобы при клике на изображение оно открывалось как раньше, и вот тут появлялся бы эффект лупы?
2. Можно ли применить этот эффект только к отдельной категории или к нескольким категориям?

Александр (capitan) 9216 апреля

1. можно, в данном случае блокируется функционал ссылки, надо вводить или <span>Увеличить изображение</span> подо изображением или позиционированием выставлять куда надо, но тогда будет с перевывами работать, лучше под изображением.
2. Можно отдельные шаблоны создать для категорий и выбирать какой нужен.

И у тебя там ошибка в скрипте какая-то, у меня вкладка с сайтом сожрала 3,5 Гб оперативки.