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.
Keywords:
349 Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
-
Thanks Tom Stone, I only forgot to change the version number, fixed.
-
It's not working in IE7 for Vista. Instead of the images appears the code:
{"presets":{"size":{"x":600,"y":450},"sizeLoading":{"x":200,"y":150},"marginInner":{"x":20,"y":20},"marginImage":{"x":50,"y":75},"handler":false,"target":null,"closable":true,"closeBtn":true,"zIndex":65555,"overlayOpacity":0.7,"classWindow":"","classOverlay":"","overlayFx":{},"resizeFx":{},"contentFx":{},"parse":false,"parseSecure":false,"ajaxOptions":{}},"handlers":{},"parsers":{},"options":{"size":{"x":600,"y":450},"sizeLoading":{"x":200,"y":150},"marginInner":{"x":20,"y":20},"marginImage":{"x":50,"y":75},"handler":false,"target":null,"closable":true,"closeBtn":true,"zIndex":65555,"overlayOpacity":0.7,"classWindow":"","classOverlay":"","overlayFx":{},"resizeFx":{},"contentFx":{},"parse":false,"parseSecure":false,"ajaxOptions":{}},"fx":{"overlay":{"options":{"fps":50,"unit":false,"duration":250,"link":"cancel","property":"opacity","onStart":null},"Implements":[],"property":"opacity","from":[{"value":0.7,"parser":{}}],"to":[{"value":0,"parser":{}}],"time":273,"timer":null,"$chain":[]},"win":{"options":{"fps":50,"unit":"px","duration":750,"link":"cancel","onStart":null}},"content":{"options":{"fps":50,"unit":false,"duration":250,"link":"cancel","property":"opacity"},"property":"opacity","from":[{"value":0,"parser":{}}],"to":[{"value":1,"parser":{}}],"time":276,"timer":null}},"bound":{},"isLoading":false,"isOpen":null,"url":"http://farm3.static.flickr.com/2370/1623259465_2cc4144b4d.jpg","applyTimer":null,"size":{"x":600,"y":450},"showTimer":76622211,"asset":null}
Regards. -
Wow, that is weird ... I can reproduce it and work on a fix.
-
Great stuff... The only problem I'm having is when an image is clicked for the first time (in Safari 3 at least) the loader comes up and never stops. But then if you click the image again, it'll come up fine perfect. Any solution?
You can hopefully see my (modified) dilemma at http://borkurs.com/tests/images.html -
I'll check a bit more in safari, it acts really weird sometimes but I'm sure that its an easy fix when I found the problem.
-
Have you already found a solution to Blake's problem? I'm having the same issue with Safari.
I'm also getting a vertical scollbar when I open the SqueezeBox. -
Just a heads up, I've experienced this in all browsers. I'm also using tinymce 3.2.1.1. Once that js include is removed from the page it works fine.
-
Any news on the solution to this? I'm having the same issue.
-
Getting the same error as Jordi in IE6 where the link brings up the code instead of the expected ajax request. It's not my implementation, as I get the same when I check your demos.
Works beutifully in firefox and safari though! -
Hey, first of all, SqueezeBox is great. However, how can I activate such an iFrame from a flash movie? Is there a way to do that? Thanks in advance.
-
Activate IFrame from Flash ... sure, works. U can call JS from via ActionScript, just like u set an url.
-
Thanks for the reply, of course I know how to trigger an url from flash, however I must have some javascript to do that to give the iframe and class options. However I'm not a js freak or so. I figured out the folowing function I trigger from a flash file. Suprise suprise, it does not work :)
<script type="text/javascript">
function openSqueezeBox(url) {
SqueezeBox.assign($$(url), {
parse: {handler:'iframe',size:{x:840,y:550}}
});
}
</script>
My flash looks like this then:
on (release){
getURL("javascript:openSqueezeBox('http://www.stijlhoogstraten.be')");
} -
No $$ around the url
-
I'm having the same IE problems as above. It's pretty much preventing me from being able to use SqueezeBox on a site I'm developing. Can you give us a hotfix or something? In looking through the code, I can't see anything that should be causing that.
-
I find this problem. I hope it helps you and others!
Line 120:
for (var key in this.parsers) {
if (! this.parsers.filter(Function.type).has(key)) continue;
var content = this.parsers[key].call(this);
if (content) return this.setContent(key, content);
} -
Thanks a lot for this solution Brizz! I'll test it tomorrow and include it, had too much work here to look into it before.
-
I adapted your fix, forgot to use Hash loops, all works now as expected.
-
Sorry about my "ugly unindented code" :)
-
Hello, i've try the Brizz solution and its work ! thx.
But i have an other problem, i'm french and usually use the letter : é à è, but we can't see it in the Box, the are replace by �
Post your comment
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
Although, I'm a bit curious over the changelog that says this is version 1.1 rc1 , but in the actual js-file, the version number is: 1.1 rc0.