[Решение] Стандартный Lightbox для увеличения изображений в списке категории

Нередко у людей, использующих на своих сайтах компоненту VirtueMart, возникает желание добавить возможность выводить большие картинки с изображением товара прямо в списке категорий, используя Lightbox. Поскольку нормальных, простых решений этой задачи в сети я не нашел, пришлось ковырять компоненту самому. Ниже привожу решение с использованием стандартного Lightbox, такого же, какой используется на странице товара. Решение простое, дополнительно ничего устанавливать не надо.

Поскольку у меня вывод категории в настройках шаблона Default установлен в виде таблицы (flat product list), то мне нужно было отредактировать файл browse.listtable.tpl.php (лежит тут: /components/com_virtuemart/themes/default/templates/browse/includes).

Находим участок кода

Код (CODE):

1. $data[$row][] = '<a href="'.$product['product_flypage'].'" title="'.$product['product_name'].'">'
2.                         . ps_product::image_tag( $product['product_thumb_image'] )
3.                         . '</a>';

и заменяем на

Код (CODE):

1. $data[$row][] = vmCommonHTML::getLightboxImageLink($product['product_full_image'], ps_product::image_tag( $product['product_thumb_image'] ), $product['product_name'],'[product'.$product['product_id'].']');

Если у вас выставлен другой вариант отображения категории, то тогда вам надо будет редактировать файл шаблона категории (например, browse_1.php). Лежат эти файлы тут: /components/com_virtuemart/themes/default/templates/browse.

В файле шаблона категории вместо части кода, отвечающей за вывод уменьшенного изображения, надо будет вставить что-то типа

Код (CODE):

1. echo vmCommonHTML::getLightboxImageLink($product_full_image, ps_product::image_tag( $product_thumb_image), $product_name,'[product'.$product_id.']');

 

Подскажите пожалуйста тоже самое решение но только для virtuemart 2

 

чтоб не менять файли ядра, как вариант я зделал так:
templates/ваш шаблон/html/com_virtuemart/category/default.php
или
components/com_virtuemart/views/category/tmpl/default.php
после

Код (CODE):

1. <?=JHTML::link(
2.                                         $product->link,
3.                                         $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.htmlentities($product->product_name,ENT_QUOTES, "UTF-8").'" ',false),
4.                                         array('title' => htmlentities($product->product_name,ENT_QUOTES, "UTF-8"))); ?>

можна добавить ссилку:

Код (CODE):

1. <?php
2. if (!empty($product->images[0])) {
3.     echo
4. '<a class="show_full" href="' . $product->images[0]->file_url . '"/>Увеличить</a>';
5.    
6. }
7.  ?>

потом заменить:

Код (CODE):

1. $js = "
2. jQuery(document).ready(function () {
3.     jQuery('.orderlistcontainer').hover(
4.         function() { jQuery(this).find('.orderlist').stop().show()},
5.         function() { jQuery(this).find('.orderlist').stop().hide()}
6.     )
7. });
8. ";

на:

Код (CODE):

1. if (VmConfig::get('usefancy', 1)) {
2.     $js_full_img="jQuery('a.show_full').fancybox();";
3.     }
4. else{
5. $js_full_img="jQuery('a.show_full').facebox();";
6. }
7. $js = "
8. jQuery(document).ready(function () {
9.     jQuery('.orderlistcontainer').hover(
10.         function() { jQuery(this).find('.orderlist').stop().show()},
11.         function() { jQuery(this).find('.orderlist').stop().hide()}
12.     );
13.     ".$js_full_img."
14. });
15. ";

или провести те же не хитрые манипуляции с картинкой, чтоб она откривалась в лайтбоксе, а не вела на страницу товара