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!
-
I can't get this to work. Is there something missing??
-
Very pleased. Thank you!
-
Thanks for this project. It works excellent for my needs. I specifically needed something that could scale my images as I have no control over the size of images I want to view. None of the other mootools based lightbox scripts will do that.
-
awesome project; it also works with mootools-created DOMs unlike many other "similar" projects.
anyways, just a suggestion but why not un-hardcode the z-index values ("41" and "42" in ReMooz.js) and make it into optional options with default values instead? (for me, I needed the ReMooz box to be in the 9xx range since I have other elements layered below the ReMooz box but above the main page)
-
Support and discussions moved to http://digitarald.de/forums/. If you already commented it here, please repost your question or bug report in the forum to get support.
-
I would like to be able to open another webpage or even an html element that is hidden in the page, is this possible or is it only to open images?
Thanks!
-
Why do you use versioning in changelog and not in source code?
-
In IE6 field select atop of container image. How fixed this bug ?
-
Can the page be darkened like with SqueezeBox when the image is opened?
-
ReMooz is not modal, so it is not planned. It should provide a seamless user interaction, black backgrounds totally cut the user off.
-
I'm having troubles with this next error "Drag is not defined" seems like theres not a Drag class deifnes anywhere but the ReMooz is using it
-
Thanks 4 the help, It woks now !
-
ReMooz uses Drag.js, it is included in mootools-more. Use the downloader on clientcide if you want a customized version with core and more.
-
ReMooz V1.0 in combination with MooTools1.2.2 needs the Drag - Drag.Move components from the MooTools1.2.2-More set.
Knut
-
this is Basic of using ReMooz for you , if you have problem for using ReMooz try it :
http://www.raterror.com/upload... -
This is very delicious, but there should be an archive with it! Nobody wants to manually download 13 images. :<
Un an unrelated note: Why the cccccaakes is this in a frame‽ *nausea*
-
Hello to all,
I can not start ReMooz, could anyone give me what to do? Thank you
-
Can anyone offer advice on the remooz window showing up underneath select boxes on the page in IE6?
-
hi,
i think with the "How to use" tutorial will it not work... or?
Post your comment
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
Thanks for this cool plugin :)