maxxCode: SWIPE

<!DOCTYPE HTML>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe-1.2.5.js"></script>

<title>touchSwipe</title>

<style>

#test
{
width:500px;
height:300px;
background:#FF00FF;
}

#info
{
width:500px;

}
.im{ margin:0px;
margin-left: -4px;
padding: 0px;}

</style>

</head>

<body onLoad="setTimeout(function() { window.scrollTo(0, 1) }, 100);viewport(); take_pic();" style="margin: 0px; padding: 0px; background: black;">
<style>

#content
{
height:567px;
width:100%;
overflow:hidden;
position:relative;

border : 0px solid red;

}

#imgs
{
float:left;
display:inline;

-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
padding:0px;
margin:0px;

width:2700px;

/*apply a transfor to kick in the hardware acceleration. Without this, the first time we add the transform you get odd rendering of the divs (half missing) */
-webkit-transform: translate3d(0px,0px,0px);

}

#imgs img
{
padding:0px;

width:896px;
height:567px;

/*apply a transfor to kick in the hardware acceleration. Without this, the first time we add the transform you get odd rendering of the divs (half missing) */
-webkit-transform: translate3d(0px,0px,0px);

}

</style>

<script>

var IMG_WIDTH = 896;
var currentImg=0;
var maxImages=3;
var speed=500;

var imgs;

var swipeOptions=
{
triggerOnTouchEnd : true,
swipeStatus : swipeStatus,
allowPageScroll:"vertical",
threshold:200
}

$(function()
{
imgs = $("#imgs");
imgs.swipe( swipeOptions );
});

/**
* Catch each phase of the swipe.
* move : we drag the div.
* cancel : we animate back to where we were
* end : we animate to the next image
*/
function swipeStatus(event, phase, direction, distance)
{
//If we are moving before swipe, and we are going Lor R in X mode, or U or D in Y mode then drag.
if( phase=="move" && (direction=="left" || direction=="right") )
{
var duration=0;

if (direction == "left")
scrollImages((IMG_WIDTH * currentImg) + distance, duration);

else if (direction == "right")
scrollImages((IMG_WIDTH * currentImg) - distance, duration);

}

else if ( phase == "cancel")
{
scrollImages(IMG_WIDTH * currentImg, speed);
}

else if ( phase =="end" )
{
if (direction == "right")
previousImage()
else if (direction == "left")
nextImage()
}
}

function previousImage()
{
currentImg = Math.max(currentImg-1, 0);
scrollImages( IMG_WIDTH * currentImg, speed);
}

function nextImage()
{
currentImg = Math.min(currentImg+1, maxImages-1);
scrollImages( IMG_WIDTH * currentImg, speed);
}

/**
* Manuallt update the position of the imgs on drag
*/
function scrollImages(distance, duration)
{
imgs.css("-webkit-transition-duration", (duration/1000).toFixed(1) + "s");

//inverse the number we set in the css
var value = (distance<0 ? "" : "-") + Math.abs(distance).toString();

imgs.css("-webkit-transform", "translate3d("+value +"px,0px,0px)");
}

</script>

<script type="text/javascript">

window.onorientationchange = function()
{
var e = window
, a = 'inner';
if ( !( 'innerWidth' in window ) )
{
a = 'client';
e = document.documentElement || document.body;
}
var orientation = window.orientation;
switch(orientation) {
case 0:
$("#desk").css({width:(e[ a+'Width' ])+'px',height:(e[ a+'Height' ])+'px'});
$("#content").css({width:(e[ a+'Width' ])+'px',height:(e[ a+'Height' ])+'px'});
$(".im").css({width:(e[ a+'Width' ])+'px',height:(e[ a+'Height' ])+'px'});
IMG_WIDTH=e[ a+'Width' ];
//alert('1');
//Top side up.
break;

case -90:
//alert('2');
$("#desk").css({height:(e[ a+'Height' ])+'px',width:(e[ a+'Width' ])+'px'});
$("#content").css({height:(e[ a+'Height' ])+'px',width:(e[ a+'Width' ])+'px'});
$(".im").css({height:(e[ a+'Height' ])+'px',width:(e[ a+'Width' ])+'px'});
IMG_WIDTH=e[ a+'Width' ];
//Left side up (turned 90 degrees to the right)
break;

case 90:
//alert('3');
$("#desk").css({height:(e[ a+'Height' ])+'px',width:(e[ a+'Width' ])+'px'});
$("#content").css({height:(e[ a+'Height' ])+'px',width:(e[ a+'Width' ])+'px'});
$(".im").css({height:(e[ a+'Height' ])+'px',width:(e[ a+'Width' ])+'px'});
IMG_WIDTH=e[ a+'Width' ];
//Right side up (turned 90 degrees to the left)
break;
}
}

$(document).ready(function(){
$("#desk").css({height:(e[ a+'Height' ])+'px',width:(e[ a+'Width' ])+'px'});
$("#content").css({height:(e[ a+'Height' ])+'px'});
$(".im").css({height:(e[ a+'Height' ])+'px',width:(e[ a+'Width' ])+'px'});
IMG_WIDTH=e[ a+'Width' ];
});

</script>

<div id='desk' style='background: white;'>

<div id="content">
<div id="imgs">
<img class="im" src="http://maurizioguermandi.com/images/directory/13264480581320679929infiniti.png" style="margin-left: 0px;"/>
<img class="im" src="http://maurizioguermandi.com/images/directory/1316614124legabasket2011_01.jpg" />
<img class="im" src="http://maurizioguermandi.com/images/directory/1316614124legabasket2011_02.jpg" />
</div>
</div>

</div>

</body>
</html>

maxxCode

mercoledì 18 gennaio 2012

SWIPE

Nessun commento:

Posta un commento