Image Zoom mit Javascript
Es gibt viele Jquery Plugins welche eine Image Zoom bereitstellen. Aber keine davon funktioniert einwandfrei.
Die beste Lösung ist wohl das Seadragon von Microsoft. Ihr müsst einmal euer Bild hinaufladen und schon könnt ihr das Seadragon verwendet.
So könnte schon euer Bild aussehen:<br>
Mit Hilfe folgenden Codes wird sowohl das uploaden sowie die Ausgabe bereits implementiert:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <script type="text/javascript"> Seadragon.Strings.setString('Tooltips.Home', 'Ausgangsgröße wiederherstellen'); Seadragon.Strings.setString('Tooltips.FullPage', 'Vollbildmodus ein/aus'); Seadragon.Strings.setString('Tooltips.ZoomIn', 'Vergrößern (auch mit Mausrad möglich)'); Seadragon.Strings.setString('Tooltips.ZoomOut', 'Verkleinern (auch mit Mausrad möglich)'); Seadragon.Config.imagePath = "/imgcss/seadragon/"; $(document).ready(function () { var viewer = new Seadragon.Viewer("seadragoncontainer"); function onZoomitResponse(resp) { if (resp.error) { // e.g. the URL is malformed or the service is down alert(resp.error); return; } var content = resp.content; if (content.ready) { viewer.openDzi(content.dzi); } } $.ajax({ url: "http://api.zoom.it/v1/content/?url=" + encodeURIComponent("@(slopemapBigUrl)"), dataType: "jsonp", success: onZoomitResponse }); }); </script> <div> @if (slopemapUrl.IsNotEmpty()) { <div id="seadragoncontainer" style="height:408px;"></div> } </div> <script type="text/javascript"> Seadragon.Strings.setString('Tooltips.Home', 'Ausgangsgröße wiederherstellen'); Seadragon.Strings.setString('Tooltips.FullPage', 'Vollbildmodus ein/aus'); Seadragon.Strings.setString('Tooltips.ZoomIn', 'Vergrößern (auch mit Mausrad möglich)'); Seadragon.Strings.setString('Tooltips.ZoomOut', 'Verkleinern (auch mit Mausrad möglich)'); Seadragon.Config.imagePath = "/imgcss/seadragon/"; $(document).ready(function () { var viewer = new Seadragon.Viewer("seadragoncontainer"); function onZoomitResponse(resp) { if (resp.error) {        // e.g. the URL is malformed or the service is down alert(resp.error); return; } var content = resp.content; if (content.ready) {viewer.openDzi(content.dzi); } } $.ajax({url: "http://api.zoom.it/v1/content/?url=" +encodeURIComponent("[url]"),dataType: "jsonp",success: onZoomitResponse}); }); </script><div> |
1 |
Der Container sieht dann folgender Maßen aus
1 | <div id="seadragoncontainer" style="height: 408px;"></div> |
Leave a Reply
Want to join the discussion?Feel free to contribute!