Post by sketchi » Thu Feb 13, 2014 9:43 pm

I've installed the free module "Image Preview v1" (http://www.opencart.com/index.php?route ... on_id=6596) on 1.5.6 so I now get a larger version of the product thumbnail on hover on the homepage and category pages.

However, my thumbnails are square crops of the product images, so instead of an enlarged thumbnail I would like to show the full size original image on hover so the customer can see the full image.

I'm guessing the change would be done in imagepreview.tpl, but unfortunately I don't know enough PHP to work it out, so would greatly appreciate any help.

This is how the current code looks:

Code: Select all

        <script type="text/javascript">
 		$(document).ready(function(){
			$.preview();
  		});
		(function($) {
		$.preview = function(){
			var addRel = function(selector) {
    			$(selector).each(function() {
					var imgsrc = $(this).find("img").attr('src').replace("220x220","500x500");
					var imgalt = $(this).find("img").attr('alt');
					$(this).addClass("screenshot<?php if ($enable_sticky) { ?> sticky<?php } ?>");
        			$(this).attr("rel", function() { 
    					return "" + imgsrc; 
					}); 
        			$(this).attr("title", function() { 
    					return "" + imgalt; 
					}); 
    			});

			};
			addRel("div.image a");
			$.jatt({
			direction: '<?php echo (!($direction) ? n : $direction ); ?>',
			followMouse: true,
			zIndex: <?php echo (!($zindex) ? 1000 : $zindex ); ?>,
			speed: <?php echo (!($speed) ? 300 : $speed ); ?>
			});
		};
		})($);
		</script>
        <style type="text/css">
		#preview {background-color:<?php echo (!($bgcolor) ? '#000' : $bgcolor ); ?>;color:<?php echo (!($titlecolor) ? '#fff' : $titlecolor ); ?>}
		#preview img{ width:<?php echo (!($width) ? '300px' : $width ); ?>; height:<?php echo (!($height) ? '300px' : $height ); ?> }
		</style>
Many thanks!

User avatar
New member

Posts

Joined
Wed Sep 22, 2010 5:04 pm
Who is online

Users browsing this forum: No registered users and 5 guests