Slimbox, a clone of lightbox. How to implement lightbox effect on your site. Tutorial with css, javascript and html
Running ...


Slimbox


  • From Christope Beys'Homepage : Slimbox is a light visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.

  • Slimbox is ready to launch as soon as the document is ready. This means that you don’t have to wait for all images of the page to be loaded before clicking on a link launching the Lightbox effect.
  • You can use html for the caption of the pictures
  • The left and right arrow keys can be used to navigate through images


mootools framework


  • Slimbox requires the mootools framework, at least version 1.1 (version 1.2 for version 1.6 of slimbox). You have to download the modules which are required by slimbox. Open the download page and click on the following elements :


Class : all
Native : all
Element : Element.Event
Window : Window.DomReady, Window.Size
Effects : Fx.Style, Fx.Styles
Effects : Fx.Transitions (only to change default transition effects)

  • If you plan to use the non minified version of slimbox, add 2 more components :

Element : Element.Selectors
Effects : Fx.Elements

  • Under Choose Compression Type, select the default, Yui Compressor. Downlod the javascript. You get a file with a name like this :

mootools-release-1[1].11.js


  • Rename the file mootols-slimbox.js and upload the file into your site


Javascript, Pictures and CSS


  • Download the last version of slimbox. The zip file contains slimbox.js, slimbox.css and the pictures used for labelling the lightbox (closelabel.gif, loading.gif, nextlabel.gif and prevlabel.gif)
  • Upload the pictures into your site
  • If needed, change the style of your Slimbox
  • I just change outlook of links, adding these pseudo-classes :

a:link#lbPrevLink {border-bottom: none; }

a:hover#lbPrevLink {border-bottom: none; }

a:link#lbNextLink {border-bottom: none; }

a:hover#lbNextLink {border-bottom: none; }

a:link#lbCloseLink {border-bottom: none; }

a:hover#lbCloseLink {border-bottom: none; }

  • Upload slimbox.css into your site
  • Open the slimbox.js within a text editor and change eventually these default values (6 lines, near the top of the file) :


resizeDuration: 400,
resizeTransition: false, // default transition
initialWidth: 250,
initialHeight: 250,
animateCaption: true,
showCounter: true


  • Duration is in milliseconds, size is the width and height of initial container, showCounter: false will remove the counter (image k of n)
  • You can define an special Transition Effect (duration and speed) if you have downloaded the FX.Transitions module from mootools.
  • Choose for example : Fx.Transitions.Circ.easeIn or another one from this list
  • Write a comma after every value, except the last
  • Upload slimbox.js into your site


The HTML


  • The javascript to use slimbox is called with these 2 scripts :


<script type="text/javascript"
src="http://YOURSITE/mootools-slimbox.js">
</script>

<script type="text/javascript"
src="http://YOURSITE/slimbox.js">
</script>



The CSS


  • Include the CSS with a link tag : 

<link rel="stylesheet" type="text/css"
href="http://YOURSITE/slimbox.css">


The Links to Activate the Lightbox Effect


  • We can display a set of picture, using [name_of_set] to group the pictures, and rel="lightbox" to activate the lightbox (slimbox) effect :


<a href="URL of big picture-1"
rel="lightbox[name_of_set]"
title="title for pic 1>links</a>

<a href="URL of big picture-2"
rel="lightbox[name_of_set]"
title="title for pic 2>links</a>

<a href="URL of big picture-3"
rel="lightbox[name_of_set]"
title="title for pic 3>links</a>



Using the minified version


  • The provided autoload code block applies Slimbox to links having the rel="lightbox[name of set]" attribute , so that Slimbox acts like Lightbox


Using the non-minified version


  • We can directly call the slimbox function, for example to apply slimbox effect to the link with dtest id :

<script language="Javascript" type="text/javascript">

$('dtest').slimbox({resizeDuration: 200, overlayOpacity: 0.4});

</script>


  • And for a set of picture, to apply the slimbox effect to all the link within a div bloc, class gal :


<script language="Javascript" type="text/javascript">


$$('div.gal a').slimbox({resizeDuration: 200, overlayOpacity: 0.4});

</script>



A Caption with a Link


  • We can use html inside the title attribute of the anchor
  • We just need to use simple quote to define attributes, and &lt; and &gt; for the usual angle brackets
  • An example, using an anchor for the caption :

Anchor

<a href="http://www.schenk-wine.ch"
title="Chateau Allaman"
target="_blank">Chateau Allaman</a>

Title for the html calling slimbox

"&lt;a href='http://www.schenk-wine.ch'
title='Chateau Allaman'
target='_blank'&gt;chateau allaman&lt;/a&gt;"



The Result



Château AllamanDomaine du ManoirChâteau Maison Blanche
Château de VufflensChâteau de VinzelChâteau de Châtagneréaz



More Informations




One Day - One Label - One Wine