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!
