HI! thank you for your code! seems perfect! one thing: i've tried it, but it doesn't do anything if I swipe left/right. I think that I miss something.....
here my complete index.html file content:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<title>index</title>
<style>
html {
height:100%;
}
body {
background-color:#FFF;
margin:0;
height:100%;
}
#scalecontainer{
-moz-transform-origin: left top;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
width: 1024px;
margin: 0 auto;
}
</style>
<!-- copy these lines to your document head: -->
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, width=device-width" />
<script src="index.hyperesources/js/zepto.js"></script>
<script src="index.hyperesources/js/event.js"></script>
<script src="index.hyperesources/js/touch.js"></script>
<script>
var navInfoByScene = {};
navInfoByScene["1"] = { "next" : "2", "prev" : "" };
navInfoByScene["2"] = { "next" : "", "prev" : "1" };
navInfoByScene["3"] = { "next" : "4", "prev" : "2" };
navInfoByScene["4"] = { "next" : "5", "prev" : "3" };
navInfoByScene["5"] = { "next" : "6", "prev" : "4" };
navInfoByScene["6"] = { "next" : "7", "prev" : "5" };
navInfoByScene["7"] = { "next" : "8", "prev" : "6" };
navInfoByScene["8"] = { "next" : "", "prev" : "7" };
navInfoByScene["9"] = { "next" : "10", "prev" : "2" };
navInfoByScene["10"] = { "next" : "11", "prev" : "9" };
navInfoByScene["11"] = { "next" : "12", "prev" : "10" };
navInfoByScene["12"] = { "next" : "13", "prev" : "11" };
navInfoByScene["13"] = { "next" : "", "prev" : "12" };
navInfoByScene["14"] = { "next" : "15", "prev" : "2" };
navInfoByScene["15"] = { "next" : "16", "prev" : "14" };
navInfoByScene["16"] = { "next" : "17", "prev" : "15" };
navInfoByScene["17"] = { "next" : "18", "prev" : "16" };
navInfoByScene["18"] = { "next" : "", "prev" : "17" };
navInfoByScene["19"] = { "next" : "20", "prev" : "1" };
navInfoByScene["20"] = { "next" : "21", "prev" : "19" };
navInfoByScene["21"] = { "next" : "22", "prev" : "19" };
navInfoByScene["22"] = { "next" : "23", "prev" : "21" };
navInfoByScene["23"] = { "next" : "", "prev" : "22" };
navInfoByScene["24"] = { "next" : "25", "prev" : "1" };
navInfoByScene["25"] = { "next" : "26", "prev" : "24" };
navInfoByScene["26"] = { "next" : "27", "prev" : "25" };
navInfoByScene["27"] = { "next" : "28", "prev" : "26" };
navInfoByScene["28"] = { "next" : "29", "prev" : "27" };
navInfoByScene["29"] = { "next" : "", "prev" : "28" };
// ... complete with all scenes
function jumpToNextScene() {
jumpToSceneWithDirection("next");
}
function jumpToPrevScene() {
jumpToSceneWithDirection("prev");
}
function jumpToSceneWithDirection(direction) {
var currentSceneName = hypeDocument.currentSceneName();
var navInfo = navInfoByScene[currentSceneName];
if(navInfo != null) {
var sceneName = navInfo[direction];
if(sceneName != null && sceneName != "") {
hypeDocument.showSceneNamed(sceneName);
}
}
}
</script>
<!-- end copy -->
</head>
<body>
<!-- copy these lines to your document: -->
<div id="scalecontainer">
<div id="index_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:1024px;height:768px;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?48064"></script>
</div>
</div>
<script type="text/javascript">
// make sure the browser does not do any scrolling (avoids iOS6 timer bug)
document.ontouchmove = function(event) {
event.preventDefault();
}
function documentLoaded(hypeDocument, element, event) {
var mainContainerID = element.id;
// when swiping right show the previous scene
$('#' + mainContainerID).swipeRight(function() {
if (jumpToPrevScene(hypeDocument.currentSceneName()) ) {
hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushLeftToRight);
}
});
// when swiping left show the next scene
$('#' + mainContainerID).swipeLeft(function() {
if (jumpToNextScene(hypeDocument.currentSceneName()) ) {
hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushRightToLeft);
}
});
}
window.HYPE_eventListeners = [{"type":"HypeDocumentLoad", "callback":documentLoaded}];
</script>
<script src="index.hyperesources/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
</script>
<script type="text/javascript">
var alsoenlarge = true;
$j(function(){
if(isScalePossible()){
$j('body').css({overflow:'hidden'}); //geen scrollbars
$j('#scalecontainer').css({position: 'absolute', margin: 0});
// Run scale function on start
scaleSite();
scaleSite();
// run scale function on browser resize
$j(window).resize(scaleSite);
}
});
function scaleSite()
{
windoww = $j(window).width();
windowh = $j(window).height();
sitew = $j('#scalecontainer').width();
siteh = $j('#scalecontainer').height();
f = windoww/sitew;
f = windowh/siteh<f?windowh/siteh:f;
if(!alsoenlarge && f>1) f = 1;
$j('#scalecontainer').css({
"-moz-transform" : "scale("+f+")",
"-webkit-transform" : "scale("+f+")",
"-ms-transform" : "scale("+f+")",
"-o-transform" : "scale("+f+")",
"transform" : "scale("+f+")",
"left" : ((windoww-(sitew*f))/2)+"px",
"top" : ((windowh-(siteh*f))/2)+"px"
});
}
function isScalePossible()
{
can = 'MozTransform' in document.body.style;
if(!can) can = 'webkitTransform' in document.body.style;
if(!can) can = 'msTransform' in document.body.style;
if(!can) can = 'OTransform' in document.body.style;
if(!can) can = 'transform' in document.body.style;
if(!can) can = 'Transform' in document.body.style;
return can;
}
</script>
<!-- end copy -->
</body>
</html>
all my slides are named as numbers.
thank's!
m
