Question

I’m trying to open the current visible photo in a new window with javascript, but it must also work on the iPad.
What I tried is to add a button to the toolbar (like in the example). I did also add the css of that button in the photoswipe.css. I’ve added a javascript function:

function getImgUrl()
{
    var divHead = getElementsByClassName(document, 'ps-carousel-content');
    var imgElement = divHead[0].getElementsByTagName("img");
    var imgUrl = imgElement[1].getAttribute('src');
    window.open(imgUrl.toString())
}

And I did use the code from the example to get the custom toolbar but added the piece that creates the buttons:

getToolbar: function(){
    return '<div class="ps-toolbar-close"><div class="ps-toolbar-content"></div></div><div class="ps-toolbar-play"><div class="ps-toolbar-content"></div></div><div class="ps-toolbar-previous" style="padding-top: 12px;"><div class="ps-toolbar-content"></div></div><div class="ps-toolbar-next"><div class="ps-toolbar-content"></div></div><div onclick="javascript: getImgUrl();" class="ps-toolbar-download"><div class="ps-toolbar-content"></div></div>';
}

This works perfectly (the photo opens in a new window/tab) in the webkit-browsers like chrome and safari. But when I try this on the iPad, it doesn’t work. Simple nothing happens when i push the button.

Can anybody help me to solve this problem? Maybe i’m doing it all wrong, so tell me if a different approach would be better.

Thanks!

Answer 1

The iPad is likely blocking this script as a ‘popup’. See this SO question. To be sure the problem is a popup blocker, go to Settings > Safari > “Block Pop-ups” Turn it off and see if it works now.

If you’re sure it’s the popup blocker and not some other problem, try changing the way you are opening the image to something like this:

function getImgUrl()
{
    var divHead = getElementsByClassName(document, 'ps-carousel-content');
    var imgElement = divHead[0].getElementsByTagName("img");
    var imgUrl = imgElement[1].getAttribute('src');
    return imgUrl.toString();
}

getToolbar: function(){
    return '<div class="ps-toolbar-close"><div class="ps-toolbar-content"></div></div><div class="ps-toolbar-play"><div class="ps-toolbar-content"></div></div><div class="ps-toolbar-previous" style="padding-top: 12px;"><div class="ps-toolbar-content"></div></div><div class="ps-toolbar-next"><div class="ps-toolbar-content"></div></div><a href="' + getImgUrl() + '" target="_blank" class="ps-toolbar-download"><div class="ps-toolbar-content"></div></a>';
}

I changed your function to return the image url as a string and then inserted that right into your getToolbar return string.