2013-01-11 18:48:15 +04:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>layout template</title>
|
|
|
|
|
<link rel="stylesheet" href="layout.css">
|
|
|
|
|
<script src="jquery.js"></script>
|
|
|
|
|
<script src="jquery.touchSwipe.js"></script>
|
2013-01-16 03:53:49 +04:00
|
|
|
<script src="jquery.exif.js"></script>
|
2013-01-11 18:48:15 +04:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
|
$('.article').click(function(){
|
|
|
|
|
var name = $(this).attr('id')
|
|
|
|
|
return setPageTo(name)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$('.viewer')
|
2013-01-11 18:58:26 +04:00
|
|
|
//.click(toggleIndex)
|
2013-01-11 18:48:15 +04:00
|
|
|
.swipe({
|
|
|
|
|
swipeLeft: nextPage,
|
|
|
|
|
swipeRight: prevPage,
|
|
|
|
|
swipeUp: showIndex,
|
|
|
|
|
swipeDown: hideIndex
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getPages(){
|
|
|
|
|
return $('.article').map(function(e, v){return v.id}).toArray()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function curPageIndex(){
|
|
|
|
|
var cur = $('.article.current').attr('id')
|
|
|
|
|
return getPages().indexOf(cur)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setPageTo(name){
|
|
|
|
|
$('.view.current, .article.current').removeClass('current')
|
|
|
|
|
$('#'+name).addClass('current')
|
|
|
|
|
$('.view.'+name).addClass('current')
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function nextPage(){
|
|
|
|
|
var i = curPageIndex()
|
2013-01-12 16:45:52 +04:00
|
|
|
var pages = getPages()
|
2013-01-11 18:48:15 +04:00
|
|
|
|
2013-01-12 16:45:52 +04:00
|
|
|
if(i+1 >= pages.length){
|
2013-01-11 18:48:15 +04:00
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
2013-01-12 16:45:52 +04:00
|
|
|
setPageTo(pages[i+1])
|
2013-01-11 18:48:15 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function prevPage(){
|
|
|
|
|
var i = curPageIndex()
|
|
|
|
|
|
|
|
|
|
if(i <= 0){
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setPageTo(getPages()[i-1])
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showIndex(){
|
|
|
|
|
//$('.previews').fadeIn()
|
2013-01-11 19:25:53 +04:00
|
|
|
$('.previews').slideDown(100)
|
2013-01-11 18:48:15 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function hideIndex(){
|
|
|
|
|
//$('.previews').fadeOut()
|
2013-01-11 19:25:53 +04:00
|
|
|
$('.previews').slideUp(100)
|
2013-01-11 18:48:15 +04:00
|
|
|
}
|
|
|
|
|
|
2013-01-11 18:58:26 +04:00
|
|
|
function toggleIndex(){
|
|
|
|
|
if($('.previews').css('display') == 'none'){
|
|
|
|
|
showIndex()
|
|
|
|
|
} else {
|
|
|
|
|
hideIndex()
|
|
|
|
|
}
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
|
2013-01-11 18:48:15 +04:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="section main current">
|
|
|
|
|
<div class="viewer">
|
|
|
|
|
<div class="view A current">
|
|
|
|
|
<h1>Page A</h1>
|
|
|
|
|
<p>
|
2013-01-11 19:03:40 +04:00
|
|
|
The basic actions here are:<br>
|
|
|
|
|
<br><b>swipe right</b> – show next page.
|
|
|
|
|
<br><b>swipe left</b> – show previous page.
|
|
|
|
|
<br><b>swipe up</b> – show page index.
|
|
|
|
|
<br><b>swipe down</b> – hide page index.
|
2013-01-11 18:48:15 +04:00
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="view B">
|
2013-01-12 16:45:52 +04:00
|
|
|
<div style="height: 95%; width: 95%; margin: 2%; border: 5px dotted gray;">
|
2013-01-11 19:20:16 +04:00
|
|
|
<h2>Page B</h2>
|
|
|
|
|
</div>
|
|
|
|
|
|
2013-01-11 18:48:15 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="view C">
|
|
|
|
|
<h2>Page C</h2>
|
2013-01-12 18:26:15 +04:00
|
|
|
<!-- images need caching... -->
|
2013-01-16 04:37:11 +04:00
|
|
|
<!--img src="img.jpg" exif="true" onclick="alert($(this).exifPretty())"/-->
|
|
|
|
|
<img src="img.jpg"/>
|
2013-01-11 18:48:15 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="view D">
|
|
|
|
|
<h2>Page D</h2>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2013-01-12 16:45:52 +04:00
|
|
|
<!-- remove this... -->
|
2013-01-11 18:48:15 +04:00
|
|
|
<div class="previews">
|
|
|
|
|
<div class="article current" id="A">
|
|
|
|
|
<div class="preview"></div>
|
|
|
|
|
<div class="text">
|
|
|
|
|
Article A Title
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="article" id="B">
|
|
|
|
|
<div class="preview"></div>
|
|
|
|
|
<div class="text">
|
|
|
|
|
Article B Title
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="article" id="C">
|
|
|
|
|
<div class="preview"></div>
|
|
|
|
|
<div class="text">
|
|
|
|
|
Article C Title
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="article" id="D">
|
|
|
|
|
<div class="preview"></div>
|
|
|
|
|
<div class="text">
|
|
|
|
|
Article D Title
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- vim:set ts=4 sw=4 spell : -->
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
