[Решено] Увеличение превью в списке товаров через tooltip

Boneshaker

Захожу иногда
56
1 / 0

[Решено] Увеличение превью в списке товаров через tooltip

« : 03.08.2014, 15:34:38 »

Приветствую. Решил запилить модное увеличение при наведении в списке товаров.

Конечная цель - тултип как на Али.

Думал сделать на CSS (вот тут кстати мои унылые потуги: /index.php/topic,287883.0.html) Но загрузка лишних 20 картинок не нужна никому, поэтому решил ковырять в сторону jquery

Собственно основная задача:
1. Написать запрос на full размер картинки (пока есть только на мидл, через str_replace в functions.php, описан в ссылке выше)

2. Найти годный скрипт, который будет подгружать картинку только после наведения. Вот что я нарыл: http://jmar.github.io/jquery-hoverZoom/ вполне подходит под задачи.

3. Причесать CSS чтобы было всё красиво и аккуратно, но это уже дело наживное.

В шапку уже грузятся: jquery-1.6.2.min.js и jquery.media.js
Раскидав файлы из архива по папкам, для пробы воткнул кусок демо прямо в product.php в консоли я получил вот что:

Код

Uncaught TypeError: Cannot read property 'find' of undefined jquery.hoverZoom.min.js:1
(anonymous function) jquery.hoverZoom.min.js:1
x.extend.each jquery.js:657
x.fn.x.each jquery.js:266
o.init jquery.hoverZoom.min.js:1
e.fn.hoverZoom jquery.hoverZoom.min.js:1
(anonymous function) predmety:680
c jquery.js:3048
p.fireWith jquery.js:3160
x.extend.ready jquery.js:433
q jquery.js:104
Options jquery.hoverZoom.min.js:1
speedView: 600 jquery.hoverZoom.min.js:1
speedRemove: 400 jquery.hoverZoom.min.js:1
showCaption: true jquery.hoverZoom.min.js:1
speedCaption: 600

Ну и беспорядочное движение на экране при наведении.

В общем прошу помощи у форума. Помогите пожалуйста довести скрипт до ума или накидайте альтернатив на jquery.

« Последнее редактирование: 26.10.2014, 09:21:29 от Boneshaker »

Записан

Boneshaker

Захожу иногда
56
1 / 0

Re: Увеличение превью в списке товаров через tooltip

« Ответ #1 : 03.08.2014, 17:45:44 »

Попробовал через вот этот скрипт: http://www.dyn-web.com/code/tooltips/image_text.php
Вроде получается но не то, что надо.

Итак, тестим скрипт в product.php. Вставлем после изображения:

Спойлер

[свернуть]

Ссылка появляется, окошко всплывает НО тут происходит косяк:

Спойлер

[свернуть]

Как видно на картинке, Подгружается совсем не то что надо, причём одна, произвольная картинка на всех товарах.
http://www.htmldrive.net/items/show/990/TinyTips-1.1-Pretty-Lightweight-Tooltips-Plugin Вот с этим такая же потеха.

Тем не менее, если сделать обычным Lightbox по аналогии с /index.php/topic,218144.new.html (штатными стредствами)

Код

<a href="<?php print $product->image?>?tmpl=component" class="modal" rel="{handler: 'iframe', size: {x: 320, y: 189}}">Быстрый просмотр</a>

То всё подгружается великолепно! Средствами behavior кто нибудь тултип с картинкой делал?

« Последнее редактирование: 03.08.2014, 18:17:58 от Boneshaker »

Записан

Boneshaker

Захожу иногда
56
1 / 0

Re: Увеличение превью в списке товаров через tooltip

« Ответ #2 : 03.08.2014, 19:03:35 »

Готовое решение:

1. Качаем: http://rusfolder.com/42091827

2. Ставим через джумловский менеджер приложений.

3. После чего идём в list_product\product.php и меняем:

Код

<img class="jshop_img" src="<?php print $product->image?>" alt="<?php print htmlspecialchars($product->name);?>" />

НА

Код

{tip <img class="tooltip-img-400" src="<?php print str_replace("thumb", "full", $product->image)?>" />} <img class="jshop_img" src="<?php print $product->image?>" alt="<?php print htmlspecialchars($product->name);?>" />{/tip}

В этом случае при наведении будет появляться FULL размер (который в Lightbox грузится в карточке товара)

Если нужен МИДЛ. то в list_product\product.php делаем следующее:
Меняем:

Код

<img class="jshop_img" src="<?php print $product->image?>" alt="<?php print htmlspecialchars($product->name);?>" />

НА

Код

{tip <img class="tooltip-img-400" src="<?php print $product->midlimage?>" />} <img class="jshop_img" src="<?php print $product->image?>" alt="<?php print htmlspecialchars($product->name);?>" />{/tip}

Потом чего идём в \com_jshopping\lib и в functions.php
после

Код

$products[$key]->image = $image_path."/".$image;

пишем:

Код

$products[$key]->midlimage = str_replace("thumb_", '', $products[$key]->image);

Теперь про CSS.
Прописываем в CSS нашего шаблона джумшоппинг:

Код

img.tooltip-img-400{width: 400px !important;}

Ширину выставляем свою (если нужный размер больше чем мидл, но меньше чем фулл, тогда выставляем в коде ФУЛЛ и просто ставим нужную максимальную ширину в CSS) Далее солим по вкусу CSS и наслаждаемся.

Результат с мидл размером:

Спойлер

[свернуть]

http://vinmade.ru/shop/zdanija.html - Пример работы.
Тестируем, отписываемся, бугуртим с обилия строчек кода в исходниках ради простой превьюхи

« Последнее редактирование: 26.10.2014, 08:59:25 от Boneshaker »

Записан

Biss

Давно я тут
995
101 / 0

RE: Увеличение превью в списке товаров через tooltip

« Ответ #3 : 03.08.2014, 19:18:38 »

Есть же плагин уже давно, и не надо ковырять шаблоны. Увеличилка и в списке товаров и в товаре, все настройки в плагине + несколько стилей.

Записан

Boneshaker

Захожу иногда
56
1 / 0

RE: Увеличение превью в списке товаров через tooltip

« Ответ #4 : 03.08.2014, 19:20:52 »

Цитата: Biss от 03.08.2014, 19:18:38

Есть же плагин уже давно, и не надо ковырять шаблоны. Увеличилка и в списке товаров и в товаре, все настройки в плагине + несколько стилей.

Ну тогда доставьте ссылку пожалуйста. Если речь идёт про этот: http://brooksite.ru/help/joomla/95-jquery-zoom-plagin-dlya-joomshopping.html То у меня он заругался с уже имеющимися скриптами, и именно зум нужен далеко не всем.

Записан

Вывод товаров из всех подкатегорий на странице категории Автор Faina	Ответов: 355 Просмотров: 72829	11.10.2025, 08:48:34 от kit2m2
[Решено] Вывод 3-х первых картинок в списке товаров категории Автор rudoy24	Ответов: 30 Просмотров: 13566	19.07.2024, 11:41:28 от juleczka
Определить расширение. pop_description для списка товаров Автор Alex_gs	Ответов: 3 Просмотров: 2905	24.09.2023, 12:18:34 от kit2m2
[Решено] Увеличение выбора покупаемых товаров + - Автор Aspik	Ответов: 216 Просмотров: 53330	02.08.2023, 21:31:25 от kit2m2
Смена фото при наведении в списке товаров категории Автор Taatshi	Ответов: 57 Просмотров: 7511	15.06.2023, 15:53:25 от Akeksandr

[Решено] Увеличение превью в списке товаров через tooltip - Дизайн и оформление

Новости Joomla

👩‍💻 ИИ-админ для Joomla ближе, чем вы думаете: Joomla MCP.

Проблемы с доступом к сайту расширений для JoomShopping - Nevigen

Вышли релизы безопасности Joomla 6.0.4 и Joomla 5.4.4

Boneshaker

[Решено] Увеличение превью в списке товаров через tooltip

Boneshaker

Re: Увеличение превью в списке товаров через tooltip

Boneshaker

Re: Увеличение превью в списке товаров через tooltip

Biss

RE: Увеличение превью в списке товаров через tooltip

Boneshaker

RE: Увеличение превью в списке товаров через tooltip

Похожие темы