Archive for October, 2012

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>

How to slide up-down of all sidebar and apply block-active class in Magento

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">
    $j(document).ready(function(){
         $j('.block .block-title').children().addClass("block-active");
                $j('.block .block-title').click(function(){
                    $j(this).closest('.block').find('.block-content').not(':animated').slideToggle();
                    $j(this).children().toggleClass("block-active");
                });
    });
</script>