<!DOCTYPE HTML> <html lang="en"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://www.mindat.org:80/photo-339141.html","20160902103143","https://web.archive.org/","web","/_static/", "1472812303"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="msapplication-tap-highlight" content="no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="google" value="notranslate"> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="/web/20160902103143js_/http://www.mindat.org/js/jquery-1.11.0.min.js"></script> <script src="/web/20160902103143js_/http://www.mindat.org/js/matchmedia.js"></script> <script src="/web/20160902103143js_/http://www.mindat.org/js/picturefill.min.js"></script> <script src="/web/20160902103143js_/http://www.mindat.org/js/hammer.min.js"></script> <script src="/web/20160902103143js_/http://www.mindat.org/js/jquery.transit.min.js"></script> <script src="/web/20160902103143js_/http://www.mindat.org/js/jquery.cookie.js"></script> <link rel="stylesheet" href="/web/20160902103143cs_/http://www.mindat.org/design2014/picshow.css?d=201512080001" type="text/css"> <link rel="stylesheet" href="/web/20160902103143cs_/http://www.mindat.org/js/rrssb.css" type="text/css"> <meta property="og:title" content="The first announcement"/> <meta property="og:site_name" content="mindat.org"/> <meta property="og:url" content="https://web.archive.org/web/20160902103143/http://www.mindat.org//getphoto-400-231-0779480001286717561.png"/> <meta property="og:description" content="Today is the 10th anniversary of the public launch of the mindat.org website. Although the mindat project dates back to late 1993, it was on October 10th 2000 that I first announced the website to the world. The first announcement was made on Usenet (which was the way things were done back in those days), in the group sci.geo.mineralogy. Here is that first announcement: Copyright 漏 J.Ralph"/> <meta property="og:image" content="https://web.archive.org/web/20160902103143im_/http://www.mindat.org/photos/0779480001286717561.png"/> <meta property="fb:app_id" content="247723315258445"/> </head> <body id="photobody" class="notranslate"> <div id="counter">1/1</div> <div id="photomain"> <a id="photomindatlogo" href="/web/20160902103143/http://www.mindat.org/"><img src="/web/20160902103143im_/http://www.mindat.org/design2014/logodark2x.png"></a> <div id="titlebar"><div id="helpbutton">?</div><h2>The first announcement</h2> </div> <div id="helpbox"> <h1>How to use the mindat.org media viewer</h1> <p>Click/touch this help panel to close it.</p> <p>Welcome to the mindat.org media viewer. Here is a quick guide to some of the options available to you. Different controls are available depending on the type of media being shown (photo, video, animation, 3d image)</p> <p><b>Controls - all media types</b></p> <p>Zoom in and out of media using your mousewheel or with a two-finger 'resize' action on a touch device.</p> <p>Use the mouse or your finger to drag the image or the view area of the image around the screen.</p> <p><span class="boxme"><</span> and <span class="boxme">></span> at the left and right hand side of the screen move forwards and backwards for the other images associated with the media you selected. Usually this is for further photos of the same specimen. Keyboard shortcuts: use the left and right arrow keys. </p> <p><span class="boxme rotate90d">></span> in the bottom center, raises the information box giving details and further options for the media, <span class="boxme rotate90d"><</span> at the top of this box then hides it. Keyboard shortcuts: use the up and down arrow keys.</p> <p><span class="boxme">?</span> opens this help window. Keyboard shortcuts: use the <span class="keyme">H</span> key or the <span class="keyme">?</span> key.</p> <p>Other keyboard shortcuts:</p> <table><tr><td><span class="keyme">1</span></td><td>Fit image to screen</td></tr> <tr><td><span class="keyme">2</span></td><td>Fill screen with image</td></tr> <tr><td><span class="keyme">5</span></td><td>Display at full resolution</td></tr> <tr><td><span class="keyme"><</span></td><td>Make background darker</td></tr> <tr><td><span class="keyme">></span></td><td>Make background lighter</td></tr> <tr><td><span class="keyme">space</span></td><td>Hide/dim titles and buttons</td></tr> </table> <p><b>Controls - Video</b></p> <p>Video files have a standard set of video controls: <span class="boxme"><img src="/web/20160902103143im_/http://www.mindat.org/images/start.png"/></span> - Reset to start, <span class="boxme"><img src="/web/20160902103143im_/http://www.mindat.org/images/back.png"/></span> - Skip back, <span class="boxme"><img src="/web/20160902103143im_/http://www.mindat.org/images/play.png"/></span> - Play, <span class="boxme"><img src="/web/20160902103143im_/http://www.mindat.org/images/pause.png"/></span> - Pause, <span class="boxme"><img src="/web/20160902103143im_/http://www.mindat.org/images/forward.png"/></span> - Skip forwards. Keyboard shortcuts: You can stop/start video play with the <span class="keyme">P</span> key.</p> <p><b>Controls - Animation (Spin Rotation)</b></p> <p>Animation (usually 360 degree spin rotations) have their own controls: <span class="boxme"><img src="/web/20160902103143im_/http://www.mindat.org/images/rotatewhite.png"/></span> - enable spin mode. Note that while images are loading this option will not be available but will be automatically activated when the animation has loaded. Once active you can spin the image/change the animation by moving your mouse or finger on the image left/right or by pressing the <span class="keyme">[</span> or <span class="keyme">]</span> keys.</p> <p>The <span class="boxme"><img src="/web/20160902103143im_/http://www.mindat.org/images/move.png"/></span> button switches to move mode so that you can use your mouse/fingers to move the image around the screen as with other media types.</p> <p>The <span class="boxme"><img src="/web/20160902103143im_/http://www.mindat.org/images/play.png"/></span> button, or the <span class="keyme">P</span> key will start playing the animation directly, you can interrupt this by using the mouse or finger on the image to regain manual movement control.</p> <p><b>Controls - 3D Stereoscopic images</b></p> <p>Stereoscopic 3D image viewing requires a suitable 3D television or monitor correctly configured for your computer. Passive 3D systems such as LG 3DTVs are the easiest to configure for this.</p> <p>To enable/disable 3D stereo display of a compatible stereo pair image press the <span class="keyme">3</span> key. If the left/right images are reversed on your display (this often happens in full-screen mode) press the <span class="keyme">4</span> key to reverse them.</p> <p><b>Summary of all keyboard shortcuts</b></p> <table><tr><td><span class="keyme">1</span></td><td>Fit image to screen</td></tr> <tr><td><span class="keyme">2</span></td><td>Fill screen with image</td></tr> <tr><td><span class="keyme">3</span></td><td>Switch to 3D display of stereo pair</td></tr> <tr><td><span class="keyme">4</span></td><td>Switch left/right images in 3D mode</td></tr> <tr><td><span class="keyme">5</span></td><td>Display at full resolution</td></tr> <tr><td><span class="keyme"><</span>, <span class="keyme">></span></td><td>Make background darker/lighter</td></tr> <tr><td><span class="keyme">H</span> or <span class="keyme">?</span></td><td>Show/hide this help page</td></tr> <tr><td><span class="keyme">P</span></td><td>Play/Pause Video or Animation</td></tr> <tr><td><span class="keyme">[</span>, <span class="keyme">]</span></td><td>Backwards/forwards one frame (Animation only)</td></tr> <tr><td><span class="keyme">up arrow</span></td><td>Show information box</td></tr> <tr><td><span class="keyme">down arrow</span></td><td>Hide information box</td></tr> <tr><td><span class="keyme">left arrow</span></td><td>Previous image/media page</td></tr> <tr><td><span class="keyme">right arrow</span></td><td>Next image/media page</td></tr> <tr><td><span class="keyme">space</span></td><td>Hide/dim titles and buttons</td></tr> </table> <br><br> </div> <div id="copyrightfloat">Copyright © J.Ralph</div><div id="buttondock"></div> <div id="clickleft" class="moreless left" style="display: none"> </div> <div id="clickright" class="moreless right" style="display: none"> </div> <div id="showinfo" class="moreless"> </div> <img id="mainphoto" src="/web/20160902103143im_/http://www.mindat.org/photos/0779480001286717561.png"> <img id="ctrlimg" src="/web/20160902103143im_/http://www.mindat.org/img/trans.png"/> <canvas id="threedee"></canvas> <div id="photoinfobox"> <div id="hideinfo" class="moreless down"> </div> <h2>The first announcement</h2><div class="photocopyright">Copyright © J.Ralph  - This image is copyrighted. Unauthorized reproduction prohibited.</div><br><div class="photocomments">Today is the 10th anniversary of the public launch of the mindat.org website. Although the mindat project dates back to late 1993, it was on October 10th 2000 that I first announced the website to the world.<br/> <br/> The first announcement was made on Usenet (which was the way things were done back in those days), in the group sci.geo.mineralogy. Here is that first announcement:<br/> <br/> <br><br>This photo has been shown 1600 times<table class="picshowextradata"><tr><th>Photo added:</th><td>10th Oct 2010</td></tr><tr><th>Dimensions:</th><td>778x450px (0.35 megapixels)</td></tr></table></div> <div class="clearer"></div><div id="buttonblock"><a href="/web/20160902103143/http://www.mindat.org/gallery-1.html">View Jolyon & Katya Ralph's Photos</a> <a href="forum.php?posting,106,post,,339141,The+first+announcement">Add Comment <span class="combadge">0</span></a> <div class="share-container clearer"> <div class="shareon">Share this photo on:</div> <ul class="rrssb-buttons clearer"> <li class="facebook"> <a href="https://web.archive.org/web/20160902103143/https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.mindat.org%2Fphoto-339141.html" class="popup" target="_blank"> <span class="icon"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewbox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"> <path d="M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434 c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726 c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z"/> </svg> </span> <span class="text">facebook</span> </a> </li> <li class="twitter"> <a href="https://web.archive.org/web/20160902103143/http://twitter.com/home?status=The+first+announcement%20http%3A%2F%2Fwww.mindat.org%2Fphoto-339141.html" class="popup"> <span class="icon"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewbox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"> <path d="M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32 c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155 C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965 C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683 c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851 C26.275,7.229,25.39,8.196,24.253,8.756z"/> </svg> </span> <span class="text">twitter</span> </a> </li> <li class="tumblr"> <a href="https://web.archive.org/web/20160902103143/http://tumblr.com/share?s=&v=3&t=The+first+announcement&u=http%3A%2F%2Fwww.mindat.org%2Fphoto-339141.html"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="28px" height="28px" viewbox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"><path d="M18.02 21.842c-2.029 0.052-2.422-1.396-2.439-2.446v-7.294h4.729V7.874h-4.71V1.592c0 0-3.653 0-3.714 0 s-0.167 0.053-0.182 0.186c-0.218 1.935-1.144 5.33-4.988 6.688v3.637h2.927v7.677c0 2.8 1.7 6.7 7.3 6.6 c1.863-0.03 3.934-0.795 4.392-1.453l-1.22-3.539C19.595 21.6 18.7 21.8 18 21.842z"/></svg> </span> <span class="text">tumblr</span> </a> </li> <li class="pinterest"> <a href="https://web.archive.org/web/20160902103143/http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.mindat.org%2Fphoto-339141.html&media=http://www.mindat.org/stampedimage.php?id=339141&description=The+first+announcement%0D%0AToday+is+the+10th+anniversary+of+the+public+launch+of+the+mindat.org+website.+Although+the+mindat+project+dates+back+to+late+1993%2C+it+was+on+October+10th+2000+that+I+first+announced+the+website+to+the+world.%0D%0A%0D%0AThe+first+announcement+was+made+on+Usenet+%28which+was+the+way+things+were+done+back+in+those+days%29%2C+in+the+group+sci.geo.mineralogy.+Here+is+that+first+announcement%3A%0D%0A%0D%0A%0D%0A%0D%0ACopyright+J.Ralph"> <span class="icon"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewbox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"> <path d="M14.021,1.57C6.96,1.57,1.236,7.293,1.236,14.355c0,7.062,5.724,12.785,12.785,12.785c7.061,0,12.785-5.725,12.785-12.785 C26.807,7.294,21.082,1.57,14.021,1.57z M15.261,18.655c-1.161-0.09-1.649-0.666-2.559-1.219c-0.501,2.626-1.113,5.145-2.925,6.458 c-0.559-3.971,0.822-6.951,1.462-10.116c-1.093-1.84,0.132-5.545,2.438-4.632c2.837,1.123-2.458,6.842,1.099,7.557 c3.711,0.744,5.227-6.439,2.925-8.775c-3.325-3.374-9.678-0.077-8.897,4.754c0.19,1.178,1.408,1.538,0.489,3.168 C7.165,15.378,6.53,13.7,6.611,11.462c0.131-3.662,3.291-6.227,6.46-6.582c4.007-0.448,7.771,1.474,8.29,5.239 c0.579,4.255-1.816,8.865-6.102,8.533L15.261,18.655z"/> </svg> </span> <span class="text">pinterest</span> </a> </li> </ul> </div> <div id="backdropad" class="hidetablet hidephone"></div> <div id="backdroptext" class="hidetablet hidephone"></div> <div id="backdropadt" class="hidephone hidepc"></div> <div id="backdroptextt" class="hidephone hidepc"></div> <div id="backdropadm" class="hidetablet hidepc"></div> <div id="backdroptextm" class="hidetablet hidepc"></div> <video id="backdropvid"></video> <div id="backdropfade"></div> <div id="bformblock"> <form class="flatform" method="get" action="/web/20160902103143/http://www.mindat.org/nsearch.php"> Mineral <input name="name" style="width: 137px;"/> and/or Locality <input name="loc" style="width: 137px;"> <input type="submit" value="Search"/> </form> </div> <div id="footertext"> Mindat.org is an outreach project of the Hudson Institute of Mineralogy, a 501(c)(3) not-for-profit organization.<br>Copyright © mindat.org and the Hudson Institute of Mineralogy 1993-2016, except where stated. Mindat.org relies on the contributions of thousands of members and supporters. <br/><a href="/web/20160902103143/http://www.mindat.org/privacy.php">Privacy Policy</a> - <a href="/web/20160902103143/http://www.mindat.org/terms.php">Terms & Conditions</a> - <a href="/web/20160902103143/http://www.mindat.org/contact.php">Contact Us</a> <span style="float: right">Current server date and time: September 2, 2016 11:31:43 </span> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//web.archive.org/web/20160902103143/http://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-41671786-1', 'mindat.org'); ga('send', 'pageview'); $(function() { $(".refsrc").each(function(index) { var i = index + 1; var srcid=$(this).attr('id'); var bits = srcid.split('_'); var refid = bits[1]; $("#refsrc_"+refid).html("<a name='refanc_"+refid+"' class='refanchort'>["+i+"]</a>"); $(".reflink_"+refid).each(function() { var con = $(this).html(); var out = i; if (con!='') { out+=" - "+con; } $(this).html("<a href='#refanc_"+refid+"' class='refanchor'>["+out+"]</a>"); }); }); }); jQuery.fn.centerhz = function () { // this.css("position","absolute"); var newleft = Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()); var oldleft = $(this).offset().left; this.css("margin-left", (newleft - oldleft) + "px"); return this; } </script> </div><script> var mode3d = 0; var iwidth = 0; var iheight = 0; var pos = 0; var scale=1; var rotate=0; var xxx=0; var yyy=0; var overlay=1; var rmode=0; var helpshow = 0; var count = 1; var glev = 0; var gl; var prevcr = 0; var autoplay = 0; var pib = document.getElementById("photoinfobox"); glev = parseInt("0"+$.cookie("picgs")); (function(window, document, exportName) { var coordinates = []; var threshold = 25; var timeout = 2500; if(!("ontouchstart" in window)) { window[exportName] = function(){}; return; } function preventGhostClick(ev) { for (var i = 0; i < coordinates.length; i++) { var x = coordinates[i][0]; var y = coordinates[i][1]; if (Math.abs(ev.clientX - x) < threshold && Math.abs(ev.clientY - y) < threshold) { ev.stopPropagation(); ev.preventDefault(); break; } } } function resetCoordinates() { coordinates = []; } function popCoordinates() { coordinates.splice(0, 1); } function registerCoordinates(ev) { if(ev.touches.length - ev.changedTouches.length <= 0) { var touch = ev.changedTouches[0]; coordinates.push([touch.clientX, touch.clientY]); setTimeout(popCoordinates, timeout); } } window[exportName] = function(el) { el.addEventListener("touchstart", resetCoordinates, true); el.addEventListener("touchend", registerCoordinates, true); }; document.addEventListener("click", preventGhostClick, true); })(window, document, 'PreventGhostClick'); document.body.addEventListener('touchmove', function(event) { event.preventDefault();}, false); window.onresize = function() { $(document.body).width(window.innerWidth).height(window.innerHeight); if(mode3d) change3d(); } $(function() { window.onresize();}); window.addEventListener("load",function() { setTimeout(function(){ window.scrollTo(0, 1); }, 0); }); var picarray = [339141]; $(function() { mainphotoload(); }); // if($('#mainphoto').get(0).complete) { $('#mainphoto').trigger('load'); } function mainphotoload() { start3d(); $("#mainphoto").show(); iwidth = $("#mainphoto").width(); iheight = $("#mainphoto").height(); console.log("width: "+iwidth); if(iwidth<72) { window.setTimeout(mainphotoload,200); return; } $("#mainphoto").attr("width",iwidth); $("#mainphoto").attr("height",iheight); } var lastsize=0; var lastimagename=0; function loadimage() { var sizes = [400,800,1000,1400,2000,4000,8000,16000,24000,32000,48000]; var w = iwidth * scale * window.devicePixelRatio; var h = iheight * scale * window.devicePixelRatio; // if width>height var nw = 778; for(var i=(sizes.length)-1;i>=0;i--) { if((sizes[i] < 700.2 ) && (sizes[i] >= w)) nw = sizes[i]; } nh = Math.round(450 * nw / 778) ; if(nw>lastsize) { if(!$("#seadragon").is(":visible")) { lastsize=nw; var cursrc = $("#mainphoto").attr("src"); var fname = "/getphoto-"+ nw.toString() + "-" + nh.toString() + "-0779480001286717561.png"; $("#buttondock").html("<div class='fyi'>Loading image: "+nw+"x"+nh+" pixels...</div"); $("#mainphoto").load(function() { $("#buttondock").fadeOut("slow",function() { $("#buttondock").html("").show(); }); }).attr("src",fname); if(mode3d) load3dimg(fname); else lastimagename = fname; } } } function toggleoverlay() { if(zoomenable) { overlay = 1 - overlay; if(!overlay) { $("#titlebar").hide(); prevcr = $("#copyrightfloat").is(":visible"); if(prevcr) $("#copyrightfloat").css("opacity",0.4); $("#showinfo").hide(); $("#clickleft").css("opacity",0); $("#clickright").css("opacity",0); $("#photomindatlogo").css("opacity",0.4); $("#photomindatlogo").css("background","none"); if($("#seadragon:visible")) $(".navigator").hide(); } else { $("#showinfo").show(); $("#titlebar").show(); if(prevcr) $("#copyrightfloat").css("opacity",1); $("#clickleft").css("opacity",1); $("#clickright").css("opacity",1); $("#photomindatlogo").css("opacity",1); $("#photomindatlogo").css("background-color","rgba(0,0,0,0.6)"); if($("#seadragon:visible")) $(".navigator").show(); } } } var framesloaded=0; var framec=0; $(function() { setbg(); }); function setbg() { var col = glev + (glev * 16) + (glev * 256); var out = "00"+col.toString(16); $("BODY").css("background-color","#"+out.slice(-3)); // alert("#"+out.slice(-3)); } function showinfo() { $("#showinfo").hide(); $("#copyrightfloat").hide(); $("#photoinfobox").slideDown('fast'); zoomenable=0; mc = null; } function is_touch_device() { try { document.createEvent("TouchEvent"); return true; } catch (e) { return false; } } function hideinfo() { zoomenable=1; $("#photoinfobox").slideUp('fast'); $("#copyrightfloat").show(); $("#showinfo").show(); } function nextimg() { if(pos<(count-1)) { $("#counter").html(((++pos)+1)+"/"+count).show(); $("#mainphoto").fadeOut(200); var pid = picarray[pos]; $("BODY").css("cursor","wait"); window.location.href="/photo-"+pid+".html"; } } function previmg() { if(pos>0) { $("#counter").html((pos--)+"/"+count).show(); var pid = picarray[pos]; $("#mainphoto").fadeOut(200); $("BODY").css("cursor","wait"); window.location.href="/photo-"+pid+".html"; } } function get_window_y_pos() { if(window.screenY) return window.screenY; if(window.screenTop) return window.screenTop; return(0); } function MouseWheelHandler(e) { e.preventDefault(); if(zoomenable) { var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); var maxzoom =Math.floor(778 / iwidth); if(maxzoom<6) maxzoom=6; if(maxzoom>15) maxzoom=15; var lastzoom = zoom; if(delta>0) zoom*=1.1; else zoom/=1.1; if(zoom>maxzoom) zoom=maxzoom; if(zoom<0.3) zoom=0.3; scale = zoom; requestUpdate(); loadimage(); } return false; } function updateTransform() { var action = 'scale(' + scale + ',' + scale + ') translate(' + xxx + 'px, ' + yyy + 'px)'; // psdebug(action); $("#mainphoto").css({'webkitTransform':action}).css({'mozTransform':action}).css({'transform':action}); ticking=false; if(mode3d) change3d(); } function chkfullscreen() { if (window.navigator.standalone || (document.fullScreenElement && document.fullScreenElement != null) || (document.mozFullScreen || document.webkitIsFullScreen) || (!window.screenTop && !window.screenY)) return(1); else return(0); } var last3dimg = ""; var img3d; var oldY; var fliplr = 1; function change3d() { var rect = document.getElementById("mainphoto").getBoundingClientRect(); var cw = Math.floor((rect.right-rect.left)/2); var ch = Math.floor(rect.bottom-rect.top); var cleft = rect.left + (cw/2); $("#threedee").css("top",Math.floor(rect.top)).css("left",Math.floor(cleft)).attr("width",cw).attr("height",ch).width(cw).height(ch); } function load3dimg(imgname) { if(last3dimg==imgname) return; last3dimg = imgname; newimg = new Image(); newimg.src=imgname; newimg.onload= function() { img3d = newimg; redraw3d(); }; } function clear3d() { var canvas = document.getElementById("threedee"); var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); if(seadragon) $("#seadragon").show(); else $("#mainphoto").css("opacity",1); $("#threedee").css("opacity",0); } function toggle3d() { mode3d = 1 - mode3d; if(mode3d) { if(seadragon) { $("#ctrlimg").show(); $("#seadragon").hide(); } else { $("#mainphoto").css("opacity",0); } $("#threedee").css("opacity",1); loadimage(); requestUpdate(); fill(0); } else { if(seadragon) $("#ctrlimg").hide(); clear3d(); requestUpdate(); } } function start3d() { var interval = setInterval(function() { var bcr = document.getElementById("threedee").getBoundingClientRect(); var newY = bcr.top + get_window_y_pos()+fliplr; //chkfullscreen(); var canvas = document.getElementById("threedee"); newY%=2; if ((canvas.width != window.innerWidth) || (canvas.height != window.innerHeight) || (newY != oldY)) { oldY = newY; redraw3d(); } },1000/25); } function redraw3d() { if((!img3d) && (lastimagename)) { load3dimg(lastimagename); } if(!img3d) return; var canvas = document.getElementById("threedee"); var context = canvas.getContext("2d"); var cw = canvas.width ; var ch = canvas.height ; var h = img3d.height; var w = img3d.width; w=Math.floor(w/2); context.fillStyle="#000000"; context.fillRect(0,0,cw,ch); var o = 0; for (var i=0;i<ch;i++) { src = (i+oldY) % 2; o = w*src; context.drawImage(img3d,o,i/ch*h,w,1,0,i,cw,1); } } function requestUpdate() { if(!ticking) { window.requestAnimationFrame(updateTransform); ticking=true; } } var START_X = 0; var START_Y = 0; var START_Z = 1; var LAST_X = 0; var LAST_Y = 0; var LAST_D = 0; var LAST_Z = 1; var ticking = false; var target=document.getElementById("mainphoto"); function attachlisteners() { // allow more than one interaction at a time $("#mainphoto").bind("load", function () { $(this).fadeIn(200); }); $("#showinfo").click(function(ev) { showinfo(); }); $("#hideinfo").click(function(ev) { hideinfo(); }); $("#clickleft").click(function(ev) { previmg(); }); $("#clickright").click(function(ev) { nextimg(); }); /* var mc2 = new Hammer.Manager(document.getElementById('showinfo')); mc2.add(new Hammer.Tap({event: 'singletap'})); mc2.on("singletap", function(ev) { showinfo(); }); var mc2 = new Hammer.Manager(document.getElementById('hideinfo')); mc2.add(new Hammer.Tap({event: 'singletap'})); mc2.on("singletap", function(ev) { hideinfo(); }); var mc2 = new Hammer.Manager(document.getElementById('clickright')); mc2.add(new Hammer.Tap({event: 'singletap'})); mc2.on("singletap", function(ev) { nextimg(); }); var mc2 = new Hammer.Manager(document.getElementById('clickleft')); mc2.add(new Hammer.Tap({event: 'singletap'})); mc2.on("singletap", function(ev) { previmg(); }); */ var mc2 = new Hammer.Manager(document.getElementById('helpbutton')); mc2.add(new Hammer.Tap({event: 'singletap'})); mc2.on("singletap", function(ev) { togglehelp();}); var mc2 = new Hammer.Manager(document.getElementById('helpbox')); mc2.add(new Hammer.Tap({event: 'singletap'})); mc2.on("singletap", function(ev) { togglehelp();}); var mc3 = new Hammer.Manager(document.getElementById('photoinfobox')); var START_Y2; var LAST_Y2; mc3.add(new Hammer.Pan({threshold: 10})); mc3.on("panstart",function(ev) { START_Y2 = $("#photoinfobox").scrollTop(); }).on("panmove",function(ev) { LAST_Y2 = START_Y2-ev.deltaY; $("#photoinfobox").scrollTop(LAST_Y2); }); var mc4 = new Hammer.Manager(document.getElementById('helpbox')); var START_HY2; var LAST_HY2; mc4.add(new Hammer.Pan({threshold: 10})); mc4.on("panstart",function(ev) { START_HY2 = $("#helpbox").scrollTop(); }).on("panmove",function(ev) { LAST_HY2 = START_HY2-ev.deltaY; $("#helpbox").scrollTop(LAST_HY2); }); var myElement = document.getElementById('ctrlimg'); var mc = new Hammer(myElement); var pan = new Hammer.Pan({threshold: 10}); mc.add(pan); mc.on("panstart",function(ev) { ev.preventDefault(); // var pos = $("#mainphoto").position(); // START_X = pos.left; // START_Y = pos.top; START_X = LAST_X; START_Y = LAST_Y; }).on("panmove", function(ev) { ev.preventDefault(); LAST_X = xxx = START_X+(ev.deltaX/scale); LAST_Y = yyy = START_Y+(ev.deltaY/scale); // psdebug("Startx " + START_X + " y "+ START_Y+ "xxx: "+xxx+" yyy: "+yyy); requestUpdate(); }); var pinch = new Hammer.Pinch(); //{threshold: 0, pointers: 0 }); mc.add(pinch); mc.on("pinchstart", function(ev) { ev.preventDefault(); START_Z = LAST_Z; }).on("pinchmove", function(ev) { ev.preventDefault(); if(zoomenable) { var maxzoom =Math.floor(778 / iwidth); if(maxzoom<6) maxzoom=6; if(maxzoom>15) maxzoom=15; zoom = START_Z * ev.scale; if(zoom>maxzoom) zoom=maxzoom; LAST_Z = zoom; scale = zoom; requestUpdate(); loadimage(); } }); mc.on('swipe', function(ev) { ev.preventDefault(); if(zoomenable) { if(ev.direction == Hammer.DIRECTION_RIGHT) previmg(); if(ev.direction == Hammer.DIRECTION_LEFT) nextimg(); } }); if(myElement.addEventListener) { // IE9, Chrome, Safari, Opera myElement.addEventListener("mousewheel", MouseWheelHandler, false); // Firefox myElement.addEventListener("DOMMouseScroll", MouseWheelHandler, false); } } function darker() { glev--; if(glev<0) glev=0; setbg(); $.cookie("picgs",glev,{expires: 365}); } function lighter() { glev++; if(glev>15) glev=15; setbg(); $.cookie("picgs",glev,{expires: 365}); } function togglehelp() { $("#helpbox").fadeToggle(100); } function fill(type) { var sw = $(window).width(); var sh = $(window).height(); var srat = sw/sh; var iw = iwidth; if(mode3d) iw/=2; var irat = iw/iheight; if((type==0)&&(irat>srat) || ((type==1)&&(irat<srat))) { scale = sw/iw; } else { scale = sh/iheight; } LAST_X=START_X=LAST_Y=START_Y=xxx=yyy=0 // psdebug('set scale to '+scale+" i "+iw+":"+iheight+" s "+sw+":"+sh); requestUpdate(); loadimage(); } $(function() { $("BODY").keydown(function(event) { var doswitch=1; $('input').each(function() { if (this==document.activeElement) doswitch=0; }); if(doswitch) switch(event.which) { case 39: nextimg(); break; case 37: previmg(); break; case 38: showinfo(); break; case 40: hideinfo(); break; case 32: toggleoverlay(); break; case 188: darker(); break; case 190: lighter(); break; case 49: fill(0); break; case 50: fill(1); break; case 51: toggle3d(); break; case 52: fliplr = 1 - fliplr; break; case 53: if(seadragon) { var actualViewportZoom = seadragon.viewport.imageToViewportZoom(1); seadragon.viewport.zoomTo(actualViewportZoom); //33psdebug(seadragon.viewport.getZoom()); } break; case 72: case 191: togglehelp(); break; default: // psdebug(event.which); break; } //psdebug(event.which); }); attachlisteners(); }); var zoom = 1; var zoomenable=1; var myinterval=0; function psdebug(txt) { $("#titlebar h2").html(txt); } </script> </div> </body> </html>

CINXE.COM