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:

Showcase “Single Images”

SqueezeBox for single images from a gallery.

The Action Happens Here

Excerpt from my flickr photostream. © All rights reserved.

JavaScript & MooTools

window.addEvent('domready', function() {
 
	/**
	 * You can run this code as first code to set default options
	 * SqueezeBox.initialize({ ... });
	 */
 
 
	SqueezeBox.assign($$('a[rel=boxed]'));
 
});

XHTML Markup

<ul class="demo-images">
	<li>
		<a rel="boxed" href="http://farm3.static.flickr.com/2215/1675314906_e98e323f23.jpg">
			<img src="http://farm3.static.flickr.com/2215/1675314906_e98e323f23_t.jpg" alt="El Terreno Park" />
		</a>
	</li>
	<li>
		<a rel="boxed" href="http://farm3.static.flickr.com/2370/1623259465_2cc4144b4d.jpg">
			<img src="http://farm3.static.flickr.com/2370/1623259465_2cc4144b4d_t.jpg" alt="Another river in autumn" />
		</a>
	</li>
	<li>
		<a rel="boxed" href="http://farm3.static.flickr.com/2203/1672130582_5cee3503ec.jpg">
			<img src="http://farm3.static.flickr.com/2203/1672130582_5cee3503ec_t.jpg" alt="Night in Palma de Mallorca" />
		</a>
	</li>
	<li>
		<a rel="boxed" href="http://farm3.static.flickr.com/2268/1624148602_c69850e3fc.jpg">
			<img src="http://farm3.static.flickr.com/2268/1624148602_c69850e3fc_t.jpg" alt="Sunny autumn river" />
		</a>
	</li>
	<li>
		<a rel="boxed" href="http://farm3.static.flickr.com/2028/1624143318_d0425a2464.jpg">
			<img src="http://farm3.static.flickr.com/2028/1624143318_d0425a2464_t.jpg" alt="One of the Elbfalls" />
		</a>
	</li>
	<li>
		<a rel="boxed" href="http://farm3.static.flickr.com/2367/1623239563_a7c9737fbc.jpg">
			<img src="http://farm3.static.flickr.com/2367/1623239563_a7c9737fbc_t.jpg" alt="Beautiful Krkonoše" />
		</a>
	</li>
	<li>
		<a rel="boxed" href="http://farm3.static.flickr.com/2216/1624098884_f3e9f3f7ac.jpg">
			<img src="http://farm3.static.flickr.com/2216/1624098884_f3e9f3f7ac_t.jpg" alt="Open air bath in autumn #2" />
		</a>
	</li>
</ul>
 
<div class="notice clear">
	Excerpt from my <a href="http://www.flickr.com/photos/digitarald/">flickr photostream</a>. © All rights reserved.
</div>

CSS Stylesheet

.demo-images
{
	list-style:				none;
	margin:					0;
}
 
.demo-images li
{
	float:					left;
	padding:				5px;
	width:					100px;
	height:					100px;
	text-align:				center;
}

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.

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

discussion by DISQUS 349 Comments

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

Sort:
Comments 1 – 20 of 349:
  • … reply
    Avatar
    dlarah
    said 6 months ago (1 Point) …
    I have a link working that opens an iframe in a squeezebox. I would like to be able to link to this page and have that same squeezebox open onload. Any ideas? Support forums have similar questions with no response. The forums look like an echo chamber to people seeking help. Thanks.
  • … reply
    Avatar
    qwerty
    said 7 months ago (1 Point) …
    I need to close an AJAX window when user clicks on some link.

    What function should I call?
  • … reply
    Avatar
    Mike
    replied 7 months ago (1 Point) …
    Try this:
    <a href="javascript:parent.SqueezeBox.close()">(Close box)</td>
  • … reply
    Avatar
    qwerty
    replied 7 months ago (1 Point) …
    Oh! Thanks a lot!
  • … reply
    Avatar
    Max
    said 7 months ago (1 Point) …
    Hi everybody!

    I need to close an AJAX window after a click on some link.

    What function should I call?
  • … reply
    Avatar
    Gorky
    said 7 months ago (1 Point) …
    please, help to fix this
    This page contains the following errors:

    error on line 8 at column 9: Opening and ending tag mismatch: img line 0 and div
    Below is a rendering of the page up to the first error.

    i get this error in google chrome. i've seen in comments, that you've fixed it for safari, can you tell me how to fix it? sorry for weak english =)
  • … reply
    Avatar
    Name
    said 7 months ago (1 Point) …
    please, help to fix this
    This page contains the following errors:

    error on line 8 at column 9: Opening and ending tag mismatch: img line 0 and div
    Below is a rendering of the page up to the first error.

    i get this error in google chrome. i've seen in comments, that you've fixed it for safari, can you tell me how to fix it? sorry for weak english =)
  • … reply
    Avatar
    Rob V
    said 8 months ago (1 Point) …
    Ok - this may be a really dumb question - but how do I get it to display w/out the close button (X in the upper right) besides just removing the image?
    Im kicking it off w/ this :
    SqueezeBox.open('display_alert', {
    size: {x: 300, y: 200},
    closeBtn: false,
    closable: false
    });
    But it still shows the X.
    Granted w/ the closable set to false - it does nothing, but is there an option to not display it?
  • … reply
    Avatar
    zaxuz 1 Point
    replied 7 months ago (1 Point) …
    you can hide the close button by changing its style in squeezbox.css. Like this:
    #sbox-btn-close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: -15px;
    top: -15px;
    background: url(/images/squeezebox/closebox.png) no-repeat center;
    border: none;
    display: none; /* hide */
    }
  • … reply
    Avatar
    Kevin
    said 8 months ago (1 Point) …
    i think there is a bug in the ajax portion of your script. with Request.HTML the arguments for onSuccess are as follows: responseTree, responseElements, responseHTML, responseJavaScript. you are only accepting the first argument 'resp'. this works for some responses. but if you wrap your ajaxed html in a div...the styles seamed to be stripped from its inner elements.

    my tests responses were:

    <div>

    text IS NOT red

    </div>

    and

    text IS red



    would we maybe want to accept all the arguments for onSuccess and pass the responseHTML to applyContent? that initially seams to fix this problem for me, haven't looked too in depth though.
  • … reply
    Avatar
    Max
    said 8 months ago (1 Point) …
    Hello,
    I use SqueezeBox 1.0rc1 (buildin joomla 1.5.x)
    I cant do ajax request, my code:
    window.addEvent('domready', function() {
    SqueezeBox.initialize({});
    $$('a.modal').each(function(el) {
    el.addEvent('click', function(e) {
    new Event(e).stop();
    SqueezeBox.fromElement(el);
    });
    });
    });

    html:
    click me

    where is error? thanks.
  • … reply
    Avatar
    Kay
    said 8 months ago (1 Point) …
    Is there a way to make the page behind the squeezebox refresh once you close your squeezebox.

    Thanks
  • … reply
    Avatar
    Mon
    replied 8 months ago (1 Point) …
    @kay: yes, do something like the following:
    $$('a[rel=boxed]').each(function(item){
    item.addEvent('click', function(){
    return !SqueezeBox.fromElement(item,
    {
    handler:'iframe',
    onClose:function(){
    window.location.reload();
    }
    });
    });
    });
  • … reply
    Avatar
    Mon
    said 8 months ago (1 Point) …
    Hey, I don't know how relevant this is, as Firefox 3.5 is still not at release stage, but the box won't load in it. It stays at the loading animation. The content loads OK though..
    I am not sure if this is the cause, but firebug reports: "Use of getBoxObjectFor() is deprecated. Try to use element.getBoundingClientRect() if possible."
  • … reply
    Avatar
    Mon
    replied 8 months ago (1 Point) …
    disregard the above, it works now, probably since 3.5 reached official release.
  • … reply
    Avatar
    jan
    said 8 months ago (1 Point) …
    Can I get a content from specific element via this AJAX method? for instance I have a requet from one page (within the same domain) but do not want to retrieve whole page just one div element

    Is this possible?
  • … reply
    Avatar
    mb2000inc
    said 9 months ago (1 Point) …
    Safari is having issues with it... in an effort to get it to play a streaming video hosted on a friend's server, I had to embed a video onto a completely separate page... and call it through the squeezebox.... it works great in IE 7 & FireFox... but Safari is giving me the following error.

    This page contains the following errors:
    error on line 5 at column 24: Opening and ending tag mismatch: root line 0 and div
    Below is a rendering of the page up to the first error.

    Any thoughts?
  • … reply
    Avatar
    Tyrone
    said 9 months ago (1 Point) …
    progress.addEvent('click', function() {
    this.currentProgress.start($random(0, 100));
    }.bind(this));


    Funny guy, eh??
  • … reply
    Avatar
    digitarald Site Owner
    replied 9 months ago (1 Point) …
    Good catch, I forgot those debug lines. Stable 3.0 release fixes that ;)
  • … reply
    Avatar
    Naomi
    said 10 months ago (1 Point) …
    It's works perfectly. Thank you for this fabulous script. I hope the grouped images function will be out a day.
Comments 1 – 20 of 349:

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.

Feed Subscribe Feeds

Developer Resources & Tools

Web Design Agency on Mallorca d/vision