Release of newer version of jQuery Lightboxes 1.2.0

February 28, 2012  |  3 Comments  |  by Raj (MagePsycho)  |  jQuery, Latest, Magento

Introduction

Magento community is showing great love towards the Magento Extension: jQuery Lightboxes (probably the #1 lightbox extension for Magento e-Commerce), as a result we are on the way to make it much better with lots of new features.
Just we have released a newer version of jQuery Lightboxes i.e. 1.2.0.

Changelog

Version 1.1.0 – 1.2.0
– Tested Compatibility with Magento Version 1.6.2.0
– Upgraded jQuery Version (local + Google CDN) to 1.7.1
– Added Option to include Main Image to lightbox gallery of More Views
– Added Option to change the label for ‘More Views’
– Upgraded FancyBox to version 1.3.4
– Changed the default settings of FancyBox so that it looks even more sexier
– Added new Lightbox Type: PiroBox Extended (advanced form of Pirobox)
– Added new Lightbox Type: prettyPhoto
– Code Refinement

You can download the latest version of it either from
1> Official Site
Or
2> Magento-Connect

Try once and let me know your feedback/suggestions if there’s any.
Thanks a lot for loving this extension!

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

November 4, 2011  |  42 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!!