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

Page 1 of 3
new lightbox tutorial in wiki
 
senders
Member
 
Avatar
Total Posts:  49
Joined:  2008-02-26
Germany, Mannheim
 

Hello,

I just want to inform you,

that I have written a short new lightbox tutorial and put it to magento wiki.

In my case the other articles didn’t not work with magento 1.0.

You can find the article here:

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

Any comments are welcome!

Kind regards,

Sebastian
-----------------------------------------------------------

comvos online medien

TYPO3 and Magento commerce

Mannheim, Germany

 
Magento Community Magento Community
Magento Community
Magento Community
 
Otaugames
Sr. Member
 
Total Posts:  101
Joined:  2007-10-07
Troyes, France
 

That’s working fine, thank you for this “How to” smile

Just one thing, when you say :

search for “../images/” in lightbox.css

and replace it with “/skin/frontend/default/default/images/lightbox/”

This url didn’t worked for me, I have had to replace “../images/” by “../images/lightbox/” and then everything worked fine.

 
Magento Community Magento Community
Magento Community
Magento Community
 
sdb
Sr. Member
 
Avatar
Total Posts:  223
Joined:  2007-11-13
coastal California, USA
 

i’m just curious if this would work with lytebox instead of lightbox?

 
Magento Community Magento Community
Magento Community
Magento Community
 
sdb
Sr. Member
 
Avatar
Total Posts:  223
Joined:  2007-11-13
coastal California, USA
 

just a reminder that wikis can change pretty easily. you might want to post the original in the forums here too just in case.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Gui
Guru
 
Avatar
Total Posts:  588
Joined:  2008-03-09
 

I get this error after the wiki:

Fatal error: Call to undefined method Mage_Catalog_Helper_Image::directResize() in /app/design/frontend/default/default/template/catalog/product/view/media.phtml on line 54

on that line is the following code:

<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->directResize(68, 68, 2); ?>" width="68" height="68" alt=""/>

What am I missing?

 
Magento Community Magento Community
Magento Community
Magento Community
 
harry12bar
Sr. Member
 
Avatar
Total Posts:  168
Joined:  2008-01-07
 
Gui - 08 April 2008 11:12 AM

I get this error after the wiki:

Fatal error: Call to undefined method Mage_Catalog_Helper_Image::directResize() in /app/design/frontend/default/default/template/catalog/product/view/media.phtml on line 54

on that line is the following code:

<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->directResize(68, 68, 2); ?>" width="68" height="68" alt=""/>


What am I missing?

Same here, seems V1 files have been updated (maybe).

 
Magento Community Magento Community
Magento Community
Magento Community
 
Gui
Guru
 
Avatar
Total Posts:  588
Joined:  2008-03-09
 

hm. I got it working by keeping the original line instead of the above as stated in the tutorial. I have no idea why since both lines are practically identical.

search for “images/” in lightbox.js and replace it with “/skin/frontend/default/default/images/lightbox/”

If you have installed magento in a sub-directory (standard is “magento") you need to replace it with:
“/magento/skin/frontend/default/default/images/lightbox/”

It works and I couldn’t have done it without your wiki. Thumbs up, tnx!

 
Magento Community Magento Community
Magento Community
Magento Community
 
senders
Member
 
Avatar
Total Posts:  49
Joined:  2008-02-26
Germany, Mannheim
 
Otaugames - 08 April 2008 07:57 AM


This url didn’t worked for me, I have had to replace “../images/” by “../images/lightbox/” and then everything worked fine.

Thanks for your hints.

It depends where you have installed magento. In my case I have installed the skin directoy directly in document root.

But for the how to your given url is much better.
I have changed it.

Thanks

Sebastian

-----------------------------------------------------------

comvos online medien

TYPO3 and Magento commerce

Mannheim, Germany

 
Magento Community Magento Community
Magento Community
Magento Community
 
senders
Member
 
Avatar
Total Posts:  49
Joined:  2008-02-26
Germany, Mannheim
 
Gui - 08 April 2008 11:12 AM

I get this error after the wiki:

Fatal error: Call to undefined method Mage_Catalog_Helper_Image::directResize() in /app/design/frontend/default/default/template/catalog/product/view/media.phtml on line 54

on that line is the following code:

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


What am I missing?

I am sorry.  I did a mistake.
directResize ist another patch which you have to install too.

You should write:

resize(68,68);

instead of “directResize (68, 68,2);”

or all togehter:

<?php foreach ($this->getGalleryImages() as $_image): ?>
   
<li>
     <
a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>">
     <
img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/>
     </
a>
  </
li>
<?php endforeach; ?>

Sebastian

-----------------------------------------------------------

comvos online medien

TYPO3 and Magento commerce

Mannheim, Germany

 
Magento Community Magento Community
Magento Community
Magento Community
 
senders
Member
 
Avatar
Total Posts:  49
Joined:  2008-02-26
Germany, Mannheim
 

Adding Lightbox to magento - V2

checked with Magento 1.0

1. Download Lightbox from:

http://www.huddletogether.com/projects/lightbox2/

Don’t use the current one.
Take this version:
http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.03.3.zip

Because the current one doesn’t work with the prototype version of magento.

2. Copy the lightbox to magento

Create a directory: /js/lightbox

and copy the lightbox.js file to this directory

Copy lightbox.css to /skin/frontend/default/default/css/

Create a diretory /skin/frontend/default/default/images/lightbox/

and copy all images from the lightbox into it.

3. Change image directory location of the lightbox

Open: /skin/frontend/default/default/css/lightbox.css

and

replace:

backgroundtransparent url(../images/blank.gifno-repeat;

with:

backgroundtransparent url(/skin/frontend/default/default/images/lightbox/blank.gifno-repeat;

Replace:

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
with:
#prevLink:hover, #prevLink:visited:hover { background: url(/skin/frontend/default/default/images/lightbox/prevlabel.gif) left 15% no-repeat; }

Replace:

#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
with:
#nextLink:hover, #nextLink:visited:hover { background: url(/skin/frontend/default/default/images/lightbox/nextlabel.gif) right 15% no-repeat; }

Please note:
on my server /skin/ stays under document root.
If you have installed magento into a subdirectory of document root, for example into a directory “magento” you have to write: /magento/skin/…

Open: /js/lightbox/lightbox.js

Replace:

var fileLoadingImage "images/loading.gif"
var 
fileBottomNavCloseImage "images/closelabel.gif";

with:

var fileLoadingImage "../images/lightbox/loading.gif";        
var 
fileBottomNavCloseImage "../images/lightbox/closelabel.gif";

4. Insert javascript and stylesheet into magento

open /app/design/frontend/default/default/layout/page.xml

insert into:

<block type="page/html_head" name="head" as="head">
          ....
</
block>

the following code:

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

5. Insert lightbox into magento product details

Open /app/design/frontend/default/default/template/catalog/product/view/media.phtml

Replace:

<?php foreach ($this->getGalleryImages() as $_image): ?>
  
<li>
     <
a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'scrollbars=yes,width=200,height=200,resizable=yes');return false;">
     <
img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68,68); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
     </
a>
  </
li>
<?php endforeach; ?>

with:

<?php foreach ($this->getGalleryImages() as $_image): ?>
   
<li>
     <
a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>">
     <
img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/>
     </
a>
  </
li>
<?php endforeach; ?>


Thats it!

Any questions?

Feel free to ask!

Sebastian Enders

enders ( at ) comvos.de

-----------------------------------------------------------

comvos online medien

TYPO3 and Magento commerce

Mannheim, Germany

 
Magento Community Magento Community
Magento Community
Magento Community
 
harry12bar
Sr. Member
 
Avatar
Total Posts:  168
Joined:  2008-01-07
 

Thats got it working… cheers all .. Great Mod A+++++

 
Magento Community Magento Community
Magento Community
Magento Community
 
RoyRubin
Enthusiast
 
Avatar
Total Posts:  968
Joined:  2007-08-07
Los Angeles, CA
 

If anyone wants to package this up and release as a Magento Connect extension that would be great!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Tweakmag
Guru
 
Avatar
Total Posts:  307
Joined:  2007-08-31
London, UK
 

I will package this up as an extension shortly smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
Tweakmag
Guru
 
Avatar
Total Posts:  307
Joined:  2007-08-31
London, UK
 

I have packaged this up and uploaded to Magento Connect - it will hopefully go live shortly so then people can test.
Cheers
Adam

 
Magento Community Magento Community
Magento Community
Magento Community
 
senders
Member
 
Avatar
Total Posts:  49
Joined:  2008-02-26
Germany, Mannheim
 
Ajazza - 08 April 2008 02:58 PM

I have packaged this up and uploaded to Magento Connect - it will hopefully go live shortly so then people can test.
Cheers
Adam

Thanks a lot.

I think this will help a lot of people.

I never used magento connect before. I have to look at it smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
senders
Member
 
Avatar
Total Posts:  49
Joined:  2008-02-26
Germany, Mannheim
 

I did some minor changes to the howto.

Some people did not understand what they have to replace in lightbox.js and lightbox.css.

So I have written what to do accurately.

Kind regards,

Sebastian

-----------------------------------------------------------

comvos online medien

TYPO3 and Magento commerce

Mannheim, Germany

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