GLASS v1.31, Magnified Presentation - the code

GLASS v1.31,  Magnified Presentation  - the code

See it here in full and heavy duty action:

S E T T I N G S C O N S O L E ATTENTION any number in settings has to be an integer ATTENTION after changing a setting you have to check the other settings for any cross-relations to be kept In the next two lines you set the URLs of the two needed images. The small to navigate and the detailed big to look at. Thinking here, sky is the limit. They can be even the same url meaning you give here the same image as BIG IMAGE and SMALL IMAGE only altering the dimensions you set to the second one further bellow. BIG IMAGE dimensions SMALL IMAGE dimensions LENS dimensions. This is the big image visible part. The panel that you are looking through to big image. SMOOTH MOTION recommended 1 through 20. The lower the better smooth motion, the higher the better cpu workload. Glass 1.31 Move mouse over the small image! click lock - click unlock

- The image you are inspecting behind the lens panel is 6405(!) pixels wide by 2322 pixels tall (like a playground area!) - If you print it is 169cm by 61cm   or 67in by 24in!! - The size of that image is 1,96MB! - Last but not least, not even in the middle yet, refresh the page and watch how the page loads without noticable hesitation while the heavy image loads its way to the lens panel apart from the functionality of the page - Didn't you played mousing over the smaller image yet? shame on you! - See the same image without Glass - Some Glass examples more:   example 1        example 2             example 3                example 4                  example 5

Here is the Manual:

<br /> /// GLASS Web Presentation code or "Magnified Presentation code" /// 23-Jul-2010 /// version 1.31 /// GLASS code page: http://blgscafe.blogspot.com/2010/07/magnified-presentation--code.html#glass /// BlogsCafe[at]hotmail[dot]com <br /> ========================= M A N U A L =========================<br /> ==== Checked OK for compatibility issues in: <br /> Browsers - | IE | Moz Firefox | Chrome | <br /> OS - | Win98 | WinXPsp3 | Windows Vista | Windows7 | <br /> CPUs - | AMD | Intel | GPUs - | ATI | Nvidia | <br /> Machines - | PC | Not checked to Mac platform and Linux OS, I assume it will be ok due to the nature of the code. <br /> <br /> ==== SETTINGS CONSOLE<br /> ATTENTION any number in settings has to be an integer<br /> ATTENTION after changing a setting you have to check in the SETTINGS CONSOLE section the other settings for any cross-relations to be kept<br /> -------------------------<br /> Image dimensions.<br /> For those of you not familiar with browser coding or with web stuff read this or decline to next paragraph.<br /> Way 1.<br /> You can prepare two identical images of the same object with differences only in image dimensions.<br /> The big one for the viewer to look at and the small one for the viewer to navigate.<br /> This is a way of an excellent presentation in final result.<br /> Then you have to upload those images somewhere in the web and use their address URL for any presentation.<br /> Way 2.<br /> Images in browsers appear either with the actual dimensions or with different dimensions if they are given by the user.<br /> You can see the actual dimensions of any image in the web by looking in the properties of it.<br /> If you are lazy or on the rush or you don't own the image that you want to show you can give it with any public image address without manipulating it previously just providing the url and the dimensions, the url of the image not the page that is at. Now.<br /> Give the dimensions that the big version of the image actually has. In this version of Glass you cannot give different dimensions for the BIG IMAGE than the actual ones.<br /> Then give some proportional smaller dimensions for the small version of the image. We'll see further on how much smaller they can be.<br /> -------------------------<br /> URLs of the two needed images.<br /> Thinking here, sky is the limit.<br /> They can be even the same URL meaning you give the same image as BIG IMAGE and SMALL IMAGE altering the dimensions you set in SMALL IMAGE.<br /> BIG IMAGE dimensions<br /> This is the big image where user looks at and admires the details to whatever you want him to see (I hope not porn stuff!).<br /> Note that you give here the actual image dimensions otherwise Glass will not function properly.<br /> Wait a minute.<br /> Which are the actual dimensions of an image you see in a page? These are not neceserily the ones you see it on that page, may the owner html-manipulated it to have smaller or bigger dimensions.<br /> We need the actual ones! So have the url of the image, open it in a browser window and from there you will access the actual dimensions (properties).<br /> SMALL IMAGE dimensions<br /> This is the small image which user uses to navigate (mousing over).<br /> Note that you can give here the same image url as in BIG assigning smaller dimensions but the image file will be the actual size thus loading twice.<br /> So in this case if the big image has too large file size (lets say bigger than 3-4MB) is a point of your judgement if you will upload to use in Glass a smaller identical image to be the SMALL IMAGE.<br /> Now, how much has to be the linear relation (magnification) between the two images?<br /> This depends on the room you will dedicate to Glass a part of it will be the room available for the small image, not the big image. Big image has nothing to do with that.<br /> i.e. if Glass will take a place of 500pixels width in the page then a small image of about 190 to 200 pixels should be more than ok.<br /> LENS dimensions.<br /> This is the big image visible part on the page. A lens like panel.<br /> Let's say that is the peephole to the big image.<br /> Note that the BIG IMAGE will NOT take room in your page, it will be visible through lens panel.<br /> What convenience! What room saving in your page! How easy will be for mobile visitors also! How easy will be for you to show off things that until now were tied down by the limited room in the web display surfaces and the pc screens.<br /> Here note some additional good points. If the BIG IMAGE is "too heavy" to load (as usual big-big images are) the rest of your page will load normaly without hesitation or further delay than its usual standard while the "too heavy" image will load his way behind the LENS. No Flash Objects behaving badly, no strange load times which interfere with the page loading, no nothing.<br /> Of course if the page visitor uses a very slow connection, a rare thing nowadays, then his already limited bandwith has to deal with the load of the page and the "too heavy" image at the same time but again this is not the most of the case today. On the other hand if your page is oriented mostly to access by visitors via remoted mobile connections (that is, slow enough i.e. as on mountain areas) then take care a little of the dimensional sizes and weights of your images. Don't go mad to upload the green of an Olympic Stadium! Again, those are only for extreme and rare situations.<br /> Ok now. How to calculate the whole dimensions stuff.<br /> 1. Find out the dimensions in pixels of the BIG IMAGE that you want to show<br /> 2. Decide the total room WIDTH IN PIXELS that you will give to Glass in your page, remember that the BIG IMAGE will NOT take place in your page, on the page will be only SMALL IMAGE and LENS!<br /> In the code page we provide an online application where you give the total dedicated room width to Glass and the big image dimensions and it recommends the rest dimensions stuff.<br /> -------------------------<br /> Just for your reference the calculation method which results the recommended settings is this:<br /> 3. Subtract 25 from the total room width - keep that result as "A" - Everything ok until here? You have a BIG IMAGE and an "A". <br /> 4. Now divide "A" by 2.6 - this is the SMALL IMAGE WIDTH<br /> 5. Subtract SMALL IMAGE WIDTH from "A" - this is the LENS WIDTH<br /> 6. Divide LENS WIDTH by 1.6 - this is the LENS HEIGHT<br /> 7. Divide BIG IMAGE WIDTH by SMALL IMAGE WIDTH - keep that as "M"(magnification)<br /> 8. Divide BIG IMAGE HEIGHT by "M" - this is SMALL IMAGE HEIGHT<br /> 9. Round non integer numbers to integer<br /> - Now you are ready to write the dimensions settings stuff.<br /> Ok, ok, here is an example!<br /> Look at the GLASS code page.<br /> 1. The big image you see there dancing behind LENS is 6405(!) pixels wide by 2322 pixels tall (like a playground area!).<br /> But who cares about it. Again: the BIG IMAGE doesn't take room in the page, there is only SMALL IMAGE to navigate and LENS to have the look through!<br /> 2. In that pageI decided to give Glass 900 pixels room width. For some reason I decided it to be 896 sharp.<br /> 3. So: 896-25 = 871 ===> "A". Don't ask me "what is that 25 for?" just follow the steps or I'll ask you to pay for Academy lessons!<br /> Ok so far?<br /> 4. Now ("A")871/2.6 = 335 ===> SMALL IMAGE WIDTH<br /> 5. ("A")871 - (SMALL IMAGE WIDTH)335 = 536 ===> LENS WIDTH<br /> 6. (LENS WIDTH)536 / 1.6 = 335 ===> LENS HEIGHT<br /> 7. (BIG IMAGE WIDTH)6405 / (SMALL IMAGE WIDTH)335 = 19.11 ===> "M"(magnification)<br /> 8. (BIG IMAGE HEIGHT)2322 / ("M")19.11 = 121.50 - this is SMALL IMAGE HEIGHT 9. Now lets rounding the any decimals to integers and have the final results for settings:<br /> BIG IMAGE WIDTH = 6405<br /> BIG IMAGE HEIGHT = 2322<br /> SMALL IMAGE WIDTH = 335<br /> SMALL IMAGE HEIGHT = 122<br /> LENS WIDTH = 536<br /> LENS HEIGHT = 335<br /> (feu!)<br /> -------------------------<br /> All of the above are recommended calculations. You can experiment with your settings with specific viewing needs.<br /> To deal with that case you have to remember some key points.<br /> - The primary is the WIDTH of the dedicated room to Glass.<br /> - How much will be the width for small image in there?<br /> - How much will be the remaining width for lens part? Is that width enough for viewing through to big image details?<br /> SMOOTH Means smooth motion. Recommended value 1 through 20.<br /> Smooth stands for some motion abruptness or not of the big image when moving the mouse over the small image. The lower value the better smooth motion, the higher value the more relax workload for the CPU (or the better for mouse-hand trembling). The full Value range is from 0(zero) to any number still good enough to allow moving of the lens at the sides of the big image (very tricky coding, doesn’t it).<br /> ==== GLASS updates<br /> Check from time to time for new versions at the GLASS code page.<br /> Of course reported bugs will be fixed ASP adding also a relative update note in the GLASS code page title for immediate user's reference.<br /> ==== TROUBLESHOOTING<br /> - Any number in settings has to be an integer.<br /> - Any setting that is a number has to be given using only numeric symbols not alphanumeric.<br /> i.e. CORRECT: width=300 WRONG: width=300px WRONG: width="300" WRONG: width=3.000 WRONG: width=3,000 WRONG: width=#300<br /> - After changing a setting you have to check in the SETTINGS CONSOLE section the other settings for any cross-relations to be kept.<br /> - GLASS total width<br /> Keep in mind that the total width needed for the GLASS equals to LENSWIDTH + SMALLWIDTH + 25pixels (minimum total).<br /> Code takes care for itself and will still work perfectly with any dimensions given by you but you have to be aware of that total width for your page appearance. - If you want to integrate many instances of this code in the same page you can't. You have to wait for the next version that will be in a widget.<br /> If you are familiar enough with javascript and html you could add as many instances as you will but this takes some headache work to do either for the code to work properly or not to be a huge load for client and server.<br /> - Images URL.<br /> 1. If an image cannot be displayed:<br /> a. Try to post that image at the same page without the GLASS. I mean try THE SAME URL of the image.<br /> If you don't know how to do add this code somewhere in the page: <img src="REPLACE_THIS_WITH_THE_URL_YOU_WANT" /> then save page, reload page, and check out what you see.<br /> Chances are that the template of the page or something around that cannot display this kind of image-url.<br /> b. The GLASS code has nothing to do with such issues itself. It can display any image you are already able to see in the page of the issue.<br /> c. As also for any presentation of anyhing to public-web be careful to provide URL address that are visible by others without some kind of login to THE SITE OF THE IMAGE otherwise the image will not be visible.<br /> i.e. You are a member of site A, you are logged in to A or you logged in just before.<br /> At the same time you are posting an image to public access site B giving an image-url of site A.<br /> You see that image on site B but others may not and they complain about that.<br /> To check if this is the instance logout from A first not just by closing the browser window and check again the display of that image on site B. 2. Something else about the URLs part.<br /> If other than IE browsers could understand ZOOM command then this code with some additional lines would be a simple but amazing tool as ALSO A TEXT OR PAGE READER.<br /> Think why a pc screen is not so preferable reader's view place for big texts or books yet. The key is (1) an easy and (2) fast (3) transferring/playing around of human's view in a (4) 3D-like handy environment. (1) and (2) are of the most importance. No software sticking or complicated trudging, no click here press there, natural easy like the sheets rustling and fingers pointing in a page. We do not have to silly simulate the physical (i.e. a page turning) but to find out what is the brain's natural in digital world physical prospective if not more than that.<br /> - For any troubleshooting case post a comment at the GLASS code page, following this general order:<br /> 1. Did you have the code from the GLASS code page or from somewhere else?<br /> 2. Web Browser and version - Internet Explorer 8 (IE8), Mozilla Firefox 3, etc<br /> 3. Javascript (not Java) if enabled or disabled in your Web Browser - There is about a 5% of users that have it disabled without knowing it. Google how to enable it for your specific Web Browser.<br /> 4. OS - i.e. WindowsXP, Vista, etc<br /> 5. OS service pack - i.e. WindowsXP(sp3)<br /> 6. Antivirus (if on enabled status at the time of the issue) - i.e. McAfee, Norton, etc<br /> 7. Fire Wall (if on enabled status at the time of the issue) - i.e. ZAlarm, Windows FW, etc<br /> 8. Machine platform - i.e. PC, Mac, i-phone, etc<br /> 9. Machine type - i.e. Laptop, Desktop, Notebook, Netbook, etc<br /> 10. CPU (processor) - AMD, Intel, etc<br /> 11. GPU (graphics) - ATI, Nvidia, etc<br /> 12. Now you have to give a description of the event issue in a detailed way enough for someone else to reproduce it.<br /> Keep or not at your choice and judgement of the case the general order above first.<br /> This way we can give you any help possible and not just the usual "yanda-yanda".

Glass size does not affected by big image size sizes in numbers only, no letters clear pixels given to GLASS width: BIG image full url: BIG image actual width pixels: BIG image actual height pixels: SMALL image full url: Recommended settings in code: BIG image width = BIG image height = SMALL image width will be = SMALL image height will be = LENS width will be = LENS height will be = Read The Manual The Glass code  (needs set up):    (recommended: set up Glass using the calculator above)

<!-- START of GLASS Magnified Presentation Code 1_31 --> <div id="Glass-1_31" name="Glass-1_31"> <!-- the software and the code are not freeware nor shareware // contact BlogsCAFE[at]live[dot]com --> <!-- /// GLASS Magnified-Presentation-Code-1_31 http://blgscafe.blogspot.com/2010/07/magnified-presentation-widget-code.html 23-Jul-2010 BlogsCAFE[at]hotmail[dot]com /// --> <script type="text/javascript"> var bigurl = " big-url-text "; var smallurl = " small-url-text "; var bigwidth = big-width-text; var bigheight = big-height-text; /*//relative to total Glass width settings*/ var smallwidth = small-width-text; var smallheight = small-height-text; var lenswidth = lens-width-text; var lensheight = lens-height-text; /*//look in to Glass manual for this setting*/ var smooth = 0; var prompta = " Move mouse over the small image! "; </script> <br /> <!-- end of Settings Console --><br /> <script type="text/javascript"> var magnificationx = bigwidth / smallwidth ; var magnificationy = bigheight / smallheight ; var divName = "selector-front"; var offX = -(smooth/2); var offY = -(smooth/2); var lockbig = 0 function mouseX(evt) { if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0; } function mouseY(evt) { if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0; } function magnify(evt) { if (lockbig == 1) { return; } if (document.getElementById) { var obj = document.getElementById(divName).style; obj.left = (parseInt(mouseX(evt))+offX) + 'px'; obj.top = (parseInt(mouseY(evt))+offY) + 'px'; var obj = document.getElementById("cross-1").style; obj.left = (parseInt(mouseX(evt))-1) + 'px'; obj.top = (parseInt(mouseY(evt))-21) + 'px'; var obj = document.getElementById("cross-3").style; obj.left = (parseInt(mouseX(evt))-1) + 'px'; obj.top = (parseInt(mouseY(evt))+5) + 'px'; var obj = document.getElementById("cross-2").style; obj.left = (parseInt(mouseX(evt))+5) + 'px'; obj.top = (parseInt(mouseY(evt))-1) + 'px'; var obj = document.getElementById("cross-4").style; obj.left = (parseInt(mouseX(evt))-21) + 'px'; obj.top = (parseInt(mouseY(evt))-1) + 'px'; } x = (document.getElementById("selector-back").offsetLeft - document.getElementById("selector-front").offsetLeft - (smooth/2))*magnificationx; y = (document.getElementById("selector-back").offsetTop - document.getElementById("selector-front").offsetTop - (smooth/2))*magnificationy; document.getElementById("big-image").style.left = x + (lenswidth/2) + "px"; document.getElementById("big-image").style.top = y + (lensheight/2) + "px"; } function lockit() { if (lockbig == 0) { lockbig = 1; for(var i = 1; i <= 4; i++) document.getElementById("cross-" + i).style.visibility = "visible"; } else { lockbig = 0; for(var i = 1; i <= 4; i++) document.getElementById("cross-" + i).style.visibility = "hidden"; } return; } </script> <style type="text/css"> #lens { overflow:hidden; position:relative; } #big-image { position:absolute; left:0; top:0; } #small-image { border:1px solid #BFBFBF; } #selector-front { position:absolute; z-index:4; display:inline-block; overflow:hidden; background-color:#D4D4D4; visibility:hidden; } #selector-back { position:absolute; z-index:-1; width:1px; height:1px; } #cross-1, #cross-3 { position:absolute; z-index:1; width:2px; height:16px; background-color:#000000; visibility:hidden; } #cross-2, #cross-4 { position:absolute; z-index:1; width:16px; height:2px; background-color:#ffffff; visibility:hidden; } </style> <table id="magnif-table" name="magnif-table" cellpadding="0" cellspacing="0" > <tr> <td rowspan="2" valign="top"> <div> <div id="lens" name="lens"> <iframe id="big-image" name="big-image" frameborder="0" src="" scrolling="no" marginheight="0" marginwidth="0"></iframe> </div></div></td> <td valign="top"> <div style="display:inline-block;"> <div id="selector-front" name="selector-front" onclick="lockit()"> </div><div id="selector-back" name="selector-back"> </div><img id="small-image" name="small-image" onmousemove="magnify(event)" onclick="lockit()" /> <div id="cross-1"> </div><div id="cross-2"> </div><div id="cross-3"> </div><div id="cross-4"> </div></div><div> <a style="display:inline-block; color:#404040; background-color:#BFBFBF; font-family:'Times New Roman', Serif, Georgia; font-size:10px; border-left:1px solid #404040; border-bottom:1px solid #404040; padding:2px 4px 2px 4px; text-decoration:none;" title="GLASS - the magnificent magnified presentation!" href="http://blgscafe.blogspot.com/2010/07/magnified-presentation-widget-code.html#glass" target="_blank"> Glass 1.31 </a></div></td> </tr> <tr> <td valign="top" style="text-align:center;"> <span id="prompt-1" style="display:inline-block; color:#000000; background-color:#E6E6E6; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:2px 4px 2px 4px;" > Move mouse over the small image! </span> <span id="prompt-2" style="display:inline-block; color:#BFBFBF; background-color:#E6E6E6; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:2px 4px 2px 4px;" > click lock - click unlock </span> </td> </tr> </table><script type="text/javascript"> document.getElementById("prompt-1").innerHTML= prompta; document.getElementById("lens").style.width = lenswidth + "px"; document.getElementById("lens").style.height = lensheight + "px"; document.getElementById("small-image").style.width = smallwidth + "px"; document.getElementById("small-image").style.height = smallheight + "px"; document.getElementById("big-image").style.width = bigwidth + "px"; document.getElementById("big-image").style.height = bigheight + "px"; document.getElementById("selector-front").style.width = smooth + "px"; document.getElementById("selector-front").style.height = smooth + "px"; document.getElementById("selector-back").style.width = smooth + "px"; document.getElementById("selector-back").style.height = smooth + "px"; document["small-image"].src = smallurl; document.getElementById("big-image").src = bigurl; </script> </div><!-- END of GLASS Magnified Presentation Code 1_31 -->