Ajax Requests » SqueezeBox - Expandable Lightbox Showcase

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:

Showcase “Ajax Requests”

Request the content via Ajax.

The Action Happens Here

What is it? | Box with JavaScript

JavaScript & MooTools

window.addEvent('domready', function() {
 
	/**
	 * That CSS selector will find all <a> elements with the
	 * attribute rel="boxed"
	 *
	 * The second argument sets additional options.
	 */
	SqueezeBox.assign($$('a[rel=boxed]'), {
		size: {x: 300, y: 400},
		ajaxOptions: {
			method: 'get' // we use GET for requesting plain HTML (you can skip it, it is the default value)
		}
	});
 
});

XHTML Markup

<a href="what-is.html" rel="boxed">What is it?</a> |
<a href="extended.html" rel="boxed">Box with JavaScript</a>

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.

Keywords:

349 Comments

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

Sort:

Old
New
Best
Hot

Comments 1 – 20 of 349:

First
‹ Prev
Next ›
Last

… reply

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

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

Mike

replied 7 months ago (1 Point) …

Try this:
<a href="javascript:parent.SqueezeBox.close()">(Close box)</td>
… reply

qwerty

replied 7 months ago (1 Point) …

Oh! Thanks a lot!
… reply

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

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

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

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

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

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

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

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

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

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

Mon

replied 8 months ago (1 Point) …

disregard the above, it works now, probably since 3.5 reached official release.
… reply

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

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

Tyrone

said 9 months ago (1 Point) …

progress.addEvent('click', function() {
this.currentProgress.start($random(0, 100));
}.bind(this));

Funny guy, eh??
… reply

digitarald Site Owner

replied 9 months ago (1 Point) …

Good catch, I forgot those debug lines. Stable 3.0 release fixes that ;)
… reply

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.