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 Bigger”
ReMooz for previews on flickr photostream thumbnails, large size.
The Action Happens Here
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.
75 Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
