MyGallery

Gallery with swipe effect

by Norbert Wilms

HTML

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 
<div id=wrapper><div id=main><div id=gallerywrapper>
<div id=tools></div>
<div id=toolsmenu></div>
<div id=ctl_l></div>
<div id=ctl_r></div>
<div id=pic>pic</div>
<div id=pic>pic_ovl</div>
</div></div></div>

CSS

img { width: 100%; height: auto }
#wrapper {
position : relative;
text-align : left;
top : -7px;
left : 0;
margin : 0 auto;
width : 1024px;
}
#main {
position : relative;
display : block;
width : 100%;
height : 100%;
top : 0;
left : 0;
}
#gallerywrapper {
position : relative;
width : 800px;
height : 540px;
margin-bottom : 0;
margin-left : auto;
margin-right : auto;
margin-top : 10px;
z-index : 5;
}
#picturewrapper {
position : relative;
width : 800px;
height : 470px;
margin : 0 auto;
z-index : 6;
}
#galleryhead {
position : relative;
width : 680px;
min-height : 30px;
margin : 0 auto;
font-family : Arial;
font-size : 130%;
color : #ffff00;
}
#ctl_l {
position : relative;
float : left;
top : 495px;
right : 5px;
height : 40px;
width : 40px;
background-image : url('https://wilmie.myhome-server.de:8443/test/prev.png');
z-index : 15;
}
#ctl_r {
float : left;
position : relative;
top : 495px;
left : 15px;
height : 40px;
width : 40px;
background-image : url('https://wilmie.myhome-server.de:8443/test/next.png');
z-index : 15;
}
#pic {
position : absolut;
top : 0;
left : 10px;
height : 470px;
width : 620px;
background-color: red;
z-index : 10;
}
#pic_ovl {
position : absolut;
top : 0;
left : 10px;
height : 470px;
width : 620px;
z-index : 100;
}
#tools {
position : absolute;
top : 0px;
left : 0px;
height : 80px;
width : 100%;
z-index : 40;
background-color: yellow;
cursor : help;
}
#toolsmenu {
position : absolute;
top : 0px;
left : 0px;
height : 80px;
width : 80px;
z-index : 50;
background-color: grey;
cursor : help;
}
.help_box {
position : absolute;
top : 0;
left : 50px;
height : 500px;
width : 920px;
z-index : 40;
cursor : help;
border-width : 5px;
border-style : solid;
border-color : grey;
background-color : #cccccc;
}
.help_box_head {
position : relative;
background-color : #a80329;
z-index : 40;
width : 900px;
height : 27px;
font-family : Arial;
font-size : 120%;
color : #ffffff;
padding-left : 20px;
}
.help_box_close {
position : absolute;
margin : 3px;
top :...

JavaScript

$(function(){
  // Bind the swipeHandler callback function to the swipe event on div.box
  $( "#pic" ).on( "swipeleft", swipeleftHandler );
  $( "#pic" ).on( "swiperight", swiperightHandler );
 
  // Callback function references the event target and adds the 'swipe' class to it
  function swipeleftHandler( event ){
    alert("swipe left detected");
    prev_pic();
    }
  function prev_pic() {  
    $('#pic').html('<img src="http://wilmie.myhome-server.de/bilder/teichbau/pic003.jpg">');
  }
  function swiperightHandler( event ){
    alert("swipe right detected");
    next_pic();
    }
  function next_pic() {  
    $('#pic').html('<img src="http://wilmie.myhome-server.de/bilder/teichbau/pic001.jpg">');
  }
  $('#tools').hide();
      $("#toolsmenu").click(function(){
        $("#toolsmenu").hide();
        $("#tools").show();
    });
    $("#tools").click(function(){
        $("#tools").hide();
        $("#toolsmenu").show();
    });
    $('#ctl_l').click(function() {
      prev_pic();
    });
    $('#ctl_r').click(function() {
      next_pic();
    });
     $('#pic').html('<img src="http://wilmie.myhome-server.de/bilder/teichbau/pic002.jpg">');
     alert('test');
});