Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Увеличить фото товара при наведении


Andruhi4

Recommended Posts

Добрый день! подскажите, как можно сделать так, чтоб при нахождении в категории, наведя на картинку одного из товара, она увеличилась например в 500х500 px???

1.5.3.1

Надіслати
Поділитися на інших сайтах


Здравствуйте, лично я пользуюсь zoomi.js

спасибо, а как теперь вставить в OC это правильно?? я так понимаю, что надо теперь загружать 2 картинки... 1: маленькая картинка, которая будет возле описания товара, и картинка побольше, которая будет появляться при наведении, так?
Надіслати
Поділитися на інших сайтах


маленькая картинка, которая будет возле описания товара, и картинка побольше, которая будет появляться при наведении, так?

Нет. Размер изображения Вы устанавливаете в контроллере, а в шаблоне Вы ограничиваете изображение в размере и прописываете для тега класс "zoomi".

Пример:

<img class="zoomi" src="<?php echo $value['image']; ?>" width="40" height="40" />
Так же не забудьте добавить библиотеку:

<script type="text/javascript" src="catalog/view/javascript/zoomi.js"></script>
Надіслати
Поділитися на інших сайтах

  • 3 months later...

Нет. Размер изображения Вы устанавливаете в контроллере, а в шаблоне Вы ограничиваете изображение в размере и прописываете для тега класс "zoomi".

Пример:

<img class="zoomi" src="<?php echo $value['image']; ?>" width="40" height="40" />

Так же не забудьте добавить библиотеку:

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

А можно поподробней описать!Для не продвинутых.Для категорий.

Если не сложно.

Надіслати
Поділитися на інших сайтах


Добрый день! подскажите, как можно сделать так, чтоб при нахождении в категории, наведя на картинку одного из товара, она увеличилась например в 500х500 px???

1.5.3.1

Извините!

Скажите.Вы решили как это сделать?

Не могли бы написать решение.

Надіслати
Поділитися на інших сайтах


  • 4 weeks later...

Вы скачали библиотеку zoomi.js? Если нет, то скачайте.

Далее в контроллере Вам необходимо задать тот размер картинке, который будет соответствовать "увеличенной" картинке, затем в шаблоне Вы можете задать размер картинке до "увеличения" атрибутами width и height, так же обязательно присвоить класс "zoomi"

Пример:

<img class="zoomi" src="<?php echo $value['image']; ?>" width="40" height="40" />

  • +1 1
Надіслати
Поділитися на інших сайтах

Вы скачали библиотеку zoomi.js? Если нет, то скачайте.

Далее в контроллере Вам необходимо задать тот размер картинке, который будет соответствовать "увеличенной" картинке, затем в шаблоне Вы можете задать размер картинке до "увеличения" атрибутами width и height, так же обязательно присвоить класс "zoomi"

Пример:

<img class="zoomi" src="<?php echo $value['image']; ?>" width="40" height="40" />

Спасибо!

Что нужно делать я уже читал выше.

Вопрос как.

Библиатеку "zoomi" я скачал и закинул в catalog/view/javascript

Что и как править в контроллере?

Куда вписать

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

я прописал в header.tpl между тегами <head> <head>

дальше куда прописать <img class="zoomi" src="<?php echo $value['image']; ?>" width="40" height="40" /> ???

Вот собственно что нужно.

Надіслати
Поділитися на інших сайтах


К примеру в контроллере product\category\category.php (вывод продуктов в категории) есть цикл где формируется массив продуктов для вывода пользователю, при переборе продуктов вместе с остальной информацией о продукте подготавливается изображение продукта.

$image = $this->model_tool_image->resize($image, $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));

параметры метода resize $this->config->get('config_image_product_width') и $this->config->get('config_image_product_height') задают ширину и высоту изображения, Вы можете их изменить на нужные Вам. Пример:

$image = $this->model_tool_image->resize($image, 300, 300);

<script type="text/javascript" src="catalog/view/javascript/zoomi.js"></script> - всё верно вставили.

В шаблоне вывода категорий catalog\view\theme\default\template\product\category.tpl есть цикл для вывода продуктов пользователю, вот как раз там и нужно вносить эти изменения:

<img class="zoomi" src="<?php echo $value['image']; ?>" width="40" height="40" />

  • +1 1
Надіслати
Поділитися на інших сайтах

  • 3 weeks later...

К примеру в контроллере product\category\category.php (вывод продуктов в категории) есть цикл где формируется массив продуктов для вывода пользователю, при переборе продуктов вместе с остальной информацией о продукте подготавливается изображение продукта.

$image = $this->model_tool_image->resize($image, $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
параметры метода resize $this->config->get('config_image_product_width') и $this->config->get('config_image_product_height') задают ширину и высоту изображения, Вы можете их изменить на нужные Вам. Пример:

$image = $this->model_tool_image->resize($image, 300, 300);
<script type="text/javascript" src="catalog/view/javascript/zoomi.js"></script> - всё верно вставили.

В шаблоне вывода категорий catalog\view\theme\default\template\product\category.tpl есть цикл для вывода продуктов пользователю, вот как раз там и нужно вносить эти изменения:

<img class="zoomi" src="<?php echo $value['image']; ?>" width="40" height="40" />

Это будет работать на opencart 1.5.4.1 ? Подскажите пожалуйста по точней куда вставить эту строку <img class="zoomi" src="<?php echo $value['image']; ?>" width="40" height="40" />

Надіслати
Поділитися на інших сайтах


Это будет работать на opencart 1.5.4.1 ? Подскажите пожалуйста по точней куда вставить эту строку <img class="zoomi" src="<?php echo $value['image']; ?>" width="40" height="40" />

Да. Для приведённого мной примера необходимо заменить в файле catalog\view\theme\default\template\product\category.tpl строчку

<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>

на

 

<div class="image"><a href="<?php echo $product['href']; ?>"><img class="zoomi" src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" width="40" height="40" /></a></div>

Написал без проверки, но вроде всё верно.

Надіслати
Поділитися на інших сайтах

Это будет работать на opencart 1.5.4.1 ? Подскажите пожалуйста по точней куда вставить эту строку <img class="zoomi" src="<?php echo $value['image']; ?>" width="40" height="40" />

Да. Для приведённого мной примера необходимо заменить в файле catalog\view\theme\default\template\product\category.tpl строчку

<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>

на

 

<div class="image"><a href="<?php echo $product['href']; ?>"><img class="zoomi" src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" width="40" height="40" /></a></div>

Написал без проверки, но вроде всё верно.

Я вчера так и допилил сам к вечеру ,  Спасибо ! )  в строчке нужно это убрать : alt="<?php echo $product['name']; ?>" . Иначе не работает .

Надіслати
Поділитися на інших сайтах


Ребята, подскажите, пожалуйста, новичку.

 

Скачал библиотеку, установил в папку \catalog\view\javascripе

 

Как сделать, чтобы данный скрипт заработал на главной страничке, а не в категории.

Надіслати
Поділитися на інших сайтах


  • 3 weeks later...

Простите, а в версии 1.5.4.1 у меня в файле \catalog\controller\product\category.php нет такой строки:

 

 

$image = $this->model_tool_image->resize($image, $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));

 

Есть строка:

 

 $image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
 

Как я понимаю, править нужно её для установки максимального размера при увеличении. Но что - то не выходит, после моих правок картинки потом вообще не отображаются. Не подскажете, как исправить? Новичок...

Надіслати
Поділитися на інших сайтах


Как я понял, в моей версии надо писать:

$image = $this->model_tool_image->resize($result['image'], 300, 300);

И это аналогично, если в админке - управление магазином - изображения - изменить параметр "Размер изображения в списке товаров". Но какая - то мистика получается: там сейчас стоит 80x80, если поменять на, скажем, 100x100 - работает, картинки при наведении увеличиваются до 100x100. Однако, если поставить, скажем, 300x300 - выходят предупреждения от php наверху типа таких:

 

"Warning: imagejpeg(): Unable to open '/opt/ocstore/image/cache/data/odezda/2354_1big[1]-300x300.jpg' for writing: Permission denied in /opt/ocstore/system/library/image.php on line 45 Warning: fopen(/opt/ocstore/system/logs/error.txt): failed to open stream: Permission denied in /opt/ocstore/system/library/log.php on line 12 Warning: fwrite() expects parameter 1 to be resource, boolean given in /opt/ocstore/system/library/log.php on line 14 Warning: fclose() expects parameter 1 to be resource, boolean given in /opt/ocstore/system/library/log.php on line 16"

 

И картинки товаров перестают отображаться, причём их рамки и вообще весь текст выстраиваются по диагонали. Странно :mellow:

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.