Image Fullscreen on touch and click

Question

I can get this to work with a click on a PC, but not with a touch on a mobile device.

$('.img-responsive').on('click', function(){
    var src = $(this).attr('src');
    $('<div>').css({
        background: 'RGBA(0,0,0,.5) url('+src+') no-repeat center',
        backgroundSize: 'contain',
        width:'100%', height:'100%',
        position:'fixed',
        zIndex:'10000',
        top:'0', left:'0',
        cursor: 'zoom-out'
    }).on('click', function(){
        $(this).remove();
    }).appendTo('body');
});

Does anyone have any tips?

thanks!

try touchend and focusout events. ref : https://stackoverflow.com/questions/34065420/jquery-click-trigger-with-touch-devices — Nilanka Manoj, Mar 15 '20 at 01:12

score 0 · Answer 1 · answered Mar 15 '20 at 05:21

0

Use the HTMLEvents object with document.createEvent() to simulate a click on a link.

    var link = document.getElementById( 'link_to_click' ),
    event = document.createEvent( 'HTMLEvents' );

    event.initEvent( 'click', true, true );
    link.dispatchEvent( event );

answered Mar 15 '20 at 05:21

Omolewa Stephen

444
3
19

Thank you but this caused the action not to work on PC and still didn't work on mobile. – RoosterNoob Mar 15 '20 at 20:11

score 0 · Answer 2 · answered Mar 15 '20 at 08:29

0

try to delegatthe click event from the button’s parent or parent’s parent

$("body").delegate(".img-responsive", "click", function(){
//your action code
});

hope this work !, and may this link help you also https://www.codewall.co.uk/jquery-on-click-function-not-working-after-appending-html/

answered Mar 15 '20 at 08:29

Nourhan Ahmed

179
1
10

Thank you, but the above code made no difference, still worked on PC but not on mobile. – RoosterNoob Mar 15 '20 at 20:11

Image Fullscreen on touch and click

2 Answers2