Magento: Replace Product Image Zoomer with Lightbox
Follow these instructions to add a Prototype lightbox to the Product Detail page.
http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/catalog/adding_lightbox_to_magento_v2
I did Step 7 differently though (Adding Lightbox to base image)
In this file \app\design\frontend\default\blank\template\catalog\product\view\media.phtml
I commented out:
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?> <p class="product-image product-image-zoom"> <?php $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />'; echo $_helper->productAttribute($_product, $_img, 'image'); ?> </p> <p class="zoom-notice" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p> <div class="zoom"> <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" title="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" /> <div id="track"> <div id="handle"></div> </div> <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" title="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" /> </div> <script type="text/javascript"> //<![CDATA[ Event.observe(window, 'load', function() { product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint'); }); //]]> </script> <?php else: ?> <p class="product-image"> <?php $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />'; echo $_helper->productAttribute($_product, $_img, 'image'); ?> </p> <?php endif; ?>
and put this
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?> <p class="product-image"> <a href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>"> <img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265,265); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" /> </a> </p> <?php else: ?> <p class="product-image"> <img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265,265); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" /> </p> <?php endif; ?>
If you get the lightbox working but the Close button image is not loading, try this.
Open \app\design\frontend\default\your_theme\template\page\html\head.phtml
and add a / inside the quotation marks of getJsSkinUrl(”)
var SKIN_URL = '<?php echo $this->helper('core/js')->getJsSkinUrl('/') ?>';
Recent Comments