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 integrate a lightbox for product view? 
 
Noisy Shaun
Jr. Member
 
Avatar
Total Posts:  20
Joined:  2009-03-20
 

Hi fellow Magento-ers.

Have any of you ever integrated a different product viewing method (opposed to Magento’s default zoom method) in the product details page?
I was hoping to implement either fancyzoom or fancybox.

I know its a big question but what file would need to be edited, and what section would I replace?

Thankyou very much for any help.

Regards - Shaun.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Noisy Shaun
Jr. Member
 
Avatar
Total Posts:  20
Joined:  2009-03-20
 

Its cool, got it!

I edited the
frontend/default/blank/template/catalog/product/view/media.phtml
and
frontend/default/blank/template/catalog/product/view.phtml

Sorted!

 
Magento Community Magento Community
Magento Community
Magento Community
 
sjp1170
Member
 
Total Posts:  70
Joined:  2009-01-01
 

Hi

Can your post how you did this please, i have been looking to do the same but got lost in the coding.

Thanks

Steve

 
Magento Community Magento Community
Magento Community
Magento Community
 
Noisy Shaun
Jr. Member
 
Avatar
Total Posts:  20
Joined:  2009-03-20
 
sjp1170 - 25 April 2009 05:59 AM

Hi

Can your post how you did this please, i have been looking to do the same but got lost in the coding.

Thanks

Steve

Hi Steve,

Its my first Magento project and I didn’t have a clue what I was doing so I did it by just blindly bashing around the files, no real process followed , so I hope this description is ok:

The files I edited were:
/app/design/frontend/default/default/template/catalog/product/view.phtml
/app/design/frontend/default/default/template/catalog/product/view/media.phtml

Firstly I deleted the Zoom nonsense, ie the zoom control images/bar and the zoom script from media.phtml.

Then I changed the gallery thumbnail images from a link which will open the original poupup window....
“<a href="#" onclick="popWin(’<?php echo $this-<getGalleryUrl($_image) ?<', 'gallery'," .......  to a standard image link, which links from the thumbnail to the main full size product image:

<a href= "<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>"><?php echo $this-<helper(

The only other thing I did was I had to add the link to the fancyzoom JavaScript file in the document head, and add the "body onload" command to the opening body tag.

I added the links to the javascript files within the <head> </head> tags in the
frontend/default/blank/template/page/2columns-right.phtml file.

I also added the
onLoad="setupZoom();

to the end of the <body tag< like so

<body<?php echo $this-<getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?> onLoad="setupZoom();">

I hope this helps,

As I say this is my first Magento project and I know nowt about PHP and I did this by guesswork, so I can’t remember 100% how i got there, but that’s essentially how I got to the end result!

 
Magento Community Magento Community
Magento Community
Magento Community
 
sjp1170
Member
 
Total Posts:  70
Joined:  2009-01-01
 

Hi

Thanks for replying. I have followed the above but have run into a problem.  The zoom works but only the main product image appears, even if i click one of the gallery images. Is this right?

Steve

 
Magento Community Magento Community
Magento Community
Magento Community
 
Noisy Shaun
Jr. Member
 
Avatar
Total Posts:  20
Joined:  2009-03-20
 

Ah that’s right!
Sorry I meant to say,

I had set it up so that I have no gallery Images.
I only have the Main image available and it is zoomed when clicked.
If you add the same code around the thumbnails they will zoom to the main image too.

-Shaun

 
Magento Community Magento Community
Magento Community
Magento Community
 
ichi
Jr. Member
 
Total Posts:  10
Joined:  2008-06-25
 

the reason, you are getting the main image is the link to the gallery image is wrong.

i would say use this if you don’t want to use lightbox…
http://www.highslide.com/

there is a guide on howto install in magento here.
http://www.silverthemes.com/blog/2009/03/howto-install-highslide-in-magento/

 
Magento Community Magento Community
Magento Community
Magento Community
 
hentun852
Jr. Member
 
Total Posts:  1
Joined:  2009-07-26
 

cool, i have been having the same problem.
this thread helped. thanks.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lancebvs
Sr. Member
 
Total Posts:  95
Joined:  2009-05-11
 

Template Monster also made a community extension which is available in magento connect for lightbox.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Hypergrip
Jr. Member
 
Total Posts:  15
Joined:  2009-03-09
 

Thank you very much for sharing your experiences with fancyzoom with us, helped me a lot.
I tried to solve the problem with gallery images zooming the main picture insted of the gallery ones and came up with this code. It’s more some HACK than an elegant SOLUTION but it works for me right now. Let me know what you think and if it can be made more elegant:

I noticed you can deduce the URL of the full image from the URL of the thumbnail.
This line in app\design\frontend\default\default\template\catalog\product\view\media.phtml

<?php foreach ($this->getGalleryImages() as $_image): ?>
        
<li>
            <
a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
        </
li>
    
<?php endforeach; ?>
generates this code on the website:
<li>
            <
a href="#" onclick="popWin('http://kandeko.com/catalog/product/gallery/id/208/image/371/', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="http://kandeko.com/media/catalog/product/cache/1/thumbnail/56x/5e06319eda06f020e43594a9c230972d/H/P/HPIM9131.JPG" alt="" title="" /></a>
        </
li>
When you take the URL of the thumbnail image and change the “/thumbnail/56x/” to “image” it shows the full image. So I changed the code in media.phtml so that we have two variables; one with the URL of the thumbnail and a second one that has the deduced URL of the full image:
<?php foreach ($this->getGalleryImages() as $_image): ?>
     <?php
        
// Thumbnail Variable
        
$temp_zoom_thumb $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail'$_image->getFile())->resize(56);
        
// Full Image Link
        
$temp_zoom_full str_replace ("/thumbnail/56x/""/image/"$temp_zoom_thumb);
     
?>
        
<li>
        
<?php
            
echo "<a href='$temp_zoom_full'><img src='$temp_zoom_thumb'></a>";
        
?>
        
    
</li>
    
<?php endforeach; ?>
Now the gallery thumbnails on the product page are links to the full image that fancyzoom can use.

As I said before, using str_replace is most likely a hack, not a perfect solution. It would be far more elegant if we could just “ask” Magento for the URL of the full image, but sadly I’m haven’t figured that one out yet. Maybe one of you can paint the rest of us in the right direction?

Best Regards from Germany

/Oliver

 
Magento Community Magento Community
Magento Community
Magento Community
 
LekeFly
Jr. Member
 
Total Posts:  22
Joined:  2009-06-26
 

Could any of you that have FancyBox up and running post your head.phtml and media.phtml? it would be very helpful.. thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
DvornukVladimir
Jr. Member
 
Total Posts:  18
Joined:  2009-09-13
 

Hello here is extension wich work nice
http://www.magentocommerce.com/magento-connect/DvornukVladimir/extension/3678/resizeble_lightbox_fancy_box_

 
Magento Community Magento Community
Magento Community
Magento Community
 
Landis
Jr. Member
 
Total Posts:  19
Joined:  2010-05-20
 

You can\’t get to your website on the \"Visit Website\” link from Magento Connect.  It is just going to localhost.

Maybe repost.

thank you,

 
Magento Community Magento Community
Magento Community
Magento Community
 
MagePsycho
Mentor
 
Avatar
Total Posts:  1702
Joined:  2009-06-23
 

Dear All
I have just released an extension which is a collection of jQuery Lightboxes for media gallery which includes popular jQuery lightboxes like:
1> FancyBox
2> PiroBox
3> Lightbox clone

Find more @ :
http://www.magentocommerce.com/magento-connect/MagentoPycho/extension/4979/mpycho_jquery_lightboxes

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

We created a zoom/lightbox extension out of necessity for our clients that is 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