Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

How do I replace the main image in zoom with lightbox? 
 
thomasmore
Sr. Member
 
Total Posts:  80
Joined:  2008-10-21
 

The wiki only shows you how to do it for the gallery and not the image in the zoom box itself.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jemoon
Sr. Member
 
Avatar
Total Posts:  128
Joined:  2008-09-30
Gdansk, Poland
 

Hi,
Change this code in app/design/frontend/default/your_style/template/catalog/product/view/media.phtml:

<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<class="product-image-zoom"><img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></p>
<
class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture'?></p>

<
div class="image-zoom" id="track_outer">
    <
img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?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') ?>" class="btn-zoom-in" />
</
div>
<
script type="text/javascript">
    
Event.observe(window'load', function() {
        product_zoom 
= new Product.Zoom('image''track''handle''zoom_in''zoom_out''track_hint');
    
});
</script>
<?php 
else: ?>
    
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
<?php endif; ?>
into this code:
<?php // if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<!-- <class="product-image-zoom"><img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></p>
<
class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture'?></p>

<
div class="image-zoom" id="track_outer">
    <
img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?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') ?>" class="btn-zoom-in" />
</
div>
<
script type="text/javascript">
/*    Event.observe(window, 'load', function() {
        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
    }); */
</script> -->
<?php // else: ?>
    
<a href="<?php echo $this->helper('catalog/image')->init($_product, 'image');?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></a>
    <
class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture'?></p>
<?php // endif; ?>
Of course you will lose the ability of zooming the base image.
 
Magento Community Magento Community
Magento Community
Magento Community
 
thomasmore
Sr. Member
 
Total Posts:  80
Joined:  2008-10-21
 

Thanks. It worked. Interestingly, I had to switch to the older lightbox 2.03. Before, 2.04 was working fine.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jemoon
Sr. Member
 
Avatar
Total Posts:  128
Joined:  2008-09-30
Gdansk, Poland
 

Hi,
It’s strange - for me it works with 2.04 :/

 
Magento Community Magento Community
Magento Community
Magento Community
 
flzysh
Member
 
Total Posts:  62
Joined:  2008-11-15
Casco, Maine
 

Hello jemoon, thanks for pointing me here.

Could I enable Lightbox for only the double click of the main image? Meaning the zoom ability will still be available?

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
jemoon
Sr. Member
 
Avatar
Total Posts:  128
Joined:  2008-09-30
Gdansk, Poland
 

Hi,
dashnu I think that it is possible but I couldn’t manage to do this - there are some problems when it becomes to cooperation between zoom and lightbox script :/

 
Magento Community Magento Community
Magento Community
Magento Community
 
flzysh
Member
 
Total Posts:  62
Joined:  2008-11-15
Casco, Maine
 

fair enough thanks for the reply!

 
Magento Community Magento Community
Magento Community
Magento Community
 
margo123
Jr. Member
 
Avatar
Total Posts:  5
Joined:  2008-11-26
United Kingdom
 

downgrade to lightbox 2.0.3

 
Magento Community Magento Community
Magento Community
Magento Community
 
fegizii
Sr. Member
 
Total Posts:  160
Joined:  2009-01-21
 

I followed teh above instructionns but I get: Error: Undefined variable: _product on line 34 in media.phtml

Runnign Mag version 1.21

Anybody know how to fix this?

 
Magento Community Magento Community
Magento Community
Magento Community
 
jeanenz
Jr. Member
 
Total Posts:  10
Joined:  2009-02-27
 

I added lightbox to my site on the main image.  I have large base images - about 1500 x 1500 - and wanted the images to only fill the screen - no larger.  I found this post:
http://blog.hma-info.de/2008/04/09/latest-lightbox-v2-with-automatic-resizing/
and it works! The image fills the screen, no scrolling necessary.

 
Magento Community Magento Community
Magento Community
Magento Community
 
moofster
Jr. Member
 
Total Posts:  28
Joined:  2009-03-07
Scotland
 

Works perfectly for me every time :D thanks a lot for sharing this.

Used it 8 times without hiccup.

 
Magento Community Magento Community
Magento Community
Magento Community
 
tinnud
Member
 
Total Posts:  37
Joined:  2008-12-10
UK
 

There’s a free extension that makes the whole process much easier… I’ve installed it on my site and it works brilliantly grin

http://www.magentocommerce.com/extension/1487/magento-easy-lightbox

...and here it is on my site: http://www.tinnud.com/games-consoles/playstation-3/playstation-3-160gb-console.html

 
Magento Community Magento Community
Magento Community
Magento Community
 
MagicToolbox
Jr. Member
 
Avatar
Total Posts:  21
Joined:  2008-08-13
London, UK
 

We offer 6 different Magento modules for zooming images. Try these 3 for example:

Zoom to the side: http://www.magictoolbox.com/magiczoom_magento/
Lightbox zoom: http://www.magictoolbox.com/magicthumb_magento/
Zoom into existing image: http://www.magictoolbox.com/magictouch/

Contact us for free technical support if you have any questions.

 
Magento Community Magento Community
Magento Community
Magento Community
 
stuger71512001
Jr. Member
 
Total Posts:  3
Joined:  2008-10-16
 

There ‘s great alternative lightbox zoom.
See http://www.magentocommerce.com/wiki/adding_omviewer_to_magento_v1

Image Attachments
screenshot_magento.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
redstage
Sr. Member
 
Avatar
Total Posts:  173
Joined:  2009-12-04
Hoboken, NJ
 

We’ve put out a really powerful zoom that also allows for a lightbox for farther enlarge. 

We created one out of necessity for our clients to be feature rich and bug free. We’re releasing it to everyone as Product Zoom PRO.  It allows for multiple views, instant main image swapping with other views, hover-based magnification, lightbox enlarge, and our new Redstage SuperZoom, which allows customers to change magnification strength with the scroll wheel.  And it’s the only one we’ve ever used on a real world site that actually works properly in Chrome.

If you’re interested, check it out here: http://store.redstage.com/product-zoom-pro.html

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top