Sonntag, 11. März 2012

Linktipp: Javascript Lupe magnify

Das Javascript "magnify" erlaubt dem Leser eine Lupe einzuschalten und Bilder mit dieser Lupe vergrößert zu betrachten. Homepage: http://www.jnathanson.com/index.cfm?page=jquery/magnify/magnify




Was man tun muss, ist ein großes und ein kleines Bild hochladen und das kleine mit dem großen Bild verlinken. Dabei bekommt der Link eine eigene ID. Ein Javascript-Schnipsel sorgt dafür, dass der Link sich nicht als normaler Link auswirkt, sondern als Lupe.

Schreibeweise:

Basic html configuration::
<a href="path/to/larger/image.jpg" id="example1"> (hier der Pfad zum großen Bild)
   <img src="path/to/smaller/image.jpg">                  (hier das kleine Bild)
</a>


Javascript

default settings:
$(document).ready(function() {
     $("#example1").magnify();
}

Der Magnifier ist zwar in jüngster Zeit nicht weiterentwickelt, scheint aber auch im aktuellen Firefox tadellos zu funktionieren.

Das wäre natürlich eine gute Möglichkeit für mich, die Bilder im Regensburger Tagebuch en detail zu präsentieren.

Hier noch ein Auszug:

To use customized settings: pass in arguments in an object with key/value pairs. The available parameters are described below. See example 2 above as an example of passing in custom settings.
Param Type Default Description
lensWidth integer 100 sets lens width
lensHeight integer 100 sets lens height
showEvent string 'mouseover' event which shows magnified image
hideEvent string 'mouseout' event which hides magnified image
stagePlacement string 'right' may be 'right' or 'left', determines placement of stage
preload boolean true if set to true, magnified will be loaded when page is loaded; if false, magnified image will be loaded on show event
loadingImage string empty string path to loading image (ajax spinner) - if left empty, "Loading..." will appear over small image
stageCss object empty object additional style properties for stage
lensCss object empty object additional style properties for lens
onBeforeShow function empty function function to run before magnified image is shown
onAfterShow function empty function function to run after magnified image is shown
onBeforeHide function empty function function to run before magnified image is hidden
onAfterHide function empty function function to run after magnified image is hidden




Download

jquery.magnify-1.0.2.js (13K)
jquery.magnify-1.0.2.pack.js (8K)
jquery.magnify-1.0.2.min.js (10K)

  © Blogger template 'Fly Away' by Ourblogtemplates.com 2008

Back to TOP