27 kwi 2014

Support for swipe gestures in Colorbox

I used example3 here

I set rigidly width/1000px and height/600px.

$(".group3").colorbox ( { 
             rel: 'group3', transition: "none" , width: "1000", height: "600"} 
    ) ;

You must change the following css (#cboxPrevius , #cboxNext)

#cboxPrevious{
    position:absolute;
    top:32px;
    left:5px;
    margin-top:-32px;
    background:transparent url(images/trans_gif.png);
    width:49%;
    height:578px;
    text-indent:-9999px;
    outline:none;
}
#cboxPrevious:hover{
   background-position:bottom left;
}
#cboxPrevious:after{
   position:absolute;
   content:"";
   top:50%;
   left:0;
   margin-top:-32px;
   background:url(images/controls.png) no-repeat top left;
   display:inline-block;
   width:28px;
   height:65px;
   outline:none;
}
#cboxNext{
   position:absolute;
   top:32px;
   right:0;
   margin-top:-32px;
   background:transparent url(images/trans_gif.png);
   width:49%;
   height:578px;
   text-indent:-9999px;
   z-index:999;
   outline:none;
}
#cboxNext:hover{
   background-position:bottom right;
}
#cboxNext:after{
   position:absolute;
   content:"";
   top:50%;
   right:5px;
   margin-top:-32px;
   background:url(images/controls.png) no-repeat top right;
   display:inline-block;
   width:28px;
   height:65px;
   outline:none;
}

I also changed js:

$next.click(function() {
   publicMethod.next();
});
$prev.click(function() {
   publicMethod.prev();
});

for this:

$next.on('click touchstart', function() {
   publicMethod.next();
});

$prev.on('click touchstart', function() {
   publicMethod.prev();
});

At the moment, this change has been tested on Android 4.4.2 on browsers:
Chrome 34.0.1847.114
Firefox 28.0.1
Opera 21.0.1437.74904
Dolphin 11.0.1