Кароче решил попробовать прикрутить Хайслайд.
1. Качаем
хайслайд2. Из папки highslide кладем highslide.css и папку graphics кладем в папку /components/com_jshopping/css/, а highslide-full.js в папку /components/com_jshopping/js/
3. Открываем файл шаблона components/com_jshopping/templates/product/product_default.php
4. Вставляем в начале файла
<script type = "text/javascript" src = "<?php print JURI::root(); ?>components/com_jshopping/js/highslide-full.js"></script>
<link rel="stylesheet" href="<?php print JURI::root(); ?>components/com_jshopping/css/highslide.css"/>
<script type='text/javascript'>
hs.graphicsDir = '/components/com_jshopping/css/graphics/';
hs.outlineType = 'rounded-white';
hs.showCredits = false;
hs.dimmingOpacity = 0.75;
hs.align = 'center';
</script>
5. Ищем class="lightbox" (просто оно там одно, так быстрее

) в дефлтном это строка 31 вроде.
И вместо него вставляем class="highslide" onclick="return hs.expand(this)"
6. Ищем img class="jshop_img_thumb" (в районе 47-55 строки)
Меняем всю стрку на
<a class="highslide" onclick="return hs.expand(this)" href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>"><img class="jshop_img_thumb" src="<?php print $this->image_product_path?>/<?php print $image->image_thumb?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>"/></a>
Смотреть ДЕМО ЗЫ. Затемнение отрабатывает вот эта настройка hs.dimmingOpacity = 0.5; можете поставить любое значение до 1. Например 0,75 будет темнее.
Обращаю внимание ! highslide шаровой для некоммерческих проектов (любой магазин к этому классу не относится
)Для коммерческих проектов $29.00ЗЫ.
Сделано по аналогии с решением от evpadallas с учетом рабочего решения на Вирте.