ReMooz (v1.0)

Project ReMooz Showcase ReMooz is an open-source widget for great looking and unobtrusive inline-pop-ups, powered by MooTools. It enables how your vistors browse through content, such as thumbnail images and HTML. ReMooz features centered or relative-positioned draggable zoomed images, content preloading, fading captions, with plenty of options and is highly configurable: Add a simple image zoom or create a fancy design element for any graphic that needs to be enlarged on your site.

Showcases:

Showcase “Flickr Bigger”

ReMooz for previews on flickr photostream thumbnails, large size.

The Action Happens Here

Excerpt from my flickr photostream. © All rights reserved.

JavaScript & MooTools

window.addEvent('load', function() {
 
	/**
	 * Some options for the large photos.
	 *
	 * The first argument is the argument for $$ (can be an array of elements or a selector)
	 */
 
	ReMooz.assign('#demo-photos a', {
		'origin': 'img',
		'shadow': 'onOpenEnd', // fx is faster because shadow appears after resize animation
		'resizeFactor': 0.8, // resize to maximum 80% of screen size
		'cutOut': false, // don't hide the original
		'opacityResize': 0.4, // opaque resize
		'dragging': false, // disable dragging
		'centered': true // resize to center of the screen, not relative to the source element
	});
 
	/**
	 * Note on "shadow": value can be true, onOpenEnd (appear after resize) and false, to disable shadow
	 * WebKit (Safari 3) uses (great looking) CSS shadows, so it ignores this option.
	 */
 
});

XHTML Markup

<ul class="demo-stream" id="demo-photos">
	<li>
		<a href="http://farm3.static.flickr.com/2215/1675314906_3d7f106c77_o.jpg">
			<img src="http://farm3.static.flickr.com/2215/1675314906_e98e323f23_s.jpg" alt="El Terreno Park" />
		</a>
	</li>
	<li>
		<a href="http://farm3.static.flickr.com/2370/1623259465_a3736ee491_o.jpg">
			<img src="http://farm3.static.flickr.com/2370/1623259465_2cc4144b4d_s.jpg" alt="Another river in autumn" />
		</a>
	</li>
	<li>
		<a href="http://farm3.static.flickr.com/2203/1672130582_5cee3503ec_b.jpg">
			<img src="http://farm3.static.flickr.com/2203/1672130582_5cee3503ec_s.jpg" alt="Night in Palma de Mallorca" />
		</a>
	</li>
	<li>
		<a href="http://farm3.static.flickr.com/2268/1624148602_29138035b5_o.jpg">
			<img src="http://farm3.static.flickr.com/2268/1624148602_c69850e3fc_s.jpg" alt="Sunny autumn river" />
		</a>
	</li>
	<li>
		<a href="http://farm3.static.flickr.com/2028/1624143318_0cb0240b1f_o.jpg">
			<img src="http://farm3.static.flickr.com/2028/1624143318_d0425a2464_s.jpg" alt="One of the Elbfalls" />
		</a>
	</li>
	<li>
		<a href="http://farm3.static.flickr.com/2367/1623239563_f52f28308b_o.jpg">
			<img src="http://farm3.static.flickr.com/2367/1623239563_a7c9737fbc_s.jpg" alt="Beautiful Krkonoše" />
		</a>
	</li>
	<li>
		<a href="http://farm3.static.flickr.com/2216/1624098884_d67c84adfc_o.jpg">
			<img src="http://farm3.static.flickr.com/2216/1624098884_f3e9f3f7ac_s.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-stream
{
	list-style:				none;
	margin:					0;
}
 
.demo-stream li
{
	float:					left;
	padding:				5px;
	width:					75px;
	height:					75px;
	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 (82 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