Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
0 votes
I've exported my book for web app multi device and loaded in up on the ipad by hosting the html files on a local location from my computer. for the most part things are working properly, but one serious game breaker is when you tap on an image to expand it, there is no way to close that image. Tapping, dragging, or anything has no effect so you have to close out the book.

Images are set Mark as thumbnail with the Open Thumbnails in Lightbox option set on export. any ideas of how to solve this?
in how_to by (430 points)
reshown by
  

1 Answer

0 votes

I took a look at a sample document with an image set to Mark as Thumbnail and exported with in5 version 3.8.7 with Open Thumbnails in Lightbox selected. It appears that in Safari on iOS, the lightbox is opening a new window. You should be able to close the new window by clicking the X, but it may be small on the tab. It should be opening in a lightbox like a pop-up with a larger close button. I'm having our developer take a look. I'll let you know what I find out.

by (23.5k points)
it works fine on desktop browsers, its only on ipad i had the issue. on that there is no x or border to tap to close.
What I'm seeing with the in5 v3.8.7 export is that on iOS in both Chrome and Safari, instead of opening in a lightbox, the image opens in a new window. If you're seeing something different, would you be able to send us your InDesign file or a sample file that recreates the issue and your html5_output folder? You can send us your files here: https://ajarproductions.com/pages/contact.php

There previously was a similar issue with the lightbox opening in a new window. I'm checking with our developer about it. I'll post an update as soon as I get more information.

i sent a link to a file yesterday for a different issue i posted, it contains a picture setup just like this issue. it might be a new window, i can't confirm as once the image is open i can't do anything else without closing the web app window all together. since its a web app i can't choose the browser it opens in, as far as i can tell.

Link to other post

Thank you for clarifying that the output was a web app. I'll pass that information along to our developer.

I can see that clicking on an image marked as thumbnail in a web app exported with 3.8.7 on iOS opens the image in a new window but the close button is not visible. You can still go back to the previous window by going to the left side of the device and swiping from left to right.

While our developer is taking a look, you might consider using a different method of enlarging the image. You could try making your own pop-up with an MSO or making a button where the rollover state is the enlarged version.

I'll let you know when I get additional information from our developer.

Ah i see that the swiping does work to close the new image window, thats good to know.

Yes i am using a different method of buttons and mso's to get the pop ups working, but keep me updated if a fix for the lightboxes on ipads is ever found. until then ill stick with the more manual pop-up method.
Sounds good. I'll keep you posted.

Thank you for your patience on this issue. I heard back from our developer. They said that the target of the link is _blank and not _lightbox which is telling the browser to open the content in new window. However, it also has a class thumb which suggests that it should open in the lightbox after all, based on $('.thumb').colorbox({maxWidth:"85%", maxHeight:"85%"}); in initLightbox function.

Try manually updating the code in in5.config.js to the following:

if(clickArr.length) {
			$el.on(clickEv,function(e){$.each(clickArr,function(i,func){func.call(el,e);}); 
			if($el.hasClass('page-scale-wrap')){ return !0; }
			if($(this).parents('a[target="_lightbox"]').length || $(this).parents('.thumb').lentgh){ e.preventDefault(); } 
			$(this).parents('a').trigger(clickEv); if(pd){return !1;} e.stopPropagation(); });
        }
        else if(el.nodeName==='A'){
            $el.on(clickEv,function(e){
                switch(e.target.nodeName){
                    case 'LABEL':
                        var $targ = $(this).find('input.choice');
                        $targ.prop("checked", !$targ.prop("checked")).parents('a').each(function(i,a){ openLink($(a),e); });
                    default: if(isIOS){if($el.attr('target') === '_lightbox' || $el.hasClass('thumb')) { return; } openLink($(this),e); } /*deal w buggy ios propagation/*/
                }
            });
        }

To modify the code yourself, you can do the following:

  1. Open the in5.config.js file in a text editor such as TextEdit (macOS) or Notepad (Windows) or in an IDE such as Dreamweaver which is available if you have the full Adobe Creative Cloud subscription
  2. Search for if(clickArr.length)
  3. Copy the code above
  4. Replace the code in the in5.config.js file
  5. Save the changes
Thanks so much for getting back to me about this. when i get the chance i'll update the javascript with the code you gave me and try it out again and let you know how it goes!
Sounds good. I hope it works for you. :)
sorry to take so long to get back to you, this fix worked on the sample doc on the ipad, is there a way to add the code to a main config file so any future exports retain this change?

You can add code via the JavaScript portion of the Resources section of the Export HTML5 with in5 dialog. Here's more information:

i just noticed a typo in the code above here: 

$(this).parents('.thumb').lentgh)
despite that the code still worked, i just wanted to let you know
Oh, thanks for the heads up. I'll let our developer know. :)