Slimbox/Lightbox

We’ve integrated a visual clone of the popular Lightbox JS v2.0 called Slimbox. Slimbox is smaller, more efficient, more convenient and 100% compatible with the original Lightbox v2.

Lightbox allows you to show overlay popups of images on the page you are currently at instead of linking to a new window. It shows a small preloader animation before showing the full image.

You have 2 different ways to use Slimbox/Lightbox. For demonstrating the "YOOtheme" Method, just click image to the right.

1. "YOOtheme" Method

Add a class="lightbox" attribute to any image tag. Our script takes care of everything and will enable the lightbox behavior. It's a quick and simple way to add the lightbox effect to any image.The related popup image filename must have the suffix _lightbox and must be in the same folder as the image. For example:

<img class="lightbox" title="my caption" src="image.jpg" width="240" height="180" />

Optional: Use the title attribute if you want to show a caption.

2. "traditional" Method

Add a rel="lightbox" attribute to any link tag to activate the lightbox.

For example:

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

Optional: Use the title attribute if you want to show a caption.

If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute.

For example:

<a href="image-1.jpg" rel="lightbox[a]">image #1</a>

<a href="image-2.jpg" rel="lightbox[a]">image #2</a>

Try out this feature by clicking on the following links: image #1 and showcase with two images