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

November 4, 2011  |  33 Comments  |  by Raj (MagePsycho)  |  Javascript, jQuery, Magento

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

Posted in Javascript, jQuery, Magento and tagged , . Bookmark the permalink.

About Raj (MagePsycho)

Raj, the guy behind MagePsycho is a Zend PHP5 Certified Engineer, Magento Certified Developer, Magento Moderator / Freelancer with specialization in web applications (CMS, E-Commerce, ERP etc.). Catch him on: Twitter: @magepsycho Skype: magentopycho
  • Chris

    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!

    • http://www.magepsycho.com MagePsycho

      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

  • http://www.athleticpoint.net/scooters Resurfacer

    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.

  • John

    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

  • paul(uk)

    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,

  • venz

    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?

  • Andrea

    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.

  • http://www.ebrewsupply.com Ryan Gray

    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?

  • Juan

    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!

    • http://one.ie Anthony O Connell

      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

      • Duncan Irvine

        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:
        jQuery(“a[rel=iframeLink]“).prettyPhoto({

        change line 7 to:
        jQuery(“a[rel^='prettyPhoto']“).prettyPhoto({

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

        rel=”prettyPhoto[YourGalleryName]”

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

  • Pingback: Magento: Show Vimeo or Youtube Video in Lightbox Popup on CMS Page

  • http://ledcityusa.com Omar

    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?

    • http://Ledcityusa.com Omar

      Bump!

  • eduardo

    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!

  • Abraar

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

  • Michel

    Does anyone tried this on community 1.7.0.2? Does it work well? Thanks a lot!

  • http://eminterior.ru/index.php/about Dmitriy

    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

  • Elodie

    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.

    • Elodie

      Oh I think I figured it out. I made a call directly from the admin panel where I was setting the lightbox.

  • http://www.yellowleg.com Aashish

    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?

  • Golive

    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

  • http://Inlocalserver Vijay Amirtharaj

    This plugin working great..Thanks..Then
    I want pagination for lightbox images…
    Pls help me….

  • http://pcfacil.pt Bruno

    My images dont zoom and i follow the tutorial and when i go to portefolio i see the images but when i click they dont zoom

  • Stefan

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

    • Magento Developer

      Same concept will work for static block as well. Try once and let us know if you have any issues.

      • suraj

        hi its not working probably its conflicting with other jqueries available on same page so help me pls

  • siaki46

    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

  • Xu Bi

    Please give me an example with static block, I write like this:

    Shopping Online

    with shoppingonline is an Static block’s ID, but it seem open new page with 404 error.

    • Montu Jain

      May be JQuery not include propely.. it’s work for me

  • http://www.henkvalk.nl Henk

    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?

  • http://www.henkvalk.nl Henk

    Now I know… Instead of creating a static block, you must create a cms page without layout on design tab.

  • http://kiwistore24.de Arp

    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.