Posted By

kirie on 06/04/10

Tagged

Versions (?)

Last Edited at 06/04/10 05:09am

Statistics

Viewed 997 times

Favorited by 3 user(s)

Related snippets

Ultimate Full Screen Images Without Flash, iPhone and iPad Friendly

/ 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

Highlighted TextExpand

<!DOCTYPE html>
<html lang="no">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>Scaler by Eirik Backer</title>
	<meta name="description" content="" /><meta name="keywords" content="" />
	<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>
	
	
</head>
<body>
	
	<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>

<div id="bg">										
		<div>										
			<div>									
				<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>

URL: http://klippoglim.no/blog/2010/06/ultimate-full-screen-images-without-flash-iphone-and-ipad-friendly/

Report this snippet Tweet