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:

PLAIN TEXTexecute this code
JavaScript:
//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'));
//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'));

drag to resize


..and that's all there is to it...

docs | svn