Iframe in Tab Madness!

Question

I've searched all over and have found possible solutions but they don't quite work how i need them to. I am really new to jQuery but I'm trying :-)

I have an iframe that sits in a Tab ( Tabs powered by jQuery)

In the third tab sits an iframe that holds a slideshow

My problem:

When I click on the third tab which houses the iframe all the controls appear, the carousel seems to be working, but ...no pictures!!!

Firefox helped me find what fixes the problem, now i just need to find a way to do fix it.

In Firefox when i right click on the iframe and go to This frame -> Reload Frame VOILA! Pictures are back!

Question:

Is it possible with jQuery to tell when the third tab is selected and to refresh a div which contains the iframe when that third tab is selected?

Tab Code:

<script type="text/javascript" charset="utf-8">
            $(function () {
                    var tabContainers = $('div.tabs > div');
                    tabContainers.hide().filter(':first').show();

                    $('div.tabs ul.tabNavigation a').click(function () {
                            tabContainers.hide();
                            tabContainers.filter(this.hash).show();
                            $('div.tabs ul.tabNavigation a').removeClass('selected');
                            $(this).addClass('selected');
                            return false;
                    }).filter(':first').click();
            });
    </script>

Test page can be found here: http://artitechture.com/blah/tabs.html

Any help would be appreciated...I want to learn!

Answer 1

Within the iframe you have a doc ready method that tries to call the pngfix() plugin method however this has not been included within the iframe. This will not help.