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('/') ?>';
Magento: Remove White Frame from Product Images
Product images can be found in these files:
Product Listings –
\app\design\frontend\default\your_theme\template\catalog\product\list.phtml
Product Detail –
\app\design\frontend\default\your_theme\template\catalog\product\view\media.phtml
Cart –
\app\design\frontend\default\your_theme\template\checkout\cart\item\default.phtml
Cart Sidebar Recently Added –
\app\design\frontend\default\your_theme\template\checkout\cart\sidebar\default.phtml
There are many more instances of product images, but these are probably the more important ones. Just do a search in DW in the /template folder for ->resize to find them.
Find where the product image is added, will look something like this.
<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) ?>" />
Before
->resize(135)
Add
->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
->constrainOnly(true) – This will not resize an image that is smaller than the dimensions inside the resize() part.
->keepAspectRatio(true) – This will not distort the height/width of the image.
->keepFrame(false) – This will not put a white frame around your image.
Make sure that resize() has the max width and height twice.
->resize(135, 135)
Also remove the width and height attributes from the image.
Source
http://www.magthemes.com/magento-blog/customize-magentos-image-resize-functionality/
Recent Comments