In this scenario...
I am seeking a way to deactivate fancybox functionality on mobile devices.
I have already discovered one method to disable it...
And now I want to directly show the large image in the a href="xxx_large.jpg" instead of using the img src="xxx_small.jpg"
<script type="text/javascript>
if (window.innerWidth >500 ) {
// For small screen devices - avoid using fancy box
$(document).ready(function() {
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0,
openEffect : 'elastic',
helpers: {
overlay : {
css : {
'background' : 'rgba(0,0,0,.85)'
}
}
},
beforeShow: function () {
/* Disable right click */
$.fancybox.wrap.bind("contextmenu", function (e) {
return false;
});
},
closeBtn : false ,
});
});
}
</script>
<a class="fancybox" rel="group" href="xxx_large.jpg" ><img src="xxx_small.jpg" width="150" height="100" border="0" /></a>
Is there a solution to achieve this? If anyone has any insights, please assist me... thank you!