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

Мы будем использовать известный js скрипт для просмотра изображений под названием PrettyPhoto. Но на основе этого примера можно использовать любой другой скрипт лайтбокса.

1. Скачайте архив скрипта и распакуйте его в вашу тему. В архиве немного урезанный вариант скрипта, но если вам нужна его последняя версия, то ссылка на оффсайт расположена в конце урока.

2. Откройте файл themes/bootlance/bootlance.rc.php и добавьте две стройки:

cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/prettyphoto/jquery.prettyPhoto.js');
cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/prettyphoto/css/prettyPhoto.css');

3. Откройте themes/bootlance/js/js.js и добавьте или измените код таким образом:

$().ready(function() {
    $("a[rel^='prettyPhoto']").prettyPhoto();
});

Так мы подключили лайтбокс к вашему сайту. Теперь осталось применить его там где он нам нужен.

4. Скопируйте в вашу тему файл шаблона карточки товара из модуля Market (modules/market/tpl/market.tpl)

5. Найдите в нем ссылку на большое изображение товара, она выглядит примерно так:

<a href="{PRD_MAVATAR.1.FILE}"><div class="thumbnail"><img src="{PRD_MAVATAR.1|cot_mav_thumb($this, 200, 200, crop)}" /></div></a>

В эту ссылку нам нужно добавить атрибут, по которому будет запускаться наш лайтбокс-скрипт, а именно rel="prettyPhoto" (так как мы прописали их в скрипте themes/bootlance/js/js.js). То есть получается так:

<a href="{PRD_MAVATAR.1.FILE}" rel="prettyPhoto[gal]"><div class="thumbnail"><img src="{PRD_MAVATAR.1|cot_mav_thumb($this, 200, 200, crop)}" /></div></a>

Также добавим этот атрибут и для других изображений, если в карточке товара их несколько:

<a href="{VALUE.FILE}" class="span1 pull-left" rel="prettyPhoto[gal]"><img src="{VALUE|cot_mav_thumb($this, 200, 200, crop)}" /></a>

 

Результат должен быть примерно такой:

Карточка товара Лайтбокс для изображения товара

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

Для желающих углубиться в детальные настройки PrettyPhoto ссылка: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Если вы не нашли ответа на свой вопрос, то можете задать его на форуме.