Imagebox
This a jQuery equivalent for Lightbox2. Alternative to image popups that will display images in an overlay. All links that have attribute 'rel' starting with 'imagebox' and link to an image will display the image inside the page. Galleries can by build buy giving the value 'imagebox-galname' to attribute 'rel'. Attribute 'title' will be used as caption.
Keyboard navigation:
- next image: arrow right, page down, 'n' key, space
- previous image: arrow left, page up, 'p' key, backspace
- close: escape
Options:
| border | Integer | mandatory | border width |
| loaderSRC | String | mandatory | path to loading image |
| closeHTML | String | mandatory | path to close overlay image or just plain HTML |
| overlayOpacity | Float | mandatory | opacity for overlay |
| textImage | String | mandatory | when a galalry it is build then the iteration is displayed |
| textImageFrom | String | mandatory | when a galalry it is build then the iteration is displayed |
| fadeDuration | Integer | mandatory | fade duration in miliseconds |
Code sample:
$.ImageBox.init(
{
loaderSRC: 'images/imagebox/loading.gif',
closeHTML: '
'
}
);
Mandatory CSS:
#ImageBoxOverlay
{
background-color: #000;
}
#ImageBoxCaption
{
background-color: #F4F4EC;
}
#ImageBoxContainer
{
width: 250px;
height: 250px;
background-color: #F4F4EC;
}
#ImageBoxCaptionText
{
font-weight: bold;
padding-bottom: 5px;
font-size: 13px;
color: #000;
}
#ImageBoxCaptionImages
{
margin: 0;
}
#ImageBoxNextImage
{
background-image: url(images/imagebox/spacer.gif);
background-color: transparent;
}
#ImageBoxPrevImage
{
background-image: url(images/imagebox/spacer.gif);
background-color: transparent;
}
#ImageBoxNextImage:hover
{
background-image: url(images/imagebox/next_image.jpg);
background-repeat: no-repeat;
background-position: right top;
}
#ImageBoxPrevImage:hover
{
background-image: url(images/imagebox/prev_image.jpg);
background-repeat: no-repeat;
background-position: left bottom;
};