SqueezeBox - Expandable Lightbox (v1.1)

Project SqueezeBox - Expandable Lightbox Showcase 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

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

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.

Share it: Stumble it!Digg This!del.icio.us (134 Posts: )

discussion by DISQUS No Comments

Please use the support forums for discussing the project, asking questions or posting bug-fixes!

Sort:
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last

Post your comment

Please use the support forums for discussing the project, asking questions or posting bug-fixes!


Internet Consultant & Contractor

I'm available to combine forces with you and your team to find the most simple, elegant and convenient web solutions . I await your call.

If you just like my work and want to say Thank You, donate via PayPal or Amazon Wish List.

Developer Resources & Tools