{"id":26,"date":"2012-08-17T23:58:02","date_gmt":"2012-08-17T21:58:02","guid":{"rendered":"http:\/\/spintag.de\/?p=26"},"modified":"2012-08-17T23:58:02","modified_gmt":"2012-08-17T21:58:02","slug":"lupe-mit-kamerafunktion","status":"publish","type":"post","link":"https:\/\/spintag.de\/?p=26","title":{"rendered":"Lupe mit Kamerafunktion"},"content":{"rendered":"<p>\t\t\t\tEin jQuery-Beispiel aus der Kategorie Finger\u00fcbungen. In dieser Kategorie werde ich in unregelm\u00e4ssigen Abst\u00e4nden Code-Schnippsel oder Mini-Applikationen ver\u00f6ffentlichen die es wahrscheinlich nie zu eigenen Projektstatus schaffen werden, aber trotzdem einige Aspekte enthalten die es Wert sind aufgeschrieben zu werden.<\/p>\n<p>Dieses kleine Demo ist ein gutes Beispiel f\u00fcr die Ausdruckskraft von Javascript in Kombination mit jQuery.<\/p>\n<p>Interessant an der Umsetzung ist der Fakt das keinerlei Pixel berechnet werden, es wird nicht mit Canvas oder Image-Transformationen gearbeitet, sondern einfach ein DIV-Tag clever mit CSS kombiniert. Die Basisideee (die nicht von mir ist) besteht darin die CSS-Property <code>background-position<\/code> dieses DIV-Tags zu manipulieren. Au\u00dferdem wird das quadratische DIV-Tag mittels der CSS-Property <code>border-radius<\/code> &#8222;Rund&#8220; gemacht.<\/p>\n<p><a href=\"http:\/\/spintag.de\/examples\/lens\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44 size-full\" src=\"http:\/\/spintag.de\/wp-content\/uploads\/2017\/03\/snapshotLens.png\" alt=\"\" width=\"756\" height=\"526\" \/><\/a><\/p>\n<p>Alles was Sie in diesem Demo sehen ist mit 77 Zeilen Javascript erledigt. Dazu kommen noch 20 Zeilen HTML und 60 Zeilen CSS.<\/p>\n<pre class=\"striped:false lang:js decode:true \">$(document).ready(function() {\n\t\/\/ picture URLs of some cuties\n\tvar URLs = [\n\t\t'http:\/\/farm6.staticflickr.com\/5085\/5275801576_57718507fd_b.jpg',\n\t\t'http:\/\/farm8.staticflickr.com\/7178\/7131405175_45f1b7ddb8_b.jpg',\n\t\t'http:\/\/farm8.staticflickr.com\/7020\/6751571539_35353cd22d_b.jpg',\n\t\t'http:\/\/farm3.staticflickr.com\/2560\/4189239614_64f4cc0b46_o.jpg',\n\t\t'http:\/\/farm3.staticflickr.com\/2488\/3684369721_1f2b864033_o.jpg',\n\t\t'http:\/\/farm5.staticflickr.com\/4105\/5022054910_e01eb5e820_o.jpg'\n\t];\n\n\t\/\/ render image picker\n\t$.each(URLs, function (index, url) {\n\t\t$('&lt;img src=\"' + url + '\"\/&gt;').appendTo('#thumbs');\n\t});\n\n\t\/\/ create magnifying lens\n\tvar lens = $('&lt;div class=\"lens\"&gt;&lt;\/div&gt;').appendTo('body');\n\n\t\/\/ pick image\n\t$('#thumbs img').click(function(evt) {\n\t\tevt.stopPropagation();\n\t\tvar src = $(evt.currentTarget).attr('src');\n\t\tlens.css('background-image', 'URL(\"' + src + '\")');\n\t\t$('#picture').hide().attr('src', src).fadeIn(800);\t\t\t\n\t});\n\n\t\/\/ initially pick one random image\n\t$($('#thumbs img')[(Math.random()*URLs.length)|0]).trigger('click');\n\n\t$('body').mousemove(function(evt) { \/\/ handle lens movement\n\t   \tvar x = evt.pageX, y = evt.pageY;\n   \t\tvar picture = $('#picture');\n\t\tvar pos = picture.offset();\n\n   \t\tif (x &lt; (pos.left - 30) || x &gt; (pos.left + picture.width() + 30) || \n   \t            y &lt; (pos.top - 30) || y &gt; (pos.top + picture.height() + 30)) {\n   \t   \t\tlens.hide();\n   \t   \t} else {\n   \t   \t\tvar magnifyBy = picture[0].naturalWidth\/picture.width();\n   \t   \t\tvar bgPos = (100+(magnifyBy*(200-x))|0)+'px '+(100+(magnifyBy*(100-y))|0)+'px';\n\t   \t\tlens.css({top: y-100, left: x-100, 'background-position': bgPos});\n   \t   \t\tlens.show();\n   \t   \t}\n\t});\n\n\tvar snapshotRing = [];\n\tvar snapshots = 0;\n\tvar SNAPSHOT_CAPACITY = 7;\n\n\t$('body').click(function(evt) { \/\/ take snapshot\n\t  \tvar pos = lens.offset();\n\n\t        \/\/ simulate the release of an objective lens\n\t   \tvar clone = lens.clone().appendTo('body');\n\t   \tclone.css('background', 'black').animate({opacity:0.6}, 'fast', function() {\n\t\t\t$(this).remove()\n\t\t});\n\n\t\t\/\/ create a snapshot element\n\t   \tvar snap = lens.clone().appendTo('body').addClass('snapshot').css('opacity', 0.2);\t  \n\n\t\t\/\/ move snapshot in place\n\t\tvar delta = {\n\t\t\ttop: 200 + 180*Math.sin(2*Math.PI*snapshots\/SNAPSHOT_CAPACITY) - pos.top, \n\t\t\tleft: 950 + 180*Math.cos(2*Math.PI*snapshots\/SNAPSHOT_CAPACITY) - pos.left}; \n\t\tsnap.animate({top:'+=' + delta.top, left:'+=' + delta.left, opacity:1}, 500);\n\n\t\t\/\/ remove old snapshot from the \"ring buffer\"\n\t\tsnapshots++;\n\t\tsnapshotRing.push(snap);\n\t\tif (snapshotRing.length &gt; SNAPSHOT_CAPACITY) {\n\t\t\t snapshotRing[0].fadeOut(function() {$(this).remove()});  \t\n\t\t\t snapshotRing.splice(0,1);\n\t\t}\n\t});  \t\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Ein jQuery-Beispiel aus der Kategorie Finger\u00fcbungen. In dieser Kategorie werde ich in unregelm\u00e4ssigen Abst\u00e4nden Code-Schnippsel oder Mini-Applikationen ver\u00f6ffentlichen die es wahrscheinlich nie zu eigenen Projektstatus schaffen werden, aber trotzdem einige Aspekte enthalten die es Wert sind aufgeschrieben zu werden. Dieses kleine Demo ist ein gutes Beispiel f\u00fcr die Ausdruckskraft von Javascript in Kombination mit jQuery. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[8,9,10],"class_list":["post-26","post","type-post","status-publish","format-standard","hentry","category-fingerubung","tag-css","tag-javascript","tag-jquery","entry"],"_links":{"self":[{"href":"https:\/\/spintag.de\/index.php?rest_route=\/wp\/v2\/posts\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spintag.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spintag.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spintag.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spintag.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26"}],"version-history":[{"count":0,"href":"https:\/\/spintag.de\/index.php?rest_route=\/wp\/v2\/posts\/26\/revisions"}],"wp:attachment":[{"href":"https:\/\/spintag.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spintag.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spintag.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}