How to use jQuery Lightboxes Extension for Cms pages/static blocks?


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 a collection of jQuery lightboxes in one pack: Fancybox, Pirobox & Lightbox clone & many more features.


  • Upgrade proof Module.
  • Checked for Magento Versions 1.3.x –
  • 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 thumbnail image(ref: gallery images)
  • Option to give a custom size for the lightbox Popup Images.
  • Option to include a jQuery file from Google CDN
  • Option to include jQuery file with noConflict().
  • Option to switch over different types of a lightbox.
  • Option to include the lightbox 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:

    'type' : 'iframe',
    'width' : 800,
    'height' : 600

	'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 a lightbox, we don’t want header/footer part of Magento. So you need to choose Layout = empty from the Design tab.

And for Image Gallery:

<a title="Custom title" rel="imageGallery" href=""> <img src="" alt="" /> </a> 
<a rel="imageGallery" href=""> <img src="" alt="" /> </a> 
<a rel="imageGallery" href=""> <img src="" 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 an extension?

Keep rocking with Magento. Cheers!!

42 thoughts on “How to use jQuery Lightboxes Extension for Cms pages/static blocks?”

  1. 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).


  2. 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: (scroll a little bit down to details).

    I use FancyBox and my Magento version is 1.6.0.

    Thank you in advance.

  3. 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.

  4. 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,

  5. 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?

  6. 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.

  7. 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?

  8. 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!

      • PRETTY PHOTO …. works almost the same, but just replacing fancybox with prettyPhoto will not allow you to put multiple images in your gallery 🙁

        change line 1 as follows:

        change line 7 to:

        this will allow you to not only see multiple images in a gallery, but also name it whatever you like…. but use your rel like this….


        the initialization code for the various lightboxes are also different, but these are the key lines you need to get started on the right foot….

  9. 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

    **You can see the footer link open in a lightbox on every page but not on the homepage. Why?

  10. Magento version:

    Fatal error: Class ‘MagentoPycho_Lightboxes_Helper_Data’ not found in /home/world084/public_html/app/Mage.php on line 546

    Any ideas? Please help!

  11. 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!!

  12. 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

  13. 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.

  14. 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?

  15. Could you please explain how I can link to a static block, not a CMS. It’s written in the title but this actually only shows cms pages.

  16. Hi there, I just installed the lightbox extension on my test server (localhost) that share the exact same layout/theme of the online.. all went fine on localhost till now but on the online installation it is not showing on both frontend/backend… any suggestion?
    Keep up with the good job! cheers giac

  17. It opens a lightbox, so thats working. The only thing is that it gave me a 404 error (Magento CE 1.8.1).So how can I display the static block into the lightbox without getting a 404 error in the lightbox?

  18. Plugin isnt working at all. What could be the problem? I cleared all the caches, checked page source to see if the code is included in the head etc, but to no avail. I tried my own settings and exactly as in the example above. No chance. Any other ideas what might be the show-stopper?

    We are using Magento CE 1.9. and Infortis Ultimo 1.7.1 Theme.

    • Hey Arp, did you get this working?

      I too am using We are using Magento CE 1.9. and Infortis Ultimo 1.7.1 Theme and am not getting this to work. I have done everything as instructed and still no joy.

      • Sorry, no luck so far. I am also having huge trouble uninstalling the plugin so if you are running CE 1.9 plus Infortis Ultimo Theme, try to refrain from using this plugin. Infortis creaters said that they will incorporate lightbox support in an upcoming version. Following their changelog might be a good idea.

        • Thanks mate. It caused me large headaches trying to get it to work. But because my client was pressing me to get this done and other features I went WP with a WooCom plugin. But thanks again.

  19. Hi Dev Team

    I too like Arp cannot get tis to call and we share the exact same setup, the link I have sits under an image that is in a cms block. When I click on the image that is inside a block, it takes me to a new page and NO Fancy/Light/Piro box opens, just a new page where the content is as I had created using CMS/Page.

  20. All of you using the Ultimo theme. The theme ships with colorbox for the product pages. Simply include the colorbox.js and css file in your header on all pages or pages where you need it (its currently only loaded on product pages) and call in the colorbox on your images, videos etc.

    No need to install another script or extension. Colorbox is responsive, flexible, highly customizable and works great.

  21. I’m completely unable to get autodimensions to work. I have to set the dimensions as such:

    ‘type’ : ‘iframe’,
    ‘width’ : 800,
    ‘height’ : 600

    Which works great, but I have images of all different sizes, and so I am constantly having scroll bars and I don’t want them at all. AutoDimensions and AutoSize are both set to true, but still I have scrollbars.

    I tried this:

    ‘type’ : ‘iframe’,
    ‘width’ : 800,
    ‘height’ : 600,

    ‘autoScale’: true,
    ‘autoDimensions’: true,

    But it prevents the lightbox from working.

    According to the api, “For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results”

    I can put H & W on my href, but not on the box that opens…

    {z hxef=”{{store direct url=’rosin_press_comparison.jpg’}}” rel=”light”>

    (code broken on purpose({z hxef) to be able to show href without it creating a link)

    I’m either missing something obvious or its just not working in 1.9.1?

    • Also it completely borked my mobile menu. I removed the option to use globally, and my mobile menu returned.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.