Background:
I'm in the process of creating a page that allows the users to click on a link to view a restaurant's menu in FancyBox v2. I originally had each page of the menu as a separate image, but through user testing, we decided to eliminate the thumbnails for each menu page and concatenate them into one tall image (each page below the last). Users can now scroll through the whole menu at once inside the FancyBox iframe. This works fine in most browsers, and even on the mobile devices I've tested.
The Problem:
Firefox automatically scales the image down to fit in the iframe. The user is forced to click the image with the little magnifying cursor to see the image in full size and then proceed to read the menu.
The JSFIDDLE: http://jsfiddle.net/2ZW9K/6/
The Findings:
What I've found in the browser's code inspector is that FancyBox creates a #document
, <html>
, <head>
, <body>
, and an <img>
inside of the iFrame, and if I add something like <style type="text/css">img{height: auto !important; width: auto !important}</style>
, it removes any scaling down that Firefox has done to the image. However, I'm at a complete loss as to how to insert this additional style into the html of the created iFrame. I've looked throughout the entire FancyBox source code and have tried to insert the HTML/CSS using FancyBox's afterLoad
option, but I can't figure out how to access the internals of that created iFrame to place anything.
The Question:
Can anyone assist me in finding where in the FancyBox source code I can insert these styles, or does anyone know a line of jQuery that would place me inside the created <head>
tag?
On provided jsfiddle, you cannot access iframe content due to same origin policy. In fact, fancybox set src attribute of image to the iframe. So, maybe test it on same domain (same as image) and try to access iframe contents like that:
afterLoad: function () {
$('.fancybox-iframe').contents().find('head');
},
But i think its not the right way to do it because the content will already beeing displayed.
I'll suggest to embeded image in its own html page, this way you could apply any style you wish, for example, test this and see there if its expected result:
http://jsfiddle.net/5QSnK/show/
This is link to embeded image page, used for the example: