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" MethodAdd 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" MethodAdd a rel="lightbox" attribute to any link tag to activate the lightbox.
<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.
<a href="image-1.jpg" rel="lightbox[a]">image #1</a>Try out this feature by clicking on the following links: image #1 and showcase with two images