ReMooz (v1.0)
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.
Showcase “Flickr Stream”
ReMooz for previews on flickr photostream thumbnails, medium size.
The Action Happens Here
JavaScript & MooTools
window.addEvent('load', function() { /** * Default options for that one, except the origin. Getting the coordinates for the * <img> element inside allows a correct positioning for the remooz clone-box. * (Mainly becaue the <a> element is not exactly wrapped around the image) */ ReMooz.assign('#demo-photos a', { origin: 'img' }); });
XHTML Markup
<ul class="demo-stream" id="demo-photos"> <li> <a 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 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 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 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 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 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 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-stream { list-style: none; margin: 0; } .demo-stream 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.
75 Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
