I am using fancybox, but when I have an array of PDF images, the navigation arrows allowing you to change between pdf documents overlay ontop of the PDF controls stopping users from scrollign through the document etc.

I have created a fiddle showing the problem, I would greatly appreciate any help.

regards

Tom 

[Fiddle Here](http://jsfiddle.net/tomwilliams/g4VdE/2/)

```
<a class="fancybox">Click to show pdf</a>

```

```
$(".fancybox").click(function(){
var photoArray = [];
photoArray.push({ href: 'http://samplepdf.com/sample.pdf' , type: 'iframe' });
 photoArray.push({ href: 'http://samplepdf.com/sample.pdf' , type: 'iframe' });
 photoArray.push({ href: 'http://samplepdf.com/sample.pdf' , type: 'iframe' });
 photoArray.push({ href: 'http://samplepdf.com/sample.pdf' , type: 'iframe' });

$('.fancy').fancybox();
        $.fancybox.open(photoArray, {
            'openEffect': 'elastic',
            'closeEffect': 'elastic',
            'nextEffect': 'fade',
            'openSpeed': 600,
            'closeSpeed': 200,
                autoSize : false,
                beforeLoad : function() {                    
                    this.width = 1000;  
                    this.height = 800;
                },
                helpers: {
                    overlay: null
                //buttons: {}
            },
                iframe: {
                    preload: false
                }
        });

```

});