Lightbox
Current lightbox options to use. Post comments on tips/tricks and tag projects with which one is used. These are also under the links section.
- Colorbox
- Fancybox
- Lightbox 2 (Images only, a little jerky on mobile)
- PrettyPhoto (Not updated as much but still might be useful)
- CSS3 Lightbox
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('/') ?>';
Auto Launch Lightbox On Page Load
You can trigger Lightbox (Thickbox, PrettyPhoto) on page load with the following code.
Fancybox
$(document).ready(function(){ $("#lightbox").fancybox({ maxWidth : 700, maxHeight : 548, closeClick : false, }).trigger('click'); });
<a href="http://www.stcloudrox.com/lightbox.html" id="lightbox" class="fancybox fancybox.iframe"></a>
Fancybox w/Cookie (https://github.com/carhartl/jquery-cookie)
function openFancybox() { setTimeout( function() {$('#lightbox').trigger('click'); },100); } jQuery(document).ready(function() { var date = new Date(); var minutes = 30; date.setTime(date.getTime() + (minutes * 60 * 1000)); var visited = $.cookie('visited'); if (visited == 'yes') { return false; } else { openFancybox(); } $.cookie('visited', 'yes', { expires: date }); $('#lightbox').fancybox({ maxWidth : 700, maxHeight : 548, closeClick : false }); });
PrettyPhoto
$(document).ready(function() { $.prettyPhoto.open("image","title","description"); });
Thickbox
$(document).ready(function() { tb_show("", "announcement.html?height=400&width=500"); });
Recent Comments