JDZoom - JavaScript Image Magnifier
- Comments:
- 4
- Tags:
Recent Activity
Jesse Donat (donatj)
Readme/LICENSE fixesMerge pull request #1 from bitdeli-chef/master
Add a Bitdeli Badge to README
Add a Bitdeli Badge to README
Bitdeli Chef (bitdeli-chef)
Add a Bitdeli badge to READMEJesse Donat (donatj)
Fixed an issue with cross domain imagesFixed a regression where selector would only accept strings
Restructured Repo per MooTools Forge requirements
Updated README.md
Added Options:
Magnified Position Option Added
options: fixed/float
Cancel Click Option Added
boolean, prevents default on an images anchor
Misc Code Cleanup...
Fixed "endless.com" style added
index.html demo's updated - shows many different
options and settings in action.
Magnified Position Option Added
options: fixed/float
Cancel Click Option Added
boolean, prevents default on an images anchor
Misc Code Cleanup...
Fixed "endless.com" style added
index.html demo's updated - shows many different
options and settings in action.
Added escaping to css url() calls to prevent problems with images with
spaces in file names.
spaces in file names.
Large Rework of Functionality
- Chrome compatability added
- Zoom box to magnified result math corrected
- Image preloaded
- Div now hovers over image rather than replacing
- Selector option added allowing an element, array of elements,
or a string selector to be passed.
- Internet Explorer Compatability fixes.
- Chrome compatability added
- Zoom box to magnified result math corrected
- Image preloaded
- Div now hovers over image rather than replacing
- Selector option added allowing an element, array of elements,
or a string selector to be passed.
- Internet Explorer Compatability fixes.
README.md and .gitignore added
Initial Commit
JDZoom is a MooTools powered hover zoom / magnifier similarly styled to the one featured on Endless.com.
It is supported by IE6+, Firefox 2.5+, Safari 2+ and Chrome
It does not interfere with click though, such it can be used in conjunction with almost any lightbox. In fact by altering the selector when you instantiate it, most lightboxes can be extended with JDZoom without touching the HTML at all. See the advanced demonstration for more details.
JDZoom requires MooTools, and is Compatible with 1.2.5+ and 1.3+
It does not require any components of MooTools More.
Click here for the Github repository.
Example Source
<html>
<head>
<link href="css/jdzoom.css" rel="stylesheet" type="text/css" />
<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/jdzoom.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('load',function() {
var jdz = new JDZoom();
});
</script>
</head>
<body>
<a rel="jdzoom" href="images/venus.jpg"><img src="images/venus_thumb.jpg" /></a>
</body>
</html>| Build | Date | Message |
|---|---|---|
| v0.1 Download | Initial Alpha | |
| v0.9 Download | version 0.9 - nearing release | |
| v0.9.1 Download | version 0.9.1 |
Awesome work.
Thanks for this script....
this need two images .. makes web site slower
Comment by: Jesse G. Donat on
I disagree, and here's why.- Modern browsers have become very good at scaling, especially with the inception of high dpi screens, many images on the web are higher resolution than displayed.
- Two images means you have to actually load two different images into memory.The large version will still need to be attached to the DOM to be viewed. You would want to preload the on page load. You don't want to do it on hover because that would be a bad user experience.
- Two images would eat more bandwidth.