Mouseover product images in opencart07.12.13

1.
add to catalog/view/theme/MYTHEME/template/common/footer.tpl
 <div id="img_popup"><img src="image/animation.gif" alt="" /></div>

2.
add to catalog/view/theme/MYTHEME/stylesheet  stylesheet.css

#img_popup {
  min-width:228px;
  min-height:228px;
  background-color:#fff;
  position:absolute;
  top:0;
  left:25%;
  padding:10px;
  z-index:999;
  display:none;
  border: solid 2px #aaa;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-align:center;
 }

#img_popup img { 
  display:block;
  margin: auto;
 }

3.
add to catalog/view/javascript/common.js
and change line
src2 = src.replace('80x80','228x228') //depends what size you are using

/*****************************************
*  Mouse over
*****************************************/
    $('.box-product .image img,.product-grid .image img,.product-list .image img,').mouseenter(function(e) {
	var o = $(this);
	o.addClass("hasFocus");
	setTimeout(function(){
        if (o.hasClass("hasFocus")) {
          var obj = o.offset();
          var img_popup = $('#img_popup');
          img_popup.find('img').attr('src','image/animation.gif');
          var st = $(window).scrollTop()
          var yoff = $(window).height()+st-obj.top;
            if(yoff < 260)
            {
		var y = 260-yoff;
		img_popup.css('top',obj.top-y);         
            }
            else {
		img_popup.css('top',obj.top);         
            }
            img_popup.css('left',obj.left-265);         
	    
            var src = o.attr('src');
            var href = o.parents().find('a').attr('href');
	    src2 = src.replace('80x80','228x228')
	    
	    $.ajax({
		url:src2,
		type:'HEAD',
		error: function()
		{
		    $.ajax({
			url:href,
			type:'HEAD',
			error: function()
			{
			},
 			success: function()
			{
			    img_popup.find('img').attr('src',src2);
			    img_popup.fadeIn('slow', function() {
				// Animation complete
  			    });
			}
		    });
		    
		},
		success: function()
		{
		    img_popup.find('img').attr('src',src2);
		    img_popup.fadeIn('slow', function() {
			// Animation complete
  		    });
		}
	    });

}
	},350);

})

/**************************************************
* MouseOver Out
**************************************************/

$('.box-product .image img, .product-grid .image img, .product-list .image img  ').mouseleave(function(e) {
	$(this).removeClass("hasFocus");
	$('#img_popup').fadeOut('fast', function() {
        // Animation complete
	});
    })

Anonymous

Mouseover product images in opencart07.12.13

Information Epoch 1728119339