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.
Keywords:
75 Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
-
Hi, thank you for this great script !
The problem is that it's quite slow on my website (http://new.lordfpx.com), but I odn't think that comes from remooz, maybe it's a general javascript problemwhen it comes to resize a picture on a webpage, too bad, hopefully, browsers are now faster and faster. -
Hello Harald, thank you for your work on Remooz. I use it on my new website (www.kharon.com). I have a question, how could I replace the double click by a simple click to zoom on a picture ? I think the answer is easy to find but even if I really tried, I wasn't smart enough (I'm just a photographer :))...
-
I want to open a web page when clicking on a link, instead of zooming an image
-
Hi,
How can I open Google Maps?
Thank you! -
ReMooz is awesome. I was wondering if it's possible to get this working with an iframe? I'd like to have an image that when the user clicks on it opens an iframe. I found an old thread on the MooTools forum, but the download link leads to a 404.
Any help would be appreciated. Thanks -
Hey Harald,
In working with your script for a while now there have been many times that I and other programmers in my group have wanted to just have ReMooz 'listen' on a container for a click and act on the tag source passed in that would contain the large image. Thomas wrote the event delegation that is supposedly going to see its way in to Moo 1.3, any chance you can give me a clue on how I might do this in the mean time? Here I'll give you a use case:
Say you have a gallery with tabs of different cities in the world a click on a tab ajaxically brings in that city's images. Currently we have to reassign ReMooz for each and every data retrieval. Since the UL the images are loaded into never changes it would be way better to just have ReMooz listen on it for a click instead of all the instantiation assignments.
This ability to not require instantiation over and over again when new content enters the page would really blow the doors off this script! -
Hey Herald, could you shed a little light on what route one might go to get a div and some inputs in the caption section of ReMooz?
This is what I have written but it fails silently and nothing is created in the caption area, picture still remoozs though...
generateTitle: function() {
var title = new Element('div', {
'id': 'dir_content',
'html': "<label>Enter your address for directions:</label><label>Street<input id="street" type="text"><label>City, State<input id="city_state" type="text"></label><div class="select_button_wrap" id="getdir_button"><div class="select_button">Get Directions!</div></div>"
});
}</label> -
for anyone else who wants this, I got html going for the caption of remooz. Change the last option to the code below. Then put drag option true of false if checks around the drag initialization block and the attach and detach sections that relate to dragging the window in the code (this is due to the fact that dragging will steal input focus, basically look for the word drag in the code and if wrap it)
`code`generateTitle: function(el) {
var title = el.getElement('.caption').get('html');
if (title.length == 0){return false}
var caption = new Element('div', {'html': title});
return (caption);
}`code`
All you need to do from now on is wrap a block of html in an element with the caption class and the html it contains will be placed in the caption.
I also got google maps opening in ReMooz if anyone is interested hit me up. -
"I also got google maps opening in ReMooz if anyone is interested hit me up."
Please share! -
var map;
function bizMapSet(){
map = new GMap2($('gmap_holder'));
map.checkResize();
var bizGLatLng = new GLatLng(bizLatLon.split(',')[0],
bizLatLon.split(',')[1]);
map.setCenter(bizGLatLng, 15);
map.addOverlay(new GMarker(bizGLatLng));
map.addControl(new GSmallMapControl());
map.enableScrollWheelZoom();
mapActive = true;
}
ReMooz.assign('#biz_map a', {
'origin': 'img',
'addClass': 'expando_bounds',
'shadow': 'onOpenEnd', // fx is faster because shadow appears after
resize animation
'resizeFactor': 0.75, // resize to maximum 80% of screen size
'cutOut': false, // don't hide the original
'opacityResize': 0.4, // opaque resize
'dragging': false, // disable dragging
'quickClose': true,
'closeOnClick': false,
'centered': true,
onClose: function() {
$('gmap_holder').setStyle('display', 'none');
},
onOpenEnd: function() {
if(mapActive == false){
this.box.setProperty('id', 'expando_map').grab('gmap_holder');
$('gmap_holder').setStyle('display', 'block');
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps?file=api&v=2.x&key="
+ gmapKey + "&async=2&callback=bizMapSet";
document.body.appendChild(script);
}
if(mapActive == true){
$('gmap_holder').setStyle('display', 'block');
map.checkResize();
}
}
});
it is grabbing the map div element and inserting it into the remooz instance
this is a single instance snippet, but using classes and the js this you
should be able to delegate the remooz instance and pull in what ever map you
want. -
I'm very happy with SlimBox : http://www.digitalia.be/software/slimbox
-
That is nice Peter. I'm happy with SqueezeBox for modal windows and ReMooz for non-modal windows.
-
Hey Herald, if one wanted to make remooz able to zoom a picture in a gallery container where the image in the container changes (think Jon Design's Smooth Gallery) how would one do so? I have remooz working great for instances where images are spit out on a page, but I also have a gallery that rotates images and due to the instantiation needs of the script I could not over come the issue. Any idea how to get the script to accept whatever it finds in a container even when what it contains changes img source?
-
Is there any chance of a jQuery port of this plugin?
-
Hi,
ReMooz doesn't works With the latest Mootools 1.2 and Firefox 3 under Windows XS sp2
Firebug return me this error :
this.element.getTag is not a function
zoom()(Object x=1151 y=778)ReMooz.js (línea 328)
zoomRelative()(Object x=1151 y=778)ReMooz.js (línea 303)
openIframe()()ReMooz.js (línea 250)
open()(a#ifr0a.remooz-element indexdemo#, undefined)ReMooz.js (línea 122)
pass()()mootools...2-core.js (línea 56)
[Break on this error] if (this.element && this.element.getTa...() != 'img') this.box.set('opacity', 0);
-
hello harald
thx for your excellent mootools-work and your clear and concise documentation.
i'm using remooz for a project atm, but i can't seem to get it to work. after the site has loaded and i click on a pic, i get a js-error, saying "Error:Drag is not defined" in ReMooz.js, line 299.
BUT: this does ONLY apply to the official version of mootools 1.2 (downloaded from mootools.net). no matter if it's compressed or not. i tried to download the complete core or just the parts you recommended above - no difference. it also doesnt make a difference which browser i'm using. it simply wont work.
the only mootools-version that DOES seems to work, is the one you are using (js/mootools-trunk.js - version 1.2dev). i downloaded this script from your server and everything works like a charm. unfortunately it's about 5200 lines of code, instead of 3800 lines like the official version, plus it aint got no compression....
any ideas, how to fix this? anyone else, experiencing theses problems? i'd be really happy to hear from you. all the best
- uli
-
The Mootools Core doesn't feature Drag.
You need to download the Mootools More extension, with at least the Drag function: http://mootools.net/more
Good Luck,
Rory -
Hello Herald,
First off, congrats on your marriage (saw your mootools forge forum post),
Trying to get the script working on a slideshow right now. Hope this explanation is clear:
I have a slideshow built on mootools, it has thumbs below it, if you click a thumb it fades a larger img in above it to a css constrained 'medium' size. The image that is faded in in the slideshow is actually much larger. What I wanted to do was enable the user to click the 'medium' sized img above the thumb to supersize it using ReMooz. I am getting no errors and the element that I assigned is in fact getting the class of remooz-element but no remooz action happens onclick.
Here is the HTML section:
<div id="img_gallery">
<div class="remooz-element" id="fullimg">
Dock
<img src="http://wiredcat_userfiles.s3.amazonaws.com/932a58b35d6840d98d0b3d6fa52c9212_full_Dock.jpg">
</div>
Also my instantiation of your script is a bit different because I need to pass it a div not an a tag and I am wanting it to enlarge whatever img src url is currently inside it. Here is my funky initialization:
'var element = $('fullimg');
new ReMooz(element, {
'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
});
});'
If this is not clear let me know and I will email a screen shot, assuming your not too busy to take a glance :)
Thanks Herald</div> -
oops the html got chopped up!
try again:
'<div id="img_gallery">
<div class="remooz-element" id="fullimg">Dock
<img src="http://wiredcat_userfiles.s3.amazonaws.com/932a58b35d6840d98d0b3d6fa52c9212_full_Dock.jpg">
</div>'</div>
Post your comment
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
I use Mootools 1.2.1 !
Does someone knows any similar project ?