Image Preview

Put below code into app/design/frontend/[your package]/[your theme]/template/page/html/head.phtml

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $j = jQuery.noConflict();
</script>
<script type="text/javascript">    
    xOffset = 10;
    yOffset = 30;
        $j("a.preview").hover(function(e){

            this.t = this.title;
            this.title = "";    
                        var w = (this.t != "") ? "<br/>" + this.t : "";
                            w = "<div class='ma-prev-name'>" + w + "</div>";

                        $j("body").append("<div id='preview'><img src='"+ this.rel +"' alt='Image preview' />"+ w +"<div class='ma-prev-des'>"+$j(this).next().text()+"</div></div>");
            $j("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px")
                .fadeIn("fast");                        
        },
        function(){
            this.title = this.t;    
            $j("#preview").remove();
        });    
        $j("a.preview").mousemove(function(e){
            $j("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px");
        });

</script>

Now in  app/design/frontend/[your package]/[your theme]/template/catalog/product/list.phtml, replace below code

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135"
 alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>

To

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
 id="product-image" rel="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(250); ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" 
alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
                <div><?php //echo $_product->getShortDescription()?></div>

Now add below code into skin/frontend/[your package]/[your theme]/css/imagepreview.css

#preview { position:absolute; display:none; background: #fff; color: #000; } /*Description for preview. You cant'n edit */ 
.ma-prevdes { display:none; } #preview img { } 
.ma-prev-name { margin-top: -20px; font-weight: bold; font-size: 15px; } 
.ma-prev-des { text-align: left; }

Last,  add below code into app/design/frontend/[your package]/[your theme]/layout/page.xml just after <action method=”addCss”><stylesheet>css/styles.css</stylesheet></action>

<action method="addCss"><stylesheet>css/imagepreview.css</stylesheet></action>
Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: