Meta 13 Project Blog
  • Home
  • Links
  • CMS
  • CSS
  • Ecom
  • Email
  • Flash
  • Google
  • HTML
  • Javascript
  • OS
  • PHP
  • SEO
  • SQL
Browse: Home / zoomer

zoomer

Magento: Replace Product Image Zoomer with Lightbox

By Darin on December 7, 2011

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('/') ?>';

Posted in Ecom, HTML, PHP | Tagged lightbox, Magento, Product Images, Prototype, zoomer | Leave a response

Tags

.htaccess Advanced Custom Fields Bower c5 cms Composer Concrete 5 Concrete5 Cron CSS3 Cycle Cycle2 fancybox FancyBox2 Foundation Genesis Google Fonts Google Maps Google Webfonts Google Web Fonts Gravity Forms Grunt html5 HTML5 Boilerplate IE7 iPad iPhone jQuery lightbox Lists Magento Media Queries mobile pdf Plesk PrettyPhoto Responsive SASS SCSS static block Twitter typekit Video WordPress YouTube

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Recent Comments

  • Bryce on Responsive Email Templates
  • Justin on Mail Server Settings (Microsoft365)
  • Justin on Mail Server Settings (Microsoft365)
  • Bryce on Mail Server Settings (Microsoft365)
  • Justin on Mail Server Settings (Microsoft365)

Authors

  • Aaron Huisinga
  • Bryce
  • Darin
  • Jason
  • Josh
  • Justin
  • master
  • Nathan
  • nick
  • Paul

Archives

  • March 2016
  • July 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • September 2014
  • July 2014
  • June 2014
  • May 2014
  • December 2013
  • November 2013

Copyright © 2023 Meta 13 Project Blog. Powered by WordPress and Hybrid.