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