Issues loading Jquery (Galleria) script from inside an iframe_问答_开发者

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 ....

I'm sort of a noob and don't fully understand your problem, but maybe this simple solution will help you. I'm using jQuery UI Tabs and Galleria 1.2 beta as well (though not iframes) and had the same problem with my galleries not loading properly in inactive tabs. According to the jQuery UI Tabs documentation:

Why does my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?

Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers).

There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

This worked perfectly in my case.

Ok, so the 'answer' to my question is this: the Galleria plugin script that converts the list of images into a gallery is loaded and executed when DOM is ready on the container page (the page with UI tabs, where the iframe that contains the Galleria page is initially hidden). Because the iframe content has not been added to DOM at this point, the script is executing on elements that are 'not there'. This explains the correct performance when the iframe is reloaded.

NEW QUESTION: How do I cause the troublesome script (now placed in an external file, and called to the gallery page from it's body using

 $.getScript("res/jquery_JAlbum.js", function(){
  alert("gallery script loaded and executed");
 });

to be loaded and executed when an appropriate tab is clicked and displayed?

In other words, what can one do to make UI tabs load iframe content with ajax, confirm that new elements have been added to DOM, and only then execute the functions that will turn the list elements into a gallery?

here is my way for 2 galleries,

define 2 galleria ids first:

$('#galleria1').galleria({width: 740, height: 800});
$('#galleria2').galleria({width: 740, height: 800});

define 2 accordion panel with single tabs:

var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:false, defaultPanel:0});
var SpryAccordion2 = new Spry.Widget.Accordion("SpryAccordion2", {useFixedPanelHeights:false, defaultPanel:0});

aaaaaaand:

setTimeout("SpryAccordion2.closePanel();", 1000);

each panel includes 1 galleria not each tab. i also defined functions to make panels act like tabs of a panel:

function openSpryAccordion1Panel(panel)
{
    SpryAccordion2.closePanel();
    if (panel != SpryAccordion1.currentPanel) {
        SpryAccordion1.openPanel(panel);
    }
    else SpryAccordion1.closePanel();
}

function openSpryAccordion2Panel(panel)
{
    SpryAccordion1.closePanel();
    if (panel != SpryAccordion2.currentPanel) {
        SpryAccordion2.openPanel(panel);
    }
    else SpryAccordion2.closePanel();
}

don't know if i am clear enough but feel free to ask about my way