[Помогите] Увеличение картинки по клику в описании товара

Подскажите как можно организовать увеличение изображения по клику, в описании товара. В модальном окне с затемнение экрана по аналогии с изображением товара.

 

На странице товара вот так сделано:

Код:

<a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox">
 
<img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" />
 
</a>

Получается выводится ссылка, а внутри неё изображение. В ссылке добавлено class="colorbox" rel="colorbox" Вот это оно и есть, скорее всего. Только как это в описание товара вставить?

 

В CKEditore нажимаете источник и в том месте где нужно прописываете примерно следующее:

<a class="colorbox" rel="colorbox" title="Ваш текст title" href="http://адрес увеличенной картинки">
<img id="image" alt="альт текст изображения" title="Ваш текст title" src="http://адрес маленькой картинки">
</a>

 

Спасибо работает, а как насчет уменьшения изображения при уменьшении размера окна браузера. С помощью jquery например

 

делать-то можно. Надо как-то узнать текущую высоту и ширину окна браузера, и уменьшить рисунок под них. Но, по-моему, это лишний и неоправданный гимор.

 

поставьте в качестве галереи не colorbox, а fancybox. Он это умеет.

 

Вот точно так же хочу, но не в тексте, а в футере. Да даже и в тексте попробовал по вашему примеру - не получается, большая картинка открывается в окне. ОС 1.5.4.1 Что делать?
Уже все перепробовал. Nivozoom мне советовали... но я не знаю как его подружить с имеющимся colorbox... Хотелось бы на колорбоксе сделать.

 

Нужно со страницы продукта забрать этот скрипт (при этом в product.tpl его удалить):

Код:

<script type="text/javascript"><!--
$('.colorbox').colorbox({
	overlayClose: true,
	opacity: 0.5
});
//--></script>

и вставить в футер перед:
</body></html>

После этого colorbox будет работать в любом месте.

 

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

 

А скриптиком таким не поделитесь?

 

Вот тут описано http://www.opengs.ru/js/223-uvelichenie-izobrazheniya-pri-navedenii-kursora-myshi-jquery.html