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.
Showcases
- Flickr Bigger ReMooz for previews on flickr photostream thumbnails, large size.
- Flickr Stream ReMooz for previews on flickr photostream thumbnails, medium size.
- Simple Caption ReMooz on a Flickr Photostream with captions.
Features
- No plugins like Flash or Java needed, no problem with popup blockers
- Unobtrusive behaviour, visitors with disabled JavaScript or old browsers can still click the images to see the full size.
- Simple and intuitive behaviour: loading-indicator, close button and changing icons describe possible interactions.
- No obstrusive modal pop-up: your design and content is still visible (not hidden under the common black lightbox effect).
- Open several instances at one time, e.g. to preview multiple images.
How to use
// Wait for the content ... window.addEvent('domready', { /** * Assigns ReMooz behavior to all anchors with the .remooz class */ ReMooz.assign(); /** * Or assign ReMooz "by hand" */ $$('ul.thumbnails a').each(function(element) { // Constructor, takes the element and options as arguments new ReMooz(element, { centered: true, // Zoom the center of the screen origin: element.getElement('img') // Take the image inside as origin for the zooming element }); }); });
Compatibility
Fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 2+)
Planned
- Support for elements, expandable content handler (via plugins)
- Gallery support including navigation
Sites using it
- Het land van ooit | winkel voor de kleintjes - From Thisconnect
- Anneke & Janneke | Promenade Kapellen (Antwerpen) - From Thisconnect
Requirements
MooTools JavaScript Framework
Download MooTools 1.2 with at least these modules:
- Element.Dimensions
- Fx.Tween
- Fx.Morph
- Selectors
- DomReady (facultative)
Download
- ReMooz.js
- ReMooz.css
- Images (Configure their paths in the CSS)
- closebox.png
- closebox.gif
- remo_bg_e.png
- remo_bg_n.png
- remo_bg_ne.png
- remo_bg_nw.png
- remo_bg_s.png
- remo_bg_se.png
- remo_bg_sw.png
- remo_bg_w.png
- spinner.gif … or use your own spinner animation :)
Changelog
- 1.0.4 (2008-04-22)
- Changed: Removed orphaned code like trash event
- Fixed: Added missing image links for Download
- 1.0.3 (2008-04-17)
- Fixed Dragging for IE
- 1.0.2 (2008-03-28)
- Initial official beta release
- Project page and download
- Shadows for WebKit via CSS
- 1.0.1 (2008-01-16)
- Stable API
- More options and customizations
- Support for captions from title
- IE optimizations for shadow and PNGs
- 1.0 (2007-11-02)
- Initial working version for MooTools 1.2
License
All files are © 2008-2009 by Harald Kirschner and available under the MIT License.
Contact & Discussion
For asking questions, requesting features, filing bugs or contributing other thoughts on this project use the support forum below. Before posting a new question, read through the documentation and the contributed notes for an answer. For problem reports make sure to add enough details like browser, version and a link or the relevant code.
You can contact me for non-support related notes.
Professional Support
I am available for hire if you look for professional and swift help. I can come to your rescue for installation, customization or extending the existing source for your needs.
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 :)