/ Published in: XHTML
- Fully compatible with all browsers and iPhone/iPad
- Letterboxes vertically oriented images
- Standalone: no library needed, no conflicts needed and speedy
- VERY light weight (under 3KB for uncompressed css and javascript)
- Easy to integrate into different gallery types
- Seamless fallback to pure css solution
- Letterboxes vertically oriented images
- Standalone: no library needed, no conflicts needed and speedy
- VERY light weight (under 3KB for uncompressed css and javascript)
- Easy to integrate into different gallery types
- Seamless fallback to pure css solution
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!-- * Scaler: Scaling background images to fill browser window with centering and aspect ratio. iPad and iPhone friendly - v3 - 04/06/2010 * http://klippoglim.no/ * http://kirie.no/ * * DEMO: http://klippoglim.no/blog/2010/06/ultimate-full-screen-images-without-flash-iphone-and-ipad-friendly/ * * Copyright (c) 2010 Eirik Backer * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.gnu.org/licenses/gpl-2.0.html) licenses. --> <!DOCTYPE html> <html lang="no"> <head> <style type="text/css"> body,html{width:100%;height:100%;overflow:hidden;background:#000 url(load.gif) 50% 50% no-repeat;padding:0;margin:0;border:0} #bg,#bg div,#bg img{-moz-user-select:-moz-none;-webkit-user-select:none} /*Prevent selection of the background*/ #bg{width:100%;height:100%;overflow:hidden;position:absolute;left:0;bottom:0} /*Container preventing scrolling-bug in opera*/ #bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%;display:table} /*Create canvas*/ #bg div div{left:0;top:50%;width:100%;display:block;height:auto} /*IE center verticaly*/ #bg div > div{display:table-cell;vertical-align:middle;height:100%;position:static;top:0} /*Others center verticaly*/ #bg img{position:absolute;top:-99999px;left:-99999px;width:50%;display:none} /*Display none AND hide (for later loading with block)*/ #bg img.bgshow{position:static;display:block;margin:0 auto;-ms-interpolation-mode:bicubic} /*Show image, with IE-scaling fix*/ *+html #bg div div{position:absolute;top:50%;height:auto} /*IE7 fix centerer*/ *+html #bg img{position:relative;top:-50%} /*IE7 fix image*/ * html #bg img{height:50%;position:relative;top:-50%} /*IE6 fix image*/ </style> <!--[if IE]><meta http-equiv="imagetoolbar" content="no" /><meta http-equiv="X-UA-Compatible" content="IE=8" /><![endif]--> <!--The previous line is for tweeking IE a bit - I do not like the imagetoolbar and IE8s backwards compability mode--> </head> <body> <!--Example start--> <div style="padding:10px;background:#fff;position:absolute;left:10px;bottom:10px;z-index:3;cursor:default"> Just an example showing the floater disappearing, safe to remove when using the code </div> <!--Example end--> <div id="bg"> <!--Prevent scrolling on Opera, iPhone and iPad --> <div> <!--Create canvas for centering --> <div> <!--Center verticaly --> <img alt="" src="photos/1.jpg" class="bgshow" /> <img alt="" src="photos/2.jpg" /> <img alt="" src="photos/3.jpg" /> <img alt="" src="photos/4.jpg" /> <img alt="" src="photos/5.jpg" /> </div> </div> </div> <script type="text/javascript"> function Scaler(id){ var imgs=document.getElementById(id).getElementsByTagName('img'),index=0; //Get images and set current index var resize=function(to){ var to=((to==='+1'?index+1:(to==='-1'?index-1:(isNaN(to)?index:to)))%imgs.length),to=to<0?imgs.length-1:to; //Get current index if(to!=index)for(var i=0,l=imgs.length;i<l;i++){imgs[i].className=i==to?'bgshow':'';imgs[i].style.display='block'} //Change current and start loading var i=imgs[to],nw=Math.round(document.body.clientHeight*(i.offsetWidth/i.offsetHeight)); //Get img and calculate new width i.style.width=(i.offsetWidth>i.offsetHeight&&document.body.clientWidth>nw)?'50%':nw+'px'; //Scale by css if possible return index=to; } if(window.attachEvent){window.attachEvent('onload',resize);window.attachEvent('onresize',resize)} //Attact events IE else{window.addEventListener('load',resize,false);window.addEventListener('resize',resize,false)} //Attact events others return resize; }; </script> <script type="text/javascript"> (function(){ var bg=document.getElementById('bg'),float=document.createElement('span'); var scale=Scaler('bg'), //Create and bind scaler-function addEvent=function(el,on,fn){el.attachEvent?el.attachEvent('on'+on,fn):el.addEventListener(on,fn,false)}, //Function for cross-borwser addEvent move=function(e){ float.style.left=(e=e||window.event).clientX+20+'px'; float.style.top=e.clientY+20+'px'; if(float._next!=(e.clientX>(document.body.offsetWidth/2)))float.innerHTML=(float._next=!float._next)?'next':'previous'; //Change html onlyt if needed }, swap=function(e){ var key=(e=e||window.event).type=='click'?(e.clientX>(document.body.clientWidth/2)?40:37):e.keyCode; if(key>36&&key<41)scale(key>38?'+1':'-1'); } addEvent(window,'keydown',swap); addEvent(bg,'mouseout',function(){float.style.display='none'}); //Hide floater when not over image addEvent(bg,'mouseover',function(){float.style.display='block'}); addEvent(bg,'mousemove',move); addEvent(bg,'click',swap); float.style.position='absolute'; float.style.zIndex='2'; float.style.color='#fff'; bg.style.cursor='pointer'; bg.appendChild(float); })(); </script> </body> </html>