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.
Showcases
- Ajax Requests Request the content via Ajax.
- From Elements Content cloned or adopted from existing Elements.
- IFrame Content Include site content via IFrame.
- Single Images SqueezeBox for single images from a gallery.
- Youtube Flash Inject flash content from Youtube.
Features
- No plugins like Flash or Java needed, no problem with popup blockers
- Unobtrusive behaviour, visitors with disabled JavaScript or old browsers can still navigate through your content.
- Simple and intuitive behaviour: loading-indicator, close button and changing icons describe possible interactions.
- Customizable with a lot of options (controlling Fx, generated markup, etc.) and via external CSS.
How to use
Include SqueezeBox.css and SqueezeBox.js in your site header. Check the CSS file for the correct image paths. Now you control SqueezeBox with JavaScript:
// Wait for the content ... window.addEvent('domready', { /** * Set default options, overrideable from later calls. */ SqueezeBox.initialize({ size: {x: 350, y: 400} }); /** * Assign SqueezeBox to all links with rel="boxed" attribute, the class then reads the "href". */ SqueezeBox.assign($$('a[rel=boxed]')); /** * Open some content manually */ SqueezeBox.open('manual.html'); // handler defaults to "ajax" for urls SqueezeBox.open('http://digitarald.de', {handler: 'iframe'}); // we force the "iframe" handler here ... SqueezeBox.open($('welcome'), {handler: 'adopt'}); // and here we force "adopt" handler });
Check the source for more options, you can also add new behaviours and handlers.
Compatibility
Fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 3+)
Sites using it
- Het land van ooit | winkel voor de kleintjes - From Thisconnect
- Anneke & Janneke | Promenade Kapellen (Antwerpen) - From Thisconnect
Requirements
MooTools JavaScript Framework
Download MooTools 1.2 with at least these modules:
- Element.Dimensions
- Fx.Tween
- Fx.Morph
- Selectors
- JSON
- DomReady (facultative)
Download
Changelog
- 1.1 rc4 (2009-04-23)
- Added: SqueezeBox.open(subject, options), where subject can be an element or an URL.
- Added: Support for evalScripts in ajax handler.
- Changed: Added more widgets to the showcases reflecting the new features.
- 1.1 rc3 (2009-03-12)
- Added: Subtle shadow, via CSS or PNG.
- Added: Option iframePreload (defaults to false): Preload iframe before showing, similar to images.
- Changed: SqueezeBox hides scrollbars now, to prevent flickering/jumping pages.
- Fixed: Fixed endless loading loop for fast loading uncached images.
- Fixed: Empty content after closing to stop playing Swiff movies.
- 1.1 rc2 (2008-04-26)
- Fixed: Missed to add Hash loops instead of for-in for parser and handler.
- 1.1 rc1 (2008-04-26)
- Added: Preventing indirect (not on content) mousewheel/key-down/up actions for smoother behaviour.
- Added: New optional callback closeable allows uncloseable boxes and preventing close events.
- Changed: Ajax and image instance now saved in SqueezeBox.asset for easier clean-up.
- Changed: Added iframeOptions to iframe handler to set additional iframe properties.
- Changed: Removed handlers and parsers from class, converted to Hash, better plugins handling.
- Changed: Smaller marginImage, the maximum margin to screen borders, scales images to fit.
- Fixed: Incorrect named options for additional class-names
- Fixed: Refactored some code parts.
- 1.1 rc0 (2008-02-11)
Official release for MooTools 1.2
- Changed: Some options and methods renamed.
- Fixed: No fixed positions anymore, problems with IE6
- 1.0 pre (2007-02-11)
Initial version for MooTools 1.11
License
All files are © 2008-2009 by Harald Kirschner and available under the MIT License.
Contact & Discussion
For asking questions, requesting features, filing bugs or contributing other thoughts on this project use the support forum below. Before posting a new question, read through the documentation and the contributed notes for an answer. For problem reports make sure to add enough details like browser, version and a link or the relevant code.
You can contact me for non-support related notes.
Professional Support
I am available for hire if you look for professional and swift help. I can come to your rescue for installation, customization or extending the existing source for your needs.
No Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
- First
- ‹ Prev
- Next ›
- Last
- ... want to be the first? Post your comment!
- First
- ‹ Prev
- Next ›
- Last
Post your comment
Please use the support forums for discussing the project, asking questions or posting bug-fixes!