{"id":265,"date":"2016-01-24T22:51:57","date_gmt":"2016-01-25T04:51:57","guid":{"rendered":"http:\/\/www.p14nd4.com\/blog\/?p=265"},"modified":"2016-04-20T15:18:32","modified_gmt":"2016-04-20T20:18:32","slug":"fully-client-side-browser-initiated-bookmarklet-image-gallery","status":"publish","type":"post","link":"http:\/\/www.p14nd4.com\/blog\/2016\/01\/24\/fully-client-side-browser-initiated-bookmarklet-image-gallery\/","title":{"rendered":"Fully client-side \/ browser-initiated \/ bookmarklet image gallery"},"content":{"rendered":"<p>For a demo project I had at work recently, I wanted to incorporate some imagery from the client&#8217;s web site. I discovered their web server was configured to generate an index page for the directory containing their images, but I didn&#8217;t want to click through each one individually to figure out if it was what I wanted. (An auto-generated index page is something like <a href=\"\/jeff\/dorm\/\">this<\/a>, but imagine it having hundreds of entries.)<\/p>\n<p>I was pretty sure that I&#8217;d encountered some javascript many years ago that would render a thumbnail gallery for just such an occasion, but I was unable to locate it. Thankfully, I&#8217;m a software engineer, and I&#8217;m easily distracted by tangential pursuits, so I just <a href=\"https:\/\/github.com\/omegadrh\/jsGallery\">wrote my own<\/a>! If you&#8217;re not a nerd, but want to see what it is, copy the text below, visit the <a href=\"\/jeff\/dorm\/\">index page<\/a> mentioned above; in your browser address bar, delete the address that&#8217;s currently there, manually type <q>javascript:<\/q> (make sure to get the colon), and then paste the text from below. (Browsers strip the <q>javascript:<\/q> from the text if you paste it.)<\/p>\n<p><input type=\"text\" readonly=\"readonly\" size=\"60\" onclick=\"select()\" value=\"javascript:function n(i){return document.createElement(i)}function m(i){return document.getElementsByTagName(i)}var d=n(&quot;body&quot;);var g=n(&quot;style&quot;);g.type=&quot;text\/css&quot;;g.innerHTML=&quot;body{background-color:grey}div{position:relative;float:left;padding:2px}img{max-height:200px;max-width:400px}span{position:absolute;right:2px;bottom:2px;border:1px dotted #000;background:#fff;opacity:.7;font:smaller sans-serif}&quot;;document.head.appendChild(g);var e=m(&quot;a&quot;);for(link in e){if(e[link].href!=null&#038;&#038;e[link].href.search(\/(jpg|png|gif|bmp|jpeg)\/i)&gt;0){var c=n(&quot;div&quot;);var b=n(&quot;a&quot;);b.href=e[link].href;var f=n(&quot;img&quot;);f.src=e[link].href;f.alt=e[link].innerHTML;b.appendChild(f);c.appendChild(b);d.appendChild(c)}}document.body.parentNode.replaceChild(d,m(&quot;body&quot;)[0]);var l=m(&quot;img&quot;);var a=0;var k=0;function j(){k++;var o=this.parentNode.parentNode;var i=n(&quot;span&quot;);i.appendChild(document.createTextNode(this.naturalWidth+&quot;x&quot;+this.naturalHeight+&quot;px&quot;));o.appendChild(i);if(a==k){console.log(&quot;done loading &quot;+k+&quot; images!&quot;)}}for(var h=0;h&lt;l.length;h++){a++}for(var h=0;h&lt;l.length;h++){if(l[h].complete){j()}else{l[h].addEventListener(&quot;load&quot;,j);l[h].addEventListener(&quot;error&quot;,function(){alert(h+&quot; failed&quot;)})}}\"\/><\/p>\n<p>If it works (tested in Chromium 47 and Firefox 43), you should be presented with a little gallery of images! You can also search the web for <a href=\"https:\/\/duckduckgo.com\/?q=&quot;index+of&quot;+jpg\"><q>index of<\/q> jpg<\/a> or something similar and test it out there, but you can stumble across some&#8230;interesting&#8230;things that way. You&#8217;ve been warned.<\/p>\n<p>Also, it&#8217;s got the potential to crash your browser (or at least really slow things down) if you run it in a really large index. For better or for worse, I don&#8217;t do any intelligent loading\/unloading of images, so it just ends up rendering a page with ALL OF THE IMAGES from the index. I have no doubt that this can be dramatically improved in a variety of ways; I very infrequently touch JavaScript, so this was a bit of a refresher exercise for me. Pull requests welcome!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For a demo project I had at work recently, I wanted to incorporate some imagery from the client&#8217;s web site. I discovered their web server was configured to generate an index page for the directory containing their images, but I didn&#8217;t want to click through each one individually to figure out if it was what [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[30,29],"class_list":["post-265","post","type-post","status-publish","format-standard","hentry","category-technical","tag-image-gallery","tag-javascript"],"_links":{"self":[{"href":"http:\/\/www.p14nd4.com\/blog\/wp-json\/wp\/v2\/posts\/265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.p14nd4.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.p14nd4.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.p14nd4.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.p14nd4.com\/blog\/wp-json\/wp\/v2\/comments?post=265"}],"version-history":[{"count":8,"href":"http:\/\/www.p14nd4.com\/blog\/wp-json\/wp\/v2\/posts\/265\/revisions"}],"predecessor-version":[{"id":274,"href":"http:\/\/www.p14nd4.com\/blog\/wp-json\/wp\/v2\/posts\/265\/revisions\/274"}],"wp:attachment":[{"href":"http:\/\/www.p14nd4.com\/blog\/wp-json\/wp\/v2\/media?parent=265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.p14nd4.com\/blog\/wp-json\/wp\/v2\/categories?post=265"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.p14nd4.com\/blog\/wp-json\/wp\/v2\/tags?post=265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}