Integrate shadowbox (alternative of lightbox) 3.0b with Magento

April 14, 2009 - 3:54pm — Yuan Quan

A new version of shadowbox 3.0b relasesed recently, when I was trying to integrate it with Magento, there were some troubles, so I'd like to write down my steps here to help others may have the same situation like me.

There is a wiki article discribed how to "Adding Shadowbox to Magento", but that's for shadowbox 2, which is outdated I think.

Here comes new steps to add latest shadowbox 3.0b to Magento, if you have any questions, please leave a comment so that I may help you:

Step 1:

Download Shadowbox, or you may download the modifed shadowbox package(because we will need to make some modifications in later steps).

Unpack you downloaded files into js/shadowbox-3.0b/ folder:

Put shadowbox under Magento js folder

Step 2:

Open /app/design/frontend/default/flower/layout/catalog.xml (in my exxample the bold Italic text would different from yours, the same as below) in your favourate text editor, find:

    <catalog_product_view>

        <!-- Mage_Catalog -->

        <reference name="root">

            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>

        </reference>

        <reference name="head">

            <action method="addJs"><script>varien/product.js</script></action>

            <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>

Replace is with:

    <catalog_product_view>

        <!-- Mage_Catalog -->

        <reference name="root">

            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>

        </reference>

        <reference name="head">

            <action method="addJs"><script>varien/product.js</script></action>

            <!-- shadowbox javascript -->

            <action method="addJs"><script>shadowbox-build-3.0b/shadowbox.js</script></action>

            <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>

            <!-- shadowbox css -->

<action method="addItem"><type>js_css</type><name>shadowbox-build-3.0b/shadowbox.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>

Step 3:

Insert shadowbox initialization code around line 32 (after ?> tag) in /app/design/frontend/default/flower/template/catalog/product/view/media.phtml, after inserting, the code would be like:

/**

 * Product media data template

 *

 * @see Mage_Catalog_Block_Product_View_Media

 */

?>

<script type="text/javascript">

Shadowbox.init();

</script>

There are more parameters can be used in initialization of shadowbox, please refer to its own usage documentation.

Remove all the lines bellow within this file start from 39 to 65:

<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>

<p class="product-image-zoom">

    <?php

        $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';

        echo $_helper->productAttribute($_product, $_img, 'image')

    ?>

</p>

<p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>

<div class="image-zoom" id="track_outer">

    <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />

    <div id="track">

        <div id="handle"></div>

    </div>

    <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />

</div>

<script type="text/javascript">

    Event.observe(window, 'load', function() {

        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');

    });

</script>

<?php else: ?>

    <?php

        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($_product->getImageLabel()).'" />';

        echo $_helper->productAttribute($_product, $_img, 'image')

    ?>

<?php endif; ?>

After that, add following lines below:

<p class="product-image-zoom">

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

title="<?php echo $this->htmlEscape($this->getImageLabel()); ?>" 

rel="shadowbox[product]">

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(300); ?>" 

alt="<?php echo $this->htmlEscape($this->getImageLabel()); ?>" 

title="<?php echo $this->htmlEscape($this->getImageLabel()); ?>" /></a>

</p>

<p class="a-center" id="track_hint"><?php echo $this->__('Click on above image to enlarge') ?></p>

And then, scroll down to line 72, you will see something like this:

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

Now, we need to add some attribute to make shadowbox working with product gallery images, here will be the new lines after adding:

        <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()) ?>" 

        title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" 

        rel="shadowbox[product]">

                <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(143); ?>"

                alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" 

                title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />

                </a>

Well, all done, if you downloaded my package of shadowbox, all should be working fine now. if not, please take more steps as below:

Step 4:

Right now, if you are using shadowbox library which was downloaded from its own website, you would found that a dark overlay shows up and image does not comes out when you trying to click the product image from the product page at front-end. And if you have firebug, you will see some error message as bellow:

({initialize:(function (config) { ... formatPrice:(function (price) {return formatCurrency(price, this.priceFormat);})}) is not a function
http://your.domain/flower/js/index.php?c=auto&f=,prototype/prototype.js,prototype/validation.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,varien/js.js,varien/form.js,varien/menu.js,mage/translate.js,mage/cookies.js,jquery/jquery-1.2.6.min.js,varien/product.js,shadowbox-build-3.0b/players/shadowbox-img.js
Line 1500

and/or

uncaught exception: Unknown player: img
Line 0

This is because re-declaration of the variable(s) of javascript which is located in /js/varien/product.js, and I can tell you is: this is caused by shadowbox.

The solution is easy, open the file /js/shadowbox-build-3.0b/shadowbox.js, at line around 616, replace:

            each(document.getElementsByTagName('script'), function(s){

                if((path = path_re.exec(s.src)) != null){

                    S.path = path[1];

                    return false;

                }

            });

with:

            each(document.getElementsByTagName('script'), function(s){

                if((path = path_re.exec(s.src)) != null){

                    S.path = path[1].split(",");

                    S.path = S.path[0]+","+S.path[S.path.length-1];

                    return false;

                }

            });

All DONE!

Wish these are useful to you and once again, if you don't know how and where to modify shadowbox file, please download my modifed package.

Magento

Add new comment

Comments

April 18, 2009 - 11:39am — Jason Woo (not verified)

Thanks

Hi, Thanks for the great instructions to combine between shadowbox 3.0 and Magento. it is working fine.

April 18, 2009 - 11:41am — Yuan Quan

you are welcome

I am glad this helps you. :D

May 16, 2009 - 6:17am — Chun (not verified)

Thank you

Thank you for your contribution!
However I am a newbie to PHP, it is quite difficult for me to follow your step
I can successfully install Shadowbox 2.0following the step and files in:
http://c.hadcoleman.com/2008/06/adding-shadowbox-to-magento-ecommerce/
But I am not able to install 3.0 one
: (

May 16, 2009 - 1:43pm — Yuan Quan

What's your problem?

Maybe you can tell me the problems you met so I could help you?
Well, you could continue use Shadowbox 2, but be ware that it is not compatible with IE8, you have to add some tricks to make it work under IE8, please refer to IE8 compatibility for more information.
Good luck!

May 17, 2009 - 6:30pm — Chun (not verified)

for step 3, which file should

for step 3, which file should I edit?

Thank you

May 17, 2009 - 7:14pm — Chun (not verified)

Hi, I can install shadowbox

Hi,
I can install shadowbox 3.0 now
In Step 3, I should edit the file media.phtml
Am I right

I have found a bug, see the following image:
http://i43.tinypic.com/2v1urtg.jpg

Is it a bug or I my installation not correct?Thank you

May 17, 2009 - 11:00pm — Chun (not verified)

Hi, the previous problem is

Hi, the previous problem is fixed, I fix it by doint the following:
in Step 3
This original one started on line 72 should be deleted and replaced, am I right?
Previous I dont delete the original script and just add the script you provide to me and placed after.

I have one more question, in the default Magento, the original thumbnail image size is 56, while the new script you have provided is "resize(143)", should it be revised to "resize(56)" just like the original one?Thank you

May 17, 2009 - 11:26pm — Chun (not verified)

Hi, it is another question I

Hi, it is another question
I want to have an iframe pop up using shadowbox in my product description.
For example , in the product description, there is a link called "click it to load google homepage", when the user clicks it , a shadow box popup and google.com is loaded there.

I placed a tag like this :
<a href="http://www.google.com" rel="shadowbox">click it to load google homepage</a>
however, it seems doesn't work. May I know how I can do it?Thank you very much!

May 19, 2009 - 2:09am — Yuan Quan

For your information

I have one more question, in the default Magento, the original thumbnail image size is 56, while the new script you have provided is "resize(143)", should it be revised to "resize(56)" just like the original one?Thank you

This size you could set whatever you want, if I remember, 143 is my own value :)

I placed a tag like this :
<a href="http://www.google.com" rel="shadowbox">click it to load google homepage</a>
however, it seems doesn't work. May I know how I can do it?

I belive you did not load iframe plugin of shadowbox itself, in the Shadowbox.init() call, I would suggest you to change it to something like: Shadowbox.init(players: ["img", "iframe"]);, please refer to http://www.shadowbox-js.com/options.html#players for mor information.

May 19, 2009 - 3:29am — Chun (not verified)

Thank you Yuan Quan for the

Thank you Yuan Quan

for the iframe opening external website issue, thank you for your suggestion
However, I dont understand how to do it, may you kindly give some more hint?thank you.

I am currently using Shadowbox 2 following the instruction here and open external website by this:
<a href="http://www.google.com" rel="shadowbox">click it to load google homepage</a>
it seems that it have added the shadowbox css and js link in the page.xml (step5), do this initiate the shadowbox in very first moment?
Can this method be used for shadowbox 3.0b?
Thank you very much

May 19, 2009 - 4:48am — Chun (not verified)

I agree with you that the

I agree with you that the iframe plugin of shadowbox is not loaded, as I have tested that shadowbox can be loaded in the description to display image.
In media.phtml, I have changed
<script type="text/javascript"> Shadowbox.init(); </script>
to
<script type="text/javascript"> Shadowbox.init(players: ["img", "iframe"]); </script>

But the inframe is still not loaded successfully
May I know whether I did something wrong?

June 25, 2009 - 5:31pm — lucaiuli (not verified)

I can't make it

I have Magento 1.3.2.1 installed and I want to use shadowbox 3.0b modified. I follow your steps for my skin : app/design/frontend/default/f002
in the layout folder of f002 I found this files:
catalog.xmlcheckout.xmlnewsletter.xmlpage.xmltag.xml
I follow the first two steps and I cange catalog.xml file, but for the step 3 and 4 till the final I can't find the files to edit. Someone said the page.xml it's the one for step 3, but nothing happends.
Plase tell me what files to edit for the step 3 and 4 till final on your tutorial, because you didn't mentioned any file.
Thank you very much.

June 26, 2009 - 11:04am — Yuan Quan

file name for step 3

for my case, the file need to be modified would be: /app/design/frontend/default/flower/template/catalog/product/view/media.phtml
I belive you would find this media.phtml under your f002 folder.

July 8, 2009 - 12:41pm — scravenger (not verified)

Hi, Sorry I dont speak

Hi, Sorry I dont speak English very good, but I understand it, So I write in Spanish.
A mi no me funciona con la version 1.3.2.1., si encentro los archivos en mi directorio raiz y lo he hecho 2 veces, lo he hecho bien con los modified files, pero no me funciona, cuando abro una imagen, se abre en la misma ventana de la tienda y con fondo blanco, Alguien que sepa español podria ayudarme?. Thanks.

July 8, 2009 - 12:54pm — Yuan Quan

FYI

Hi, I try to understand your spanish via google translate.
I believe you have saveral javascript errors, please fix that, and then you might run it smoothly.

February 8, 2010 - 5:08pm — Marco (not verified)

hey, thanks for this tutorial

hey, thanks for this tutorial !!

I have the same problem and I really don't understand why, I did all the steps as shown, but same problem...

If you have an idea... thanks a lot !

February 8, 2010 - 4:35pm — Fred M. (not verified)

ie issue

Hello,
first I thank you for this good tutorial !
But... :) I have some problem to get it works, I've done all you explained and when I click on any product image, the image clicked is open in the same window as normal.. I mean image with a nice white background.
I'm using Chrome, Firefox and IE7, and when I tried on IE7, I saw an error => 'Calendar' is undefined.
Could you tell me what happend please, I don't understand, I think there is a conflict, because when I remove all the changed I did for shadowbox working, the error disappear...
Hope you understand my problem, english is not my language...
Thanks folk !!

February 8, 2010 - 5:31pm — Yuan Quan

Shadowbox.loadSkin('classic', '<?php echo $this->getJsUrl() ?>shadowbox-2.0/src/skin');

Shadowbox.loadPlayer(['html', 'iframe', 'img'], '<?php echo $this->getJsUrl() ?>shadowbox-2.0/src/player');

Swiftcore PHP Development

Category

Record Today

Software

Tech News

Magento

Drupal

User login