Magento – Shopping Cart

Lightbox down:

• lightbox.js – the important stuff
• lightbox.css – basic style and tricky PNG support
• overlay.png – 80% opacity, black tile used to create shadow
• loading.gif – mock status bar used in examples above
• close.gif – ‘X’ graphic placed in top-right corner

How to Use:

1. Include lightbox.js in your header.

<script type=”text/javascript” src=”lightbox.js”></script>

2. Add rel=”lightbox” attribute to any link tag to activate the lightbox. For example:

<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>

Customizing:
1. You can use CSS to style the image container. Here is the code used in the examples above:

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }

2. To create the ‘shadow’ effect over the page, you’ll need to use a PNG file and some extra CSS. The CSS is a bit messy thanks to IE’s unorthodox support of PNG transparency:

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”overlay.png”, sizingMethod=”scale”);
}

3. If you would like to show the user a ‘loading’ graphic, like the animated progress bar in the examples above, specify its location at the top of the lightbox.js file.

var loadingImage = ‘loading.gif’;

4. In the same vein, if you would like to use a ‘close button’, like the ‘X’ graphic in the examples above, specify its location at the top of the lightbox.js file.

var closeButton = ‘close.gif’;