Tuesday 19 March 2013

Fancy Box Image Popup

<link rel="stylesheet" href="<?php echo $this->getSkinUrl('css/jquery.fancybox-1.3.4.css');?>" type="text/css" media="screen" />
<script src="<?php echo $this->getSkinUrl('js/jquery.js');?>"></script>
<script src="<?php echo $this->getSkinUrl('js/jquery.fancybox-1.3.4.pack.js');?>"></script>
<script type="text/javascript">
var j=$.noConflict();
j(document).ready(function() {
       j(".single_1").fancybox({
          helpers: {
              title : {
                  type : 'float'
              }
          }
      });
});
</script>

  <a class="single_1" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" >
                <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(256); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
                <div class="product-name"><h1><?php echo $this->htmlEscape($_image->getLabel())?></h1></div>

No comments:

Post a Comment