dojox.image.MagnifierLite¶
| Project owner: | ?– |
|---|---|
| since: | V? |
A simple hover behavior for images, showing a zoomed version of a size image.
Introduction¶
dojox.image.MagnifierLite offers an unobtrusive way to add an unstyled overlay above the srcNode image element. The overlay/glass is a scaled version of the src image (so larger images sized down are clearer).
The logic behind requiring the src image to be large is “it’s going to be downloaded, anyway” so this method avoids having to make thumbnails and two http requests among other things.
This is the base class for dojox.image.Magnifier, a dojox.gfx-based extension this portion does not require the dojox.gfx package, but is limited to CSS-based styling.
Examples¶
Declarative example¶
dojo.require("dijit.form.Button");
dojo.require("dojox.image.MagnifierLite");
<p>Programmatic: (destroy() removes this.domNode)<br></p>
<img id="foobar" style="width:585px; height:201px" scale="7" glassSize="185"
data-dojo-type="dojox.image.MagnifierLite"
src="http://www.zelda-infinite.com/games/zelda1/overworld.png" />
<button data-dojo-type="dijit.form.Button" id="foob">
Make It
<script type="dojo/method" data-dojo-event="onClick">
this.setAttribute("disabled", true);
dijit.byId("foobd").setAttribute("disabled", false);
new dojox.image.MagnifierLite({ scale:4.2, glassSize:200 }, "foobar");
</script>
</button>
<button data-dojo-type="dijit.form.Button" id="foobd" disabled="disabled">
Destroy It
<script type="dojo/method" data-dojo-event="onClick">
dijit.byId("foob").setAttribute("disabled", false);
this.setAttribute("disabled", true);
dijit.byId("foobar").destroy(true);
</script>
</button>
@import "{{baseUrl}}dojox/image/resources/image.css";