Slimbox is awesome and we wanted to use it, but there were a few things I wanted to change about it:

• It should be a class
• You should be able to interact with the options without editing the script itself
• I wanted to have the css assets added to the page automatically

So I made these changes and checked it in. Here’s a quick example of what you can do:

individual images:

sets:

You can also create a set in real time:

//let's create a bunch of images here on the fly
for(var i = 1; i < 5; i++) {
  $('slimboxHolder').adopt(
    new Element('a').setStyle('cursor','pointer').setProperties({
      href:'/wiki/slimbox/image-'+i+'.jpg',
      rel: 'anotherLightBoxSet[set2]'
    }).adopt(
      new Element('img').setProperty('src','/wiki/slimbox/thumb-'+i+'.jpg').setStyle('margin', 2)
    )
  );
}
//and add a lightbox
new Lightbox({ relString: 'anotherLightBoxSet' }, $('slimboxHolder').getElements('a'));

..and that’s all there is to it…

docs | svn

This entry was posted on Saturday, June 16th, 2007 at 11:01 pm and is filed under 3rd Party Libraries, Widgets. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.