Hello, I have been trying to get this sorted out for two weeks now, and I guess I just don't understand/know enough javascript (jQuery specifically) to get it right...
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.
<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();
});
</script>
<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>
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.
I have learned throughout my searchings that scripts contained on remote pages that are loaded with ajax into an i-frame need to be placed in the < body> of that page in order to be loaded. BUT, it seems that since the iframes are initially hidden by the UI-tabs plugin, and their content is loaded into DOM after the container page is ready, the scripts are executed too early (before remote content is read by the browser). The gallery displays properly when viewed by itself, as well as from inside the i-frame in two cases: the tab containing the iframe is active when the container page loads, and if the i-frame is reloaded independently of the container page.
How can I make sure that all remote content being sent to the iframe is loaded before running the Galleria scripts on those pages?
The test case website can be found here: http://homecapture.ca/sets/project_index.html
THANKS!
ps. I may not be a total noob to jquery, but I am clearly pretty far from being fluent with it, so please bear this in mind when you answer.
- Is there a reason that you have to do this with iframes?
- That's the only way Jalbum documentation/forums provide for including the Galleria pages which that software generates as part of other .html documents... The person in charge of generating content for the galleries is not very code-literate and so relies on the GUI of Jalbum to make the gallery pages... I think what I'm struggling to figure out right now is how do I go about including a callback function, or an .ajaxComplete() handler so that the script inside the iframe is loaded AFTER iframe content is added to DOM...
- Given how bad it looks, you should probably present an alternative solution that doesn't involve Jalbum.
2 answers
points
Have you tried using the load event of the tab widget? This event is fired when a remote tab loads its content.
http://jqueryui.com/demos/tabs/#event-load
points
Maybe I'm attaching the code in a wrong way? Below is what I've tried, and that seems to even break the tab function...
$(function(){
// Tabs
$('#tabs').tabs();
$('#tabs').bind('tabsload', function(event, ui){
$("#thumbnails_container").imageScroller({
onBeforeScroll: function() { $.galleria.stop() },
onScroll: function() { $.galleria.start() },
duration: 120,
imageWidth: 106,
size: 6,
fastSteps: 5
});
var formattedThumbnailOpacity = 67/100;
$(".thumbnails_unstyled").addClass("thumbnails");
$("ul.thumbnails").galleria({
history: false,
clickNext: true,
insert: "#main_image",
onImage: function(image, caption, thumb) {
var extras = $("#extras").css("display", "none").empty();
image.css("display", "none").fadeIn(500);
caption.css("display", "none").fadeIn(500);
if (false) {
var extrasList = $("<ul></ul>");
extrasList.addMetadata("Date", thumb.data("originalDate"));
extrasList.addMetadata("Camera", thumb.data("cameraModel"));
extrasList.addMetadata("Exposure time", thumb.data("exposureTime"));
extrasList.addMetadata("ISO", thumb.data("isoEquivalent"));
extrasList.addMetadata("Aperture", thumb.data("aperture"));
extrasList.addMetadata("Focus distance", thumb.data("focusDistance"));
extrasList.addMetadata("Focal length", thumb.data("focalLength35mm"));
extrasList.addMetadata("Keywords", thumb.data("keywords"));
if (extrasList.children().length > 0) {
extras.append(extrasList);
extrasList.find(":first-child").addClass("first");
extras.css({
width : (image.outerWidth() - (5 * 2) + 100) + "px"
}).fadeIn(500);
}
}
var li = thumb.parents("li");
li.siblings().children("img.selected").fadeTo(500, formattedThumbnailOpacity);
thumb.fadeTo("fast", 1).addClass("selected");
image.attr("title", "Next image");
var original = thumb.data("original");
if (original) {
var originalLink = $("<a></a>").attr("href", original).text("Download original");
caption.append(" (").append(originalLink).append(")");
}
},
onThumb: function(thumb) {
var li = thumb.parents("li");
var fadeTo = li.is(".active") ? "1" : formattedThumbnailOpacity;
thumb.css({display: "none", opacity: fadeTo}).fadeIn(1500);
thumb.hover(
function() {
thumb.fadeTo("fast", 1);
},
function() {
li.not(".active").children("img").fadeTo("fast", formattedThumbnailOpacity);
}
)
},
preloads: 6,
fastSteps: 5,
onPrev: function() {
$.imageScroller.scrollLeft();
},
onNext: function() {
$.imageScroller.scrollRight();
},
onPrevFast: function() {
$.imageScroller.fastScrollLeft();
},
onNextFast: function() {
$.imageScroller.fastScrollRight();
}
});
$.galleria.loader = $("<div></div>").addClass("loader").append($(new Image()).attr("src","res/loader.gif").attr("title","Loading..."));
prepareArrow = function(arrow) {
arrow.css({display: "none", opacity: 0.5, "padding-top": "28px"}).fadeIn( 1000);
arrow.hover(
function() {
arrow.fadeTo("fast", 1);
},
function() {
arrow.fadeTo("fast", 0.5);
}
);
}
var leftArrow = $("#left_arrow");
prepareArrow(leftArrow);
leftArrow.click(function() {
$.galleria.prev();
});
var rightArrow = $("#right_arrow");
prepareArrow(rightArrow);
rightArrow.click(function() {
$.galleria.next();
});
if (false) {
var leftFastArrow = $("#left_fast_arrow");
prepareArrow(leftFastArrow);
leftFastArrow.click(function() {
$.galleria.prevFast();
});
var rightFastArrow = $("#right_fast_arrow");
prepareArrow(rightFastArrow);
rightFastArrow.click(function() {
$.galleria.nextFast();
});
}
});
I'm putting it in the head of the container page. I've been trying all kinds of different methods, and it's starting to look like my syntax is wrong somewhere....
THANKS a lot for your help!
