Изображение товара при наведении

[evilinside]

Добрый день.

Прошу совета у знающих людей.

Мне хотелось, чтобы при наведении на изображение товара в категории изображение всплывало более крупно ( большим размером чем миниатюра, не зум! ), а при клике на изображение открывался детальный просмотр товара.

Куда копать? Что применять ?

Может есть готовое решение ?

[evilinside]

Спасибо автору https://opencartforum.com/topic/2460-%D0%B4%D0%B5%D0%BB%D0%B0%D0%B5%D0%BC-%D0%BF%D1%80%D0%B5%D0%B2%D1%8C%D1%8E-%D1%82%D0%BE%D0%B2%D0%B0%D1%80%D0%B0-%D0%BF%D1%80%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B8-%D0%BC%D1%8B%D1%88%D0%B8/ нашел что искал

[palcet]

Я предлагаю сделать так. Скачиваем архив ниже, заливаем его в корень магазина (Уникальные файлы перезаписаны не будут)

затем открываем ваш шаблон и в файлах:

1. header.tpl перед </head> вставляем код:

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ampliacao/css/jqzoom.css" />

<script src="catalog/view/javascript/jquery/ampliacao/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

<script type="text/javascript"><!--

function bookmark(url, title) {

if (window.sidebar) { // firefox

window.sidebar.addPanel(title, url, "");

} else if(window.opera && window.print) { // opera

var elem = document.createElement('a');

elem.setAttribute('href',url);

elem.setAttribute('title',title);

elem.setAttribute('rel','sidebar');

elem.click();

} else if(document.all) {// ie

window.external.AddFavorite(url, title);

}

}

$(document).ready(function(){

var options =

{

showEffect:'show',

hideEffect:'fadeout',

fadeoutSpeed: 'slow',

title :true,

lens:true,

zoomWidth: 350,

zoomHeight: 350

}

$(".jqzoom").jqzoom(options);

});

//--></script>

2. product.tpl ищем class="fancybox" rel="fancybox" и заменяем на это

class="thickbox jqzoom" rel="gallery"

и все, при наведении курсора изображение увеличивается.

Строку class="thickbox jqzoom" rel="gallery" можно вставить во всех шаблонах гле используется вывод изображений

catalog.zip

[tehnikawdom]

Я предлагаю сделать так. Скачиваем архив ниже, заливаем его в корень магазина (Уникальные файлы перезаписаны не будут)

затем открываем ваш шаблон и в файлах:

1. header.tpl перед </head> вставляем код:

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ampliacao/css/jqzoom.css" />

<script src="catalog/view/javascript/jquery/ampliacao/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

<script type="text/javascript"><!--

function bookmark(url, title) {

if (window.sidebar) { // firefox

window.sidebar.addPanel(title, url, "");

} else if(window.opera && window.print) { // opera

var elem = document.createElement('a');

elem.setAttribute('href',url);

elem.setAttribute('title',title);

elem.setAttribute('rel','sidebar');

elem.click();

} else if(document.all) {// ie

window.external.AddFavorite(url, title);

}

}

$(document).ready(function(){

var options =

{

showEffect:'show',

hideEffect:'fadeout',

fadeoutSpeed: 'slow',

title :true,

lens:true,

zoomWidth: 350,

zoomHeight: 350

}

$(".jqzoom").jqzoom(options);

});

//--></script>

2. product.tpl ищем class="fancybox" rel="fancybox" и заменяем на это

class="thickbox jqzoom" rel="gallery"

и все, при наведении курсора изображение увеличивается.

Строку class="thickbox jqzoom" rel="gallery" можно вставить во всех шаблонах гле используется вывод изображений

1) Нужно использовать при оформлении теги

, обозначая код.

2) Этот вариант сложнее.

3) Вариант автора tim21701 проверенный и рабочий.