0

I´m trying to make Fancybox2 works on Ipad. Im using all the documentation posted in this website http://fancyapps.com/fancybox/. My code works right on Browsers even on iBooks if it is running on a Laptop but it doesnt work correctly on iPad/iPhone. Im trying to display an image in FULL-SCREEN when you tap on it but it doesnt show anything. When you tap on the image it opens a new blank and white window with the Buttom "Done" to close it but without the image.

this is the head of the .xhtml documet from Indesign.

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
    <head>
        <meta charset="utf-8"/>
        <meta content="width=553,height=723" name="viewport"/>
        <title>001NEGRA-3</title>
        <script src="../Misc/jquery-1.10.1.min.js" type="text/javascript"/>
        <link rel="stylesheet" href="../Styles/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
        <script type="text/javascript" src="../Misc/jquery.fancybox.pack.js?v=2.1.5"></script>
        <script type="text/javascript" src="../Misc/jquery.fancybox.js"></script>
        <link href="../Styles/idGeneratedStyles.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript">
            $(document).ready(function() {
            $(".fancybox").fancybox();
                });
        </script>
</head>

And this is the line of the image:

<a class="fancybox" href="../Images/fig01_003.png">
    <img alt="" class="_idGenPageitem-2 _idGenPageitem-3" src="../Images/fig01_003.png"/>
</a>

Many thanks!! If It is not possible doing with fancybox, does anybody know another way to do it?.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Víctor
  • 1
  • 1
  • you either install fancybox.js or fancybox.pack.js but not both. Do the demos at http://fancyapps.com/fancybox/ work in your iPad? – JFK Nov 12 '14 at 23:04
  • Ok. I have installed only one. If I open the demo with Safari (iPad) all is OK. – Víctor Nov 13 '14 at 09:21
  • Im making a FixLayout ePub exported from a book made on Indesign. And I want to make that effect using javascript or jQuery wich are supported with EPUB 3 format. It works fine on iBooks in a MacBook but not with iBooks. This is what I see: [link](http://es.tinypic.com/view.php?pic=2wbt6xh&s=8#.VGR5ysm9bq4) And this is when you tap: [link](http://es.tinypic.com/r/mm7oko/8) – Víctor Nov 13 '14 at 09:29

1 Answers1

1

I Fixed this with touchend Event

$('div').on('touchend', (event) => {
 $.fancybox.open($("dive"),{
     autoSize: true,                
 });
});
Amir
  • 11
  • 3