SqueezeBox - Expandable Lightbox (v1.1)
SqueezeBox is an unobtrusive LightBox inspired overlay, for modal boxed content on your site.
It’s a snap to show images but just as easy to use HTML elements, Ajax requests, iFrames, SWF movies and more.
Showcase “From Elements”
Content cloned or adopted from existing Elements.
The Action Happens Here
Content to grab:
I am the clone!
You can easily add elements to your XHTML and show them with a single click. The href points to the id, like usual. You can set the size and other options via link-attribute or during assigning the SqueezeBox.
I also am the clone!
If the content is too big for your box, it will overflow with scrollbars!
Because maybe you show your Terms of Use here.
Or another looong text with a lot of long words.
Simply pop it up in a new box and people have to read it ;-)
Sits so easy and even without extra Ajax request.
Hooray
This message loads when the you enter the site. It shows how to manually "fire" the SqueezeBox opener.
Cloning elements remove all the events, so sometimes grabbing content is a better solution. From here you can link to the clone, which switches the box to the next content.
JavaScript & MooTools
window.addEvent('domready', function() { /** * You can provide preset options here ... if you want. * You can SqueezeBox.assign without calling initialize, but * not if you create the SqueezeBox with SqueezeBox.setContent * (because initialize creates the used elements). */ SqueezeBox.initialize(); /** * Our welcome message, loaded when the site is loaded. * * We search our element by id and set the default content handler * to adopt. Can be only used once, since the element is *moved* inside the box * and deleted afterwards. */ SqueezeBox.open($('demo-target-adopt'), { handler: 'adopt', size: {x: 300, y: 200} }); /** * That CSS selector will find all <a> elements with the * attribute rel="boxed" * and href starting with a #. * * The second argument sets additional options */ SqueezeBox.assign($$('a[rel=boxed][href^=#]'), { size: {x: 200, y: 200} }); });
XHTML Markup
<a href="#demo-target-clone" rel="boxed">Clone me my content in a box!</a> | <a href="#demo-target-clone-2" rel="boxed">More content please!</a> <h5>Content to grab:</h5> <div id="demo-target-clone"> <h5>I am the clone!</h5> <p> You can easily add elements to your XHTML and show them with a single click. The href points to the id, like usual. You can set the size and other options via link-attribute or during assigning the SqueezeBox. </p> </div> <div id="demo-target-clone-2"> <h5>I also am the clone!</h5> <p> If the content is too big for your box, it will overflow with scrollbars! </p> <p> Because maybe you show your Terms of Use here. </p> <p> Or another looong text with a lot of long words. </p> <p> Simply pop it up in a new box and people have to read it ;-) </p> <p> Sits so easy and even without extra Ajax request. </p> </div> <div id="demo-target-adopt"> <h5>Hooray</h5> <p> This message loads when the you enter the site. It shows how to manually "fire" the SqueezeBox opener. </p> <p> Cloning elements remove all the events, so sometimes grabbing content is a better solution. From here you can <a href="#demo-target-clone" rel="boxed">link to the clone</a>, which switches the box to the next content. </p> </div>
This example and the accompanying sources/assets are © 2008-2009 by Harald Kirschner and available under The MIT License. For debugging and profiling the scripts and their markup download Firefox and use addons like Firebug and Web Developer Toolbar.
349 Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
