Magento Forum

   
Page 1 of 2
adding lightbox to magento
 
port23user
Jr. Member
 
Total Posts:  19
Joined:  2008-07-16
 

I found the tutorial recently written at http://www.magentocommerce.com/wiki/adding_lightbox_to_magento_v2 to add lightbox to magento and tried doing this (twice).  I followed the instructions exactly, but now when I click the images, it just loads them into the current page.  What do I need to do to fix this?

 
Magento Community Magento Community
Magento Community
Magento Community
 
lisali
Enthusiast
 
Avatar
Total Posts:  888
Joined:  2008-04-28
London, UK
 

Hi,

Did you download Lightbox v2.03.3? That’s the one that works with Magento 1.1.5 and lower. Only if you are using 1.1.6 can you donwload Lightbox 2.04

http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.03.3.zip

Try that and good luck!

 
Magento Community Magento Community
Magento Community
Magento Community
 
perlegrise
Jr. Member
 
Total Posts:  8
Joined:  2008-07-28
 

Hi

Just installed magento 1.1.6 and lightbox 2.04 : exact same issue : the image appears in current page, nothing appends at all
I have been trying different variations : absolute image paths for instance
It still does not work - can someone help please

Denis

 
Magento Community Magento Community
Magento Community
Magento Community
 
lisali
Enthusiast
 
Avatar
Total Posts:  888
Joined:  2008-04-28
London, UK
 

port23user and perlegrise:

Have you turned the store cache OFF in the config? Have you cleared your browser cache? Have you checked the source code to see if the lightbox JS loads? Have you checked the source code to see if the image paths to lighbox (loading, close, nex and previous) are correct?

Good luck!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Voot
Sr. Member
 
Total Posts:  261
Joined:  2008-03-20
Long Beach, CA
 

I was in the same boat, but found the solution:

everything in the Wiki was correct except for the Page.xml part.

instead of adding:

<action method="addJs"><script>lightbox/lightbox.js</script></action>
      <
action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action>

add this instead:

<action method="addItem"><type>skin_css</type><name>css/lightbox.css</name></action>
<
action method="addItem"><type>skin_js</type><name>js/lightbox/prototype.js</name></action>
<
action method="addItem"><type>skin_js</type><name>js/lightbox/scriptaculous.js?load=effects,builder</name></action>
<
action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>

so now my block head looks like this:

<block type="page/html" name="root" output="toHtml" template="page/2columns-left.phtml">

            <
block type="page/html_head" name="head" as="head">
                <
action method="addJs"><script>prototype/prototype.js</script></action>
                <
action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
                <
action method="addJs"><script>prototype/validation.js</script></action>
                <
action method="addJs"><script>scriptaculous/builder.js</script></action>
                <
action method="addJs"><script>scriptaculous/effects.js</script></action>
                <
action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
                <
action method="addJs"><script>scriptaculous/controls.js</script></action>
                <
action method="addJs"><script>scriptaculous/slider.js</script></action>
                <
action method="addJs"><script>varien/js.js</script></action>
                <
action method="addJs"><script>varien/form.js</script></action>
                <
action method="addJs"><script>varien/menu.js</script></action>
                <
action method="addJs"><script>mage/translate.js</script></action>
                <
action method="addJs"><script>mage/cookies.js</script></action>
                <
action method="addCss"><stylesheet>css/reset.css</stylesheet></action>
                <
action method="addCss"><stylesheet>css/boxes.css</stylesheet></action>
                <
action method="addCss"><stylesheet>css/clears.css</stylesheet></action>
                <
action method="addCss"><stylesheet>css/menu.css</stylesheet></action>


                <
action method="addItem"><type>skin_css</type><name>css/iestyles.css</name><params/><if>IE</if></action>
                <
action method="addItem"><type>skin_css</type><name>css/ie7.css</name><params/><if>IE 7</if></action>
                <
action method="addItem"><type>skin_css</type><name>css/ie7minus.css</name><params/><if>lt IE 7</if></action>
                <
action method="addItem"><type>skin_css</type><name>css/lightbox.css</name></action>
                <
action method="addItem"><type>skin_js</type><name>js/lightbox/prototype.js</name></action>
                <
action method="addItem"><type>skin_js</type><name>js/lightbox/scriptaculous.js?load=effects,builder</name></action>
        <
action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>
                <
action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
                <
action method="addItem"><type>js</type><name>varien/iehover-fix.js</name><params/><if>lt IE 7</if></action>

                <
action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
            </
block>

Hope this helps!

 
Magento Community Magento Community
Magento Community
Magento Community
 
lisali
Enthusiast
 
Avatar
Total Posts:  888
Joined:  2008-04-28
London, UK
 

Hello Vutha,

There’s no need to add all those extra JSs. Just adding the lightbox.js as per the Wiki is fine and it works.

 
Magento Community Magento Community
Magento Community
Magento Community
 
port23user
Jr. Member
 
Total Posts:  19
Joined:  2008-07-16
 

I got it working once....then it broke.  I just got it working again.  The tutorial needs some corrections (can somebody do that?):
1. lightbox.js needs to be placed in /js/lightbox/ instead of /skin/frontend/default/default/js/ like the tutorial says
2. You need to check the permissions of the files you upload.  Although this might work out of the box for some people, it didn’t work for me.  I had to make sure all the files I uploaded from lightbox had chmod 644 and all the folders that they were contained in were 755.

The reason I was having problems was that some of the files I uploaded were set to 600.  It tried to load the lightbox.js script but didn’t have the necessary permissions.  Now it’s working great.  Thanks all.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Boz
Jr. Member
 
Total Posts:  13
Joined:  2008-06-17
 

I have a problem with it working in IE 6.0+, it seems to crash the browser (displays an ‘Operation Aborted’ pop-up error). Works fine in every other browser though.

Any solutions?

Boz

 
Magento Community Magento Community
Magento Community
Magento Community
 
Michael Ben-Nes
Jr. Member
 
Total Posts:  15
Joined:  2008-05-06
Rosh Pina, Israel
 

I had the same problem with IE7 ( ‘Operation Aborted’ ) with Magento 1.1.6 & Lightbox 2.04

It was fixed after I downgraded lightbox to ver 2.03

 
Magento Community Magento Community
Magento Community
Magento Community
 
lisali
Enthusiast
 
Avatar
Total Posts:  888
Joined:  2008-04-28
London, UK
 

Magento 1.1.6 and Lightbox 2.04 work just fine for me in IE7.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Michael Ben-Nes
Jr. Member
 
Total Posts:  15
Joined:  2008-05-06
Rosh Pina, Israel
 
lisali - 10 October 2008 07:45 AM

Magento 1.1.6 and Lightbox 2.04 work just fine for me in IE7.

I wont argue on other people experience. All I know is that in my scenario the solution was to replace lightbox 2.04 js file with the corespondent from 2.03

 
Magento Community Magento Community
Magento Community
Magento Community
 
Frederik Krautwald
Member
 
Avatar
Total Posts:  58
Joined:  2007-09-25
Reykjavík, Iceland
 
port23user - 26 September 2008 02:46 PM

I got it working once....then it broke.  I just got it working again.  The tutorial needs some corrections (can somebody do that?):
1. lightbox.js needs to be placed in /js/lightbox/ instead of /skin/frontend/default/default/js/ like the tutorial says

I can confirm that this fixes the problem for Magento 1.1.6 and Lightbox 2.0.4. It works in Firefox 3 and IE 7.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Frederik Krautwald
Member
 
Avatar
Total Posts:  58
Joined:  2007-09-25
Reykjavík, Iceland
 

You should also edit the code in your media.phtml file so titles get escaped, like this:

change:

<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>">
to
<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="lightbox[rotation]" title="<?php echo $this->htmlEscape($_product->getName());?>">

 
Magento Community Magento Community
Magento Community
Magento Community
 
SecretSanta
Sr. Member
 
Total Posts:  79
Joined:  2008-07-09
 

This is the total extent of the code in my /app/design/frontend/default/modern/template/page/html/head.phtml file

getCssJsHtml() ?> getChildHtml() ?> helper('core/js')->getTranslatorScript() ?>

I also checked my /app/design/frontend/default/default/template/page/html/head.phtml file, and it is exactly the same!

Can anyone help?

Callum

 
Magento Community Magento Community
Magento Community
Magento Community
 
Frederik Krautwald
Member
 
Avatar
Total Posts:  58
Joined:  2007-09-25
Reykjavík, Iceland
 
callumbush - 26 October 2008 10:24 AM

This is the total extent of the code in my /app/design/frontend/default/modern/template/page/html/head.phtml file

getCssJsHtml() ?> getChildHtml() ?> helper('core/js')->getTranslatorScript() ?>

I also checked my /app/design/frontend/default/default/template/page/html/head.phtml file, and it is exactly the same!

Can anyone help?

Callum

Sorry, but I have no clue what you are on about. Could you please be more specific about your problem?

 
Magento Community Magento Community
Magento Community
Magento Community
 
SecretSanta
Sr. Member
 
Total Posts:  79
Joined:  2008-07-09
 

Sorry, this is what I mean:

Stage 3 of the instructions says this:

Open: /app/design/frontend/default/default/template/page/html/head.phtml

In head.phtml find

<script type="text/javascript\">
var BLANK_URL = ‘<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>’;
var BLANK_IMG = ‘<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>’;
</script>

replace with

<script type="text/javascript\">
var BLANK_URL = ‘<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>’;
var BLANK_IMG = ‘<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>’;
var SKIN_URL = ‘<?php echo $this->helper('core/js')->getJsSkinUrl('') ?>’;
</script>

However when I look in this file (I’ve checked the modern theme file [I use the modern theme] and the default theme file), this is all that is in there. I had these same issues when I was following the shadowbox tutorial

getCssJsHtml() ?> getChildHtml() ?> helper('core/js')->getTranslatorScript() ?>

I tried pasting the ‘replace with’ code into the file but it breaks my website.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top
Page 1 of 2