Interface elements for jQuery - Documentation - Imagebox

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:

example

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;
};

Download now

Interface 1.2 146kb (source files, compressed files)
jQuery 1.1.2 19 kb

Linux tutorials · Dedicated servers