the site in question: http://homecapture.ca/testset/index.html
The scenario: I have a tabbed menu generated from an unordered list, when a menu item is clicked it reveals an iframe which links to the page containing an image gallery. I am using jQuery UI tabs for the tabbed menu, and the galleries to which I'm linking are jQuery Galleria pages, automatically generated with Jalbum.
The problem: The galleria plug-in only works normally from inside of the containing iframe in Chrome 5.0, has inconsistent behaviour in IE8 (seems to work in my local copy, but won't load properly online), and is not loaded properly in Firefox 3.6.3. Instead of displaying a thumbnail area and the first large image, the Galleria page shows the first thumbnail only, then when it is clicked the image it links to, but if you right-click and go Back, the iframe content shows up as a properly rendered Galleria page.
so the code looks like:
<head>
<title>homecapture.ca</title>
<!-- link to jquery-ui-1.8.1.custom.css rel="stylesheet" -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Tabs
$('#tabs').tabs();
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<!--there are some more css in here for now-->
</head>
<body>
<div id="tabs" style="margin:0 auto;clear:both;">
<ul>
<li><a href="#tabs-1"> 1 </a></li>
<li><a href="#tabs-2"> 2 </a></li>
<li><a href="#tabs-3"> 3 </a></li>
<li><a href="#tabs-4"> 4 </a></li>
</ul>
<div id="tabs-1">
<p> Information </p>
</div>
<!--- this tab loads a flash application and works fine -->
<div id="tabs-2">
<iframe src="tour/index.html" width="960" height="700"></iframe></div>
<!-- image gallery tab-->
<iframe id="tabs-3" src="gallery_jd/index.html" width="960" height="700"></iframe>
<!-- drawings tab -->
<iframe id="tabs-4" src="gallery/index.html" width="960" height="700"></iframe>
</div> <!-- end tabbed content-->
</body>
Jalbum generates script in the < head> of the iframed page in addition to linking to jQuery and the galleria plug-in. All of it seems to be in charge of the gallery navigation , and I have relocated it to the < body> of the page, in an effort to make it load after the parent page scripts, and together with the gallery content.
EDIT: having browsed around more, it seems that simply relocating the script from the header to the end of the body does not necessarily result in the entire iframe being loaded prior to the code (which seems to be the problem)
At this point I am not sure what else I could do to solve the problem, without digging around in all or some of the library and pluging .js files (which I am not knowledgeable enough to do without some pointers). Has anyone dealt with a similar issue? I'm seeing some solutions for manipulating iframe content from a parent page with jQuery on here, is that what I should be researching instead?
Hello, first of all - I'm not entirely new to javascript, but am not fluent in it as I am with html and css, and am especially new to jQuery... so please excuse me if this questions seems easy or obvious, but after days of google I still have no solution to the problem... using jQuery 1.4.2.min, jQuery-ui-1.8.1 ....
Thanks in advance for all the help!