Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 4 Ответов
  • 2165 Просмотров
*

Boneshaker

  • Захожу иногда
  • 56
  • 1 / 0
Приветствую. Решил запилить модное увеличение при наведении в списке товаров.

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


Думал сделать на 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
Попробовал через вот этот скрипт: 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
Готовое решение:

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

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

Boneshaker

  • Захожу иногда
  • 56
  • 1 / 0
Есть же плагин уже давно, и не надо ковырять шаблоны. Увеличилка и в списке товаров и в товаре, все настройки в плагине + несколько стилей.
Ну тогда доставьте ссылку пожалуйста. Если речь идёт про этот: http://brooksite.ru/help/joomla/95-jquery-zoom-plagin-dlya-joomshopping.html То у меня он заругался с уже имеющимися скриптами, и именно зум нужен далеко не всем.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Определить расширение. pop_description для списка товаров

Автор Alex_gs

Ответов: 3
Просмотров: 711
Последний ответ 24.09.2023, 12:18:34
от kit2m2
[Решено] Увеличение выбора покупаемых товаров + -

Автор Aspik

Ответов: 216
Просмотров: 43624
Последний ответ 02.08.2023, 21:31:25
от kit2m2
Смена фото при наведении в списке товаров категории

Автор Taatshi

Ответов: 57
Просмотров: 4155
Последний ответ 15.06.2023, 15:53:25
от Akeksandr
[Решено] Вывод 3-х первых картинок в списке товаров категории

Автор rudoy24

Ответов: 29
Просмотров: 9933
Последний ответ 09.05.2023, 11:59:11
от Akeksandr
Шаблон фильтрации товаров

Автор Prevergenec

Ответов: 1
Просмотров: 1157
Последний ответ 23.01.2023, 18:13:43
от kit2m2