Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Lightbox - call anywhere
 
allisonj
Jr. Member
 
Total Posts:  2
Joined:  2008-06-17
 

Hi,

I installed Lightbox with the Wiki instructions.  It works well on the product page.  However, how do I call it on other pages in the CMS?

The first time I installed LightBox I did NOT follow the Wiki - and it worked in the CMS - but with a JS error.  I was able to use the following code in the CMS to call the lightbox script.  However, with the new (Wiki) installed Lightbox the code no longer works.

<a href="/shop/skin/frontend/default/default/images/sample1.jpg" rel="lightbox[roadtrip]" title="Add title here">image 1</a>
<a href="/shop/skin/frontend/default/default/images/sample2.jpg" rel="lightbox[roadtrip]" title="Add title here">image 1</a>

Am I missing something very simple? How do I use the LightBox in the CMS?

Thanks.

//
Right after posting I figured it out.  Simple error: the lightbox is in a sub-directory so the link needs to be:

<a href="/shop/skin/frontend/default/default/images/sample1.jpg" rel="lightbox/lightbox[roadtrip]" title="Add title here">image 1</a>

Works well now.

 
Magento Community Magento Community
Magento Community
Magento Community
 
walltoolsllc
Sr. Member
 
Total Posts:  146
Joined:  2008-08-21
 

I am wondering where to start?  I want to use a Lightbox too.  I want to have Lightbox replace the pop up html page to view secondary photos.  How do you do this?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dannyz1984
Sr. Member
 
Avatar
Total Posts:  153
Joined:  2009-04-12
 

the old wiki works with magento 1.3

http://www.magentocommerce.com/wiki/adding_lightbox_to_magento_v2

 
Magento Community Magento Community
Magento Community
Magento Community
 
exerion
Jr. Member
 
Avatar
Total Posts:  8
Joined:  2009-07-01
 

Hi smile

Has anyone got this to work with Easy Lightbox?

I tried the code in the first post with every variation I could think of but it still didn’t work.

Any advice is greatly appreciated.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Federico Vezzoli
Jr. Member
 
Total Posts:  25
Joined:  2009-07-23
 

hey i’m lookin’ for get it work with easylightbox as well.
tryin0 for the last 2 days but nothing.

thanks a lot.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Calamity James
Jr. Member
 
Total Posts:  4
Joined:  2009-07-19
 
exerion - 27 September 2009 07:24 PM

Hi smile

Has anyone got this to work with Easy Lightbox?

I tried the code in the first post with every variation I could think of but it still didn’t work.

Any advice is greatly appreciated.

Hi, I just managed to get this working myself (with Easy Lightbox), after much fiddling about.

On the page you want to add a lightbox to, add this to the Layout Update XML:

<reference name="head">
      <
action method="addCss"><stylesheet>css/easylightbox.css</stylesheet></action>
      <
action method="addItem"><type>skin_js</type><name>js/lightbox.js</name></action>
</
reference>

And add this to the bottom of the page content (the settings on that JavaScript are based off my original config of Easy Lightbox, you may wish to edit them to suit your installation):

<script type="text/javascript">
function 
initLightbox(){
    
new Lightbox({
        fileLoadingImage
'{{skin url="images/lightbox/loading.gif"}}',
        
fileBottomNavCloseImage'{{skin url="images/lightbox/closelabel.gif"}}',
        
overlayOpacity0.8,
        
animate1,
        
resizeSpeed7,
        
borderSize10,
        
labelImage'Image',
        
labelOf'of'
    
});
}


if (Prototype.Browser.IE{
    Event
.observe(window'load', function()//KB927917 fix
        
initLightbox();
    
});
else {
    document
.observe("dom:loaded", function(){
        initLightbox
();
    
});
}
</script>

It took me a bit of searching to find out that it doesn’t initialise the lightbox automatically and therefore needs that bit of JS after the lightbox images so hopefully this will help anyone else trying to find this out!

James smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
karldrei
Jr. Member
 
Total Posts:  6
Joined:  2008-02-17
 
Calamity James - 04 November 2009 02:56 AM

exerion - 27 September 2009 07:24 PM
Hi smile

Has anyone got this to work with Easy Lightbox?

I tried the code in the first post with every variation I could think of but it still didn’t work.

Any advice is greatly appreciated.

Hi, I just managed to get this working myself (with Easy Lightbox), after much fiddling about.

On the page you want to add a lightbox to, add this to the Layout Update XML:

<reference name="head">
      <
action method="addCss"><stylesheet>css/easylightbox.css</stylesheet></action>
      <
action method="addItem"><type>skin_js</type><name>js/lightbox.js</name></action>
</
reference>

And add this to the bottom of the page content (the settings on that JavaScript are based off my original config of Easy Lightbox, you may wish to edit them to suit your installation):

<script type="text/javascript">
function 
initLightbox(){
    
new Lightbox({
        fileLoadingImage
'{{skin url="images/lightbox/loading.gif"}}',
        
fileBottomNavCloseImage'{{skin url="images/lightbox/closelabel.gif"}}',
        
overlayOpacity0.8,
        
animate1,
        
resizeSpeed7,
        
borderSize10,
        
labelImage'Image',
        
labelOf'of'
    
});
}


if (Prototype.Browser.IE{
    Event
.observe(window'load', function()//KB927917 fix
        
initLightbox();
    
});
else {
    document
.observe("dom:loaded", function(){
        initLightbox
();
    
});
}
</script>

It took me a bit of searching to find out that it doesn’t initialise the lightbox automatically and therefore needs that bit of JS after the lightbox images so hopefully this will help anyone else trying to find this out!

James smile

I have done this, but how do you call the image within a cms page??

Used this below but that does not work:

<a href="image.jpg rel="lightbox">image 1</a>

thx
Karl

 
Magento Community Magento Community
Magento Community
Magento Community
 
walltoolsllc
Sr. Member
 
Total Posts:  146
Joined:  2008-08-21
 

Well… I figured out how to install lightbox 2 and finally figured out that it was killing my Bundle Product in IE.  I removed the js and my Bundle Products started to work again in IE.  The Bundle Items worked great in Firefox, Safari and Chrome, but not IE for some reason.

Anyone know the fix to the lightbox code so that Bundle items work?

 
Magento Community Magento Community
Magento Community
Magento Community
 
ondri
Jr. Member
 
Total Posts:  2
Joined:  2008-12-20
 
Calamity James - 04 November 2009 02:56 AM

exerion - 27 September 2009 07:24 PM
Hi smile

Has anyone got this to work with Easy Lightbox?

I tried the code in the first post with every variation I could think of but it still didn’t work.

Any advice is greatly appreciated.

Hi, I just managed to get this working myself (with Easy Lightbox), after much fiddling about.

On the page you want to add a lightbox to, add this to the Layout Update XML:

<reference name="head">
      <
action method="addCss"><stylesheet>css/easylightbox.css</stylesheet></action>
      <
action method="addItem"><type>skin_js</type><name>js/lightbox.js</name></action>
</
reference>

And add this to the bottom of the page content (the settings on that JavaScript are based off my original config of Easy Lightbox, you may wish to edit them to suit your installation):

<script type="text/javascript">
function 
initLightbox(){
    
new Lightbox({
        fileLoadingImage
'{{skin url="images/lightbox/loading.gif"}}',
        
fileBottomNavCloseImage'{{skin url="images/lightbox/closelabel.gif"}}',
        
overlayOpacity0.8,
        
animate1,
        
resizeSpeed7,
        
borderSize10,
        
labelImage'Image',
        
labelOf'of'
    
});
}


if (Prototype.Browser.IE{
    Event
.observe(window'load', function()//KB927917 fix
        
initLightbox();
    
});
else {
    document
.observe("dom:loaded", function(){
        initLightbox
();
    
});
}
</script>

It took me a bit of searching to find out that it doesn’t initialise the lightbox automatically and therefore needs that bit of JS after the lightbox images so hopefully this will help anyone else trying to find this out!

James smile

Thanks for this. You saved me some time smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
msport7
Member
 
Avatar
Total Posts:  41
Joined:  2008-04-05
Atlanta, GA, USA
 

Thanks for posting this James!  Works perfectly on CMS pages!

Calamity James - 04 November 2009 02:56 AM

Hi, I just managed to get this working myself (with Easy Lightbox), after much fiddling about.

On the page you want to add a lightbox to, add this to the Layout Update XML:

<reference name="head">
      <
action method="addCss"><stylesheet>css/easylightbox.css</stylesheet></action>
      <
action method="addItem"><type>skin_js</type><name>js/lightbox.js</name></action>
</
reference>

It took me a bit of searching to find out that it doesn’t initialise the lightbox automatically and therefore needs that bit of JS after the lightbox images so hopefully this will help anyone else trying to find this out!

James smile
 
Magento Community Magento Community
Magento Community
Magento Community
 
Brady
Guru
 
Avatar
Total Posts:  330
Joined:  2007-09-10
Orange County, CA
 

I’ve only tested this in Chrome on Magento 1.3.2.4, but it seems to work fairly well. My only problem is when the Lightbox activates (after I click an image), the image appears at the top of the page, instead of where I am scrolled two on the page. I have to scroll up on the page to see it.

Any idea how to make this relative to where you are on the page?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Brady
Guru
 
Avatar
Total Posts:  330
Joined:  2007-09-10
Orange County, CA
 
Brady - 04 August 2010 04:10 PM

I’ve only tested this in Chrome on Magento 1.3.2.4, but it seems to work fairly well. My only problem is when the Lightbox activates (after I click an image), the image appears at the top of the page, instead of where I am scrolled two on the page. I have to scroll up on the page to see it.

Any idea how to make this relative to where you are on the page?

Got it working. Changed the first line of CSS position to ‘fixed’:

#lightbox{    position: fixed;    left: 0; width: 100%; z-index: 999; text-align: center; line-height: 0;}
 
Magento Community Magento Community
Magento Community
Magento Community
 
Fuzolan
Jr. Member
 
Total Posts:  3
Joined:  2010-06-20
 

to set the postition to fixed instead of absolute ist not sooo nice.
If you have a big box or a the screen is too small this sucks.

I also had a bug:
1. scroll the page down (page must be long enough)
2. refresh
3. click on thumb to show the lightbox

>>> the box is on the wrong place

(tested with firefox)

Here is a fix to use “absolute” as position and without the described bug
(Picture will not load on top of the page -> It will centered on the current view)

File Attachments
lightbox.js  (File Size: 19KB - Downloads: 112)
 
Magento Community Magento Community
Magento Community
Magento Community
 
MagePsycho
Mentor
 
Avatar
Total Posts:  1702
Joined:  2009-06-23
 

Dear All
I have just released an extension which is a collection of jQuery Lightboxes for media gallery which includes popular jQuery lightboxes like:
1> FancyBox
2> PiroBox
3> Lightbox clone

Find more @ :
http://www.magentocommerce.com/magento-connect/MagentoPycho/extension/4979/mpycho_jquery_lightboxes

 
Magento Community Magento Community
Magento Community
Magento Community
 
omarhab
Jr. Member
 
Total Posts:  11
Joined:  2012-03-03
 

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?

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top