Introduction:
There is no doubt that jQuery Lightboxes is one of the best jQuery lightbox extension for Magento’s media gallery(base image & more views). This extension comes with collection of jQuery lightboxes in one pack: Fancybox, Pirobox & Lightbox clone & many more features.
Features:
- Upgrade proof Module.
- Checked for Magento Versions 1.3.x – 1.6.1.0
- Includes FancyBox, PiroBox & Lightbox Clone.
- Flexible Customization for FancyBox, PiroBox & LightBox Clone.
- Option to remove default Zoom Bar.
- Option to give the custom size for the main image.
- Option to give the custom size for the thumnbail image(ref: gallery images)
- Opton to give custom size for the lightbox Popup Images.
- Option to include jQuery file from google CDN
- Option to include jQuery file with noConflict().
- Option to switch over different types of lightbox.
- Option to include the lighbox files globally so that it can be used for custom modules, CMS pages, static blocks etc.
How to use with Cms pages / Static blocks?
After installation of this extension(For installation refer this link), go to:
System > Configuration > MagePsycho Extensions > jQuery Lightboxes
1> Choose the following options:
General Settings:
Enabled = Yes
Lightbox Type = Choose the lightbox type of your choice. We have chosen Fancybox for example.
Configuration - Step1
2> Choose the following options:
JS File Settings
Include jQuery file in = Head
Include Lightbox files in = Head
Include Lightbox files globally = Yes
Lightbox initialization code for global usage = Insert jQuery initialization code here. You can add any no of initialization code here. We have used the following code:
jQuery("a[rel=iframeLink]").fancybox({
'type' : 'iframe',
'width' : 800,
'height' : 600
});
jQuery("a[rel=imageGallery]").fancybox({
'titleShow' : 1,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
Configuration - Step2
3> Demo CMS Page – About US
After backend configuration, we need to create a CMS page and implement the lightbox. We have created a CMS page (About US) as shown below.
For Our Team link we have used following code:
<a rel="iframeLink" href="{{store direct_url="our-team"}}">here</a>
Note: Since the ‘Our Team’ is linked to a CMS Page with identifier = our-team and will be opened in lightbox, we don’t want header/footer part of magento. So you need to choose Layout = empty from Design tab.
And for Image Gallery:
<a title="Custom title" rel="imageGallery" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg"> <img src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg" alt="" /> </a> <a rel="imageGallery" href="http://farm3.static.flickr.com/2591/4135665747_3091966c91.jpg"> <img src="http://farm3.static.flickr.com/2591/4135665747_3091966c91_m.jpg" alt="" /> </a> <a rel="imageGallery" href="http://farm3.static.flickr.com/2561/4048285842_90b7e9f8d1.jpg"> <img src="http://farm3.static.flickr.com/2561/4048285842_90b7e9f8d1_m.jpg" alt="" /> </a>
Note: The value of rel for our team and image gallery is based on initialization code pasted in configuration settings of JQuery Lightboxes.
CMS Page - About Us
4> jQuery Lightboxes in Action:
Our Team in Lightbox
Fancybox - Image Gallery
Isn’t it so cool to have a swiss knife like extension?
Keep rocking with Magento. Cheers!!
Hi,
First of all, I would like to thank you for the jQuery LIghtbox plugin because it works like a charm and it was exactly what we were looking for.
I created another store, running from a subdomain and the jQuery is working fine in the product details page, except for my CMS pages. What do you reckon could be wrong? I didn’t change any settings in the jQuery settings (configuration->jQuery).
thanks!
Hi Chris
If you want to use jQuery Lightboxes for your CMS pages too, you can follow this article.
Please have a depth look.
Thanks
Regards
Hello guys,
OK, you have done a wonderful job. I have already installed and tried all available Lightbox extensions and this is the best by far. Well done.
i have a question for you. I have managed to add image gallery to a block inside product page and I want also to add videos from YouTube that will open in a flexible iframe. With the term “flexible, I mean that the iframe dimensions will be as the dimensions of each video.
Have a look here: http://www.athleticpoint.net/scooters/index.php/mini-micro/mini-micro-blue.html (scroll a little bit down to details).
I use FancyBox and my Magento version is 1.6.0.
Thank you in advance.
Regards.
Hi guys,
Great extension, thanks so much.
I’ve managed to get it working fine on my CMS pages but the only problem is that I don’t want to use it at all on my product pages. Is there any easy way for me to disable it just on these pages?
Thanks for your help.
John
Hello,
This is a great Magento extension. One question. i want to use this to load a CMS page after the users makes an order and loads the Success.phtml page. how would i call the CMS page from the Success.phtml page and open the CMS page using the lightbox effect.. Hope you can help,
as John I’m also wandering if there is an easy way to use the extension only for cms pages and disable it on product pages?
Hi guys, really nice extension. Please can you give me just a tip..I don’t understand how to upload images for the CMS page. With your code all works fine, but I don’t understand how can I upload my images.
I normally use the upload image button in the Mgento HTML editor, but in this way the thumbnails do no fit the size automatically.
Hi, Very nice extension, thank you. Only one question. For some reason the extension has caused the images under more images to hide under the main image, and at the same time, still show “More Images” text. Can you help me with this?
Hello,
Thank you very much for this useful plugin it saved my life.
Would you mind telling me where I could find the Lightbox initialization code for global usage for prettyphoto, the fancybox works like a charm but I like prettyphoto better.
Thanks again!
hi like prettyphoto better too…
just change fancybox to prettyPhoto
here’s more code
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto
Pingback: Magento: Show Vimeo or Youtube Video in Lightbox Popup on CMS Page
I used this for the footer links, which appear on every page but on the homepage the links do not open in a lightbox?? Why do the light boxes work on all my cms pages but not on the home page!? PLEASE HELP QUICK
Thank you
LEDCityUSA.com
**You can see the footer link open in a lightbox on every page but not on the homepage. Why?
Bump!
Magento version: 1.7.0.1
Fatal error: Class ‘MagentoPycho_Lightboxes_Helper_Data’ not found in /home/world084/public_html/app/Mage.php on line 546
Any ideas? Please help!
Hi ,
Thanks for the magento extension
I want details button next to Add to Cart button and in pop-up product and image and details should come.
So can you please help me how i can do this as i am new to magento.
Please Help!!
Does anyone tried this on community 1.7.0.2? Does it work well? Thanks a lot!
Hello!
Help please! With did everything as here it is written, but at me gives out a mistake:
;(function(b){var m,t,u,f,D,j,E,n,z,A,q=0,e={},o=[],p=0,d={},l=[],G=null,v=new Image,J=/\.(jpg|gif|png|bmp|jpeg)(.*)?$/i,W=/[^\.]\.(swf)\s*$/i,K,L=1,y=0,s=”",r,i,h=false,B=b.extend(b(“”)[0],{prop:0}),M=b.browser.msie&&b.browser.version<7&&!window.XMLHttpRequest,N=function(){t.hide();v.onerror=v.onload=null;G&&G.abort();m.empty()},O=function(){if(false===e.onError(o,q,e)){t.hide();h=false}else{e.titleShow=false;e.width="auto";e.height="auto";m.html('The requested content cannot be loaded.Please try again later.’);
Uncaught TypeError: Cannot call method ‘hide’ of undefined
Hi,
I am following this above example and it works perfectly but can I trigger a click event?
I would like the lightbox to open by default when we arrive to the page without people having to click a link.
I try to add a piece of code like: $(‘#link’).trigger(‘click’);
But I think I am breaking the flow and calling this code before the fanzybox script has been excecuted even if I add $(document).ready()…
Where should I put a trigger event?
Thank you.
Oh I think I figured it out. I made a call directly from the admin panel where I was setting the lightbox.
I’ve installed the module and I’d like to link to the lightbox from an area on an image map, instead of a text link. Is there are way to do that?
Hi,
First of all thanks for this great plug in. Really useful for any mangento store. I found a bug for IE8. If I use your plugin the IE8 is hanging a while. This is a fancybox problem. But even if I change all paths in css to static paths it does not work. Does someone experience this es well?
Thanks.
Hans