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 (No 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