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

jQuery version’s Lightbox
 
barrmy
Sr. Member
 
Avatar
Total Posts:  102
Joined:  2008-06-03
 

Hi Community

I’m trying to install lightbox according to v2 of the wiki here:
http://www.magentocommerce.com/wiki/adding_lightbox_to_magento_v2

the images are just like in the demo...the zoom on the main image, and when i click on the bottom images they replace the contents on the window..

I believe I’ve done everything right...even checked it over an over...I’m going to state exactly what I did to ensure I didn’t mess up:
(I do have a new skin in folder default/tcskin and it’s setup in the admin console).  Thanks in advance for any help!

Using Magento 1.0.19870.1

----------
**Step 1**
----------

1. downloaded lightbox from
http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.03.3.zip

----------
**Step 2**
----------

2a. copied lightbox.js to /skin/frontend/default/tcskin/js/lightbox

2b. copied lightbox.css to /skin/frontend/default/tcskin/css

2c. copied the images folder from the zip to /skin/frontend/default/tcskin/images/lightbox

----------
**Step 3**
----------

3a. edited /skin/frontend/default/tcskin/css/lightbox.css
replaced: background: transparent url(../images/blank.gif) no-repeat; }

with: background: transparent url(/skin/frontend/default/tcskin/images/lightbox/blank.gif) no-repeat; }

3b. replaced: #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/tcskin/images/lightbox/prevlabel.gif) left 15% no-repeat;

3c. replaced: #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/tcskin/images/lightbox/nextlabel.gif) right 15% no-repeat; }

3d. edited /skin/frontend/default/tcksin/js/lightbox/lightbox.js
replaced: var fileLoadingImage = “images/loading.gif”;
var fileBottomNavCloseImage = “images/closelabel.gif”;

with: var fileLoadingImage = SKIN_URL + “images/lightbox/loading.gif”;
var fileBottomNavCloseImage = SKIN_URL + “images/lightbox/closelabel.gif”;

3e. edited /skin/app/design/frontend/default/tcskin/template/page/html/head.phtml
replaced:
<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>

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>

----------
**Step 4**
----------

4. edited /app/design/frontend/default/tcskin/layout/page.xml
inserted after
<block type="page/html_head" name="head" as="head"> - line 30 AND
<block type="page/html_head" name="head" as="head"> - line 92
<action method="addJs"><script>lightbox/lightbox.js</script></action>
<action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action>

----------
**Step 5**
----------

5. edited /app/design/frontend/default/tcskin/template/catalog/product/view/media.phtml

replaced: <?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; ?>

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Hi barrmy, I got the Lightbox working from the Wiki’s tutorial, however the ‘clse X’ button doesn’t show up in the Configurable product. There is something about the Prototype version’s Lightbox I don’t like, and I ‘feel’ it loads slower than the jQuery version, so I implemented jQuery Lightbox, and everything works fine. Let me know if you want to use jQuery ones, I will post my code here.

 
Magento Community Magento Community
Magento Community
Magento Community
 
barrmy
Sr. Member
 
Avatar
Total Posts:  102
Joined:  2008-06-03
 

the jQuery one seems a lot faster!  if you could please post your code i’d really appreciate it!!

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

OK, first go ahead download the jQuery and Lightbox scripts from the url you posted.

1) One thing to note, jQuery is conflicting with Prototype so you need to use jQuery no conflict mode, and I found that it’s best to place JQuery code in the template where Lightbox is located, another reason for this is, though the no conflict mode solves the problem with Prototype (when jQuery and Lightbox code are placed in the ‘page.xml’), I encountered another problem in the My Cart page, where, under the ‘Estimate Shipping and Tax’, the ‘State/Province’ uses Javascript too (whether it’s Prototype or no I can’t figure), and it stops working (options for selecting state, province and region are gone) soon as I got jQuery Lightbox working (this took me days to figure out JQuery was the culprit)

2) In my case, I use ‘2columns-right.phtml’ for product page, so I have these wrapped in the <head>...<head> and I use absolute path - you can change to relative path if you like

<head
<
script type="text/javascript" src="http://domain.com/js/jquery/jquery-1.2.3.pack.js">  </script>   
<script type="text/javascript" src="http://domain.com/js/jquery/jquery.lightbox-0.5.js">  </script>   

 
<script type="text/javascript">   
        var 
$j jQuery.noConflict();
   
$j(document).ready(function(){  
            $j
('#gallery a').lightBox({fixedNavigation:true});
        
}); 
        
      
</script> 
</head>

You can have the document ready function placed in the ‘media.phtml’ if you prefer. Thought I also mention this just in case it doesn’t work. In my template I also have jQuery Tab implemented, so I actually called up two Tab and Lightbox functions, therefore I am not 100% certain if one ‘ }); ‘ is correct in the above code. If not, try add another one so that it looks like this ‘

$j('#gallery a').lightBox({fixedNavigation:true});
        
}); 
      
});

3) Before we proceed to ‘catalog/product/view/media.phtml’ file to add the Lightbox function, note that I called the ‘#gallery’. Magento default’s div for that section is ‘more-views’ I think. If you prefer, you can keep it the way it is and replace ‘$j(’#gallery a’)’ to ‘ $j(’div.more-views a’)’.

So here is what I got in my ‘media.phtml’

<?php if (count($this->getGalleryImages()) > 0): ?>  
    
    
<!-- start Lightbox gallery -->  
<
div id="gallery">
    <
ul>
<?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(55, 55); ?>" width="55" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />     
                 </
a>   
              </
li>
            
<?php endforeach; ?>
    
</ul>         
</
div>  <!-- end #gallery -->
<?php endif; ?>

4) Now comes the CSS part. I find it easier to copy/paste the CSS code from Lightbox to my stylesheet - in your case, it’s ‘boxes.css’ I presume.

#jquery-overlay {
    positionabsolute;
    
top180px;
    
left0;background#f8f8f2;
z-index90;
    
width100%;
    
height500px;
}
#jquery-lightbox {
    
positionabsolute;
    
top0;
    
left0;
    
width100%;
    
z-index3000;
    
text-aligncenter;
    
line-height0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
    
positionrelative;
    
background#fff;
    
width250px;border5px solid #ddd;
    
height250px;padding20px;
    
margin0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
    
positionabsolute;
    
top40%;
    
left0%;
    
height25%;
    
width100%;
    
text-aligncenter;
    
line-height0;
}
#lightbox-nav {
    
positionabsolute;
    
top0;
    
left0;
    
height100%;
    
width100%;
    
z-index10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
    
width49%;
    
height100%;
    
zoom1;
    
displayblock;
}
#lightbox-nav-btnPrev { 
    
left0
    
floatleft;
}
#lightbox-nav-btnNext { 
    
right0
    
floatright;
}
#lightbox-container-image-data-box {
    
font-size.9em;
    
background#fff;
    
margin0 auto;border2px solid #ddd;
    
line-height1.4em;
    
overflowauto;
    
width100%;
    
padding5px 20px;
}
#lightbox-container-image-data {
    
padding0 10px
    
color#666; 
}
#lightbox-container-image-data #lightbox-image-details { 
    
width68%; 
    
floatleft
    
text-alignleft
}    
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
    
displayblock
    
clearleft
    
padding-bottom1.0em;    
}            
#lightbox-secNav-btnClose {
    
width66px
    
floatright;
    
padding-bottom0.7em;    
}
Thought I mention this, there is copyright info about jQuery Lightbox placed in the CSS file, you may want to keep it if you decided to move the CSS code to boxes.css.

to be continued

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

I think this forum allows only 6000 characters in a post.

Anyway, here is the rest of the section.

5) Now edit the image path in the ‘jquery.lightbox-0.5.js’.
As shown in Step #2, I use absolute path and have the jQuery and lightbox scripts placed in the
‘js/jquery’ folder, and I have the Prev, Next, Close images placed inside Magento default ‘images’ folder in the ‘skin/frontend/default/../../’ - this part is also up to you to decide. All you need to know is where you place your files.

Open up ‘jquery.lightbox-0.5.js, between line #30 - #34, enter the path for the images - again, I use absolute path and is showing you one example:

imageLoading:            'http://domain.com/skin/frontend/default/default/images/lightbox-ico-loading.gif',        // (string) Path and the name of the loading icon

6) All done and you have a Lightbox that loads faster smile

p/s. just a thought, perhaps you can change the title to ‘jQuery version’s Lightbox’ of the sort wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
barrmy
Sr. Member
 
Avatar
Total Posts:  102
Joined:  2008-06-03
 

chinesedream, thank you so much for taking the time to collate this

But, no content displays on the product page, and I get a js error -
Line: 16
Chat 4
Error: ‘jQuery’ is undefined
Code: 0

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

I am most positive it’s working and that I had tried to give detailed info/steps, so my suggestion is, you go through the steps again, read carefully every line of code that I posted, and make sure that your paths for jQuery files linking are correct.

 
Magento Community Magento Community
Magento Community
Magento Community
 
barrmy
Sr. Member
 
Avatar
Total Posts:  102
Joined:  2008-06-03
 

boy do i feel silly

the zip file from the url didn’t have jquery-1.2.3.pack file so that wasn’t present

working like a charm now!  thanks so much!!

 
Magento Community Magento Community
Magento Community
Magento Community
 
pothound
Jr. Member
 
Total Posts:  1
Joined:  2008-07-23
 

Hi Everybody
Just started to work with Magento and love it!

However I followed the instructions for the lightbox on WIKI but no success....
Now the ‘zooming of the image’ is frozen and have some more issues.

Would like to look at a ‘working’ example. Anybody have one?

Thanks a mill!

 
Magento Community Magento Community
Magento Community
Magento Community
 
MagePsycho
Mentor
 
Avatar
Total Posts:  1702
Joined:  2009-06-23
 

Why not using out of the box module for jQuery Lightbox?
http://www.magentocommerce.com/magento-connect/MagePsycho/extension/4979/mpycho_jquery_lightboxes

Thanks

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