Jump to content
Sign in to follow this  
Andruhi4

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

Recommended Posts

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

1.5.3.1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Пример:

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

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

Share this post


Link to post
Share on other sites

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

Пример:

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

1.5.3.1

Извините!

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

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

Share this post


Link to post
Share on other sites

Прошу прощение просмотрел... Вопрос ещё актуален?

Share this post


Link to post
Share on other sites

Прошу прощение просмотрел... Вопрос ещё актуален?

Да,актуален!

Не нашол решения так как не профи в этом!

Share this post


Link to post
Share on other sites

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

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

Пример:

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

  • +1 1

Share this post


Link to post
Share on other sites

Вы скачали библиотеку 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" /> ???

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

Share this post


Link to post
Share on other sites

К примеру в контроллере 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

Share this post


Link to post
Share on other sites

К примеру в контроллере 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" />

Share this post


Link to post
Share on other sites

Это будет работать на 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>

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

Share this post


Link to post
Share on other sites

Это будет работать на 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']; ?>" . Иначе не работает .

Share this post


Link to post
Share on other sites

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

 

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

 

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

Share this post


Link to post
Share on other sites

Простите, а в версии 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'));
 

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

Share this post


Link to post
Share on other sites

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

$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:

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.