Збільшувалось зображення опцій.

[MarketM]

Вітаю.

Шукаю модуль, щоб при наведенні мишки або пальця на сенсорних екранах збільшувалось зображення опцій?

[MKaizer]

А в чому проблема зробити це стилями?

[MarketM]

Бо рівень прагрумваня копіпаста по інструкції.

https://www.jqueryscript.net/zoom/Smooth-Image-Zoom-Pan-Plugin-With-jQuery-ZooMove.html

Зміг під'єднати відповідно до інструкції, працює тільки для головного зображення, а ось для фото опції ні.

Не можу зрозуміти як під'єднати та призначити клас для $('image_zoom').zoomove(); та куди вставити в product.tpl.

Інструкцію цю використовував:

Прихований текст

Опубліковано: 24 листопада 2011 (змінено)

Качаем ниже прикрепленный файл. Помещаем его в папку /catalog/view/javascript/jquery/

Открываем файл /catalog/view/theme/default/template/common/hrader.tpl

Ищем

 

<script type="text/javascript" src="catalog/view/javascript/common.js"></script>

Перед или после вставляем

 

<script src="catalog/view/javascript/jquery/jquery.lazyload.js" type="text/javascript"></script>

Все файл подключен...

Теперь для того чтобы он заработал открываем файл /catalog/view/javascript/common.js и после

 

$(document).ready(function() {

вставляем

 

$("img.lazy").lazyload();

Теперь для какой картинки хочеш, что бы применялся этот эффект, просто необходимо картинке дать класс "lazy". Если хочеш чтобы для полностью для всех картинок применялся эффект необходимо написать:

 

$("img").lazyload();

Более подробнее можно прочитать на http://www.appelsiin...ojects/lazyload

Почему-то несмог прикрепить файл, выкладываю ссылку на него - вот

Змінено 24 листопада 2011 користувачем Fizik87

 

[spectre]

вас не смущает что инструкция 2011 года?)

[MarketM]

Так яж папробивать ) ... для головного фото взагалі то працює тільки воно мені не треба, для опцій нехоче.

 

в "common" вже таке понаписував таке, недіє для опції

 

$(document).ready(function() {
    $('.zoo-item').ZooMove();
    $(' image_zoom ').zoomove();
    $(' img ').zoomove();
    $('optionimage.zoomove').zoomove();

[MKaizer]

Якого ви ефекту хочете добитись (киньте приклад)? Покажіть сайт на якому це робите (для кращого розуміння що і як).

[MarketM]

Дякую за увагу. У мене на попередній версії сайті, працювало як в прикладі, я замовляв послугу мені налаштували, але я перевстановив сайт, а про ці зміни забув, зберегти. Тому почав питати за доповнення, бо доповнення складніше профукати.

Але стало цікаво зробити самому трохи зрозуміти як це працює.

наприклад тут https://www.dybok.com.ua/ua/product/detail/91733

[MarketM]

Так інструкція 2011 може бути застарілою, взагалі то так якісь зміни відбулись з виходом HTML5 і CSS3, скрипти, мабуть, стали необов'язкові.

Цікавий код https://codepen.io/gufdtprs-the-sans/pen/KKJXaQj на сенсорному екрані працює. Але ...

[MKaizer]

В 14.11.2023 в 23:16, MarketM сказав:

Так інструкція 2011 може бути застарілою, взагалі то так якісь зміни відбулись з виходом HTML5 і CSS3, скрипти, мабуть, стали необов'язкові.

Цікавий код https://codepen.io/gufdtprs-the-sans/pen/KKJXaQj на сенсорному екрані працює. Але ...

Я про це і говорив з самого початку. Зробити стилями. Покажіть сайт.

[MarketM]

Мій сайт ось, наприклад товар:

Прихований текст

https://marketmebel.ck.ua/shafa_kupe/shafa_kupe_3_dverna/shafa-kupe-kombi-1800-3d

Розумію с того приклада що src= містить пряме посилання на зображення, а треба звернутися до змінної мабуть $option_value['image']

[MKaizer]

В 15.11.2023 в 19:31, MarketM сказав:

Мій сайт ось, наприклад товар:

  Приховати вміст

https://marketmebel.ck.ua/shafa_kupe/shafa_kupe_3_dverna/shafa-kupe-kombi-1800-3d

Розумію с того приклада що src= містить пряме посилання на зображення, а треба звернутися до змінної мабуть $option_value['image']

Якщо робити за принципом #image:hover { transform: scale(3.5); } то Вам потрібно для зображень опцій збільшити саме зображення бо виводить розмір 50х50,  додати клас напр. img-opt-scale, ну і тоді в силях css прописати наступне:
 

.img-opt-scale {
    width: 10%;
  /* % - в залежності який розмір потрібний для показу без наведення*/
}
.img-opt-scale:hover {
    transform: scale(3.5);
  /* 3.5 - в залежності на скільки збільшити при наведенні*/
}