I want to put a floatbox image slideshow constrained into an iframe. When the user clicks on an image, I want it to start a new unconstrained image slideshow. My client wants individual pictures and text for each of his projects to display in the constrained window, and when the visitor clicks on a project he wants to display an unconstrained slideshow of that particular project.

I have set this up using innerfade (http://medienfreunde.com/lab/innerfade/) for the constrained window (it simply runs inside of a div) and had that call floatbox. Works great except that every once in a while floatbox locks up while loading a new image. And it seems to be only in IE. I'm stuck on how to troubleshoot the problem, and I have used floatbox before and never seen it lock up, so I expect it is an interaction between floatbox and innerfade.

So I am open either to some help figuring out why floatbox locks up when called from innerfade (which is pretty simple code), or to a way to set up the constrained window in floatbox and then call the new floatbox window.

Actually I have a slight preference to fixing the innerfade/floatbox combination, but only because I already have it coded and working, and then I can get on with my project. On the other hand, it would probably be good to have a better handle on all of the capabilities of floatbox.

So I will greatly appreciate any help, either way, that I can get!

And incidentally, Floatbox is a great product!

thanks
Anne Johnson

Actually I think I am getting it - I had constrained my thinking by an inappropriate assumption!

But I am still having a couple of problems.

I have the slideshow working almost the way I want at the first level. It autostarts, but I need to adjust margins and padding and the like. But when I add autoStart:true to an image in the second level slideshow, and then load the page, it skips the first level slideshow on goes directly to the second level. Also, I still don't know how to get it to open full screen instead of just in the iframe.

I always constrain my thinking by inappropriate assumptions. It's part of my modus operandi. But now I'm getting even more confused. You've thrown autoStart into the mix.

So I take it you have a base page with floatbox.js included on it and that base page contains an iframe and that iframe has framebox.js included on it. Now I get cross-eyed when you talk about autoStarting slideshows in both windows. I thought you wanted to start the slideshow in the top window when a user clicks on an image in the iframe window.

Let me go back to starting the top slideshow from an iframe click. Here's the basic plan.

First, you mention that the constrained slideshow contents have both an image and some text. So I assume, hope and pray that the members of this slideshow are html elements like little iframes, ajax or inline content, and are not just raw images. (If they are just raw images, we will have more of a challenge getting an onclick action set on them as this action is already in use by floatbox's image resizing option.)

To launch something on the parent page from the child iframe code, just reach back using parent.fb. Now you're talking to the floatbox object on the parent page. So, for example, you could have an anchor in the iframe content with an onclick action onclick="parent.fb.start(parent.document.getElementById('foo')); return false;". ('foo' is an id on an anchor that's tricked out for floatbox operation.)

I'm not sure what you want to do with the running iframed slideshow when the parent window one starts up, but a couple of options are adding fb.setPause(true); or fb.end(); to that onclick action.

I hope I'm on the right track here for you.

Thanks, and thanks for the sense of humor - constraint by inappropriate assumptions I think is a basic human attribute, part of the way we think.

I think you are definitely helping - I was looking at using the info tag, but I like being able to click on the image better. I did have the images each in a div, and was thinking about taking them out, but I can easily leave them. The text was just short description which I was going to move out of the div and into the text attribute, but I can leave the divs as containers, not a big deal. I do want the slideshow to autostart when it is entered.

I did see a freeze in floatbox, in IE8, with this new all floatbox setup. It was running locally on my computer, not over the net. Are you aware of this being a problem? or what my cause it? When it happens I get the, well, I will call it an iris - all the radial lines that move in a circle - does that dynamic icon have a name? Must - we name everything (and then because we have named it we understand it). So anyway, it just sits there and goes around.

I have to take my nine year old to ice skating lessons in a few minutes, and have been up too late for the last few nights, so I probably won't be back to this until sometime tomorrow afternoon or evening (got things going on in the day). Greatly appreciate your help!

Anne

OK, I lied, I didn't turn in early.

Not sure what is wrong, but here is my code - in the iframe:

<div id="proj1" onclick="parent.fb.start(document.getElementByID(&#039;gather1&#039;)) " >
<img src="pictures/First_Christian_Youth_title.jpg"  alt="First Christian Youth Center" /> 
</div>
<div id="proj2">
<img src="pictures/batesville_fd.jpg"  alt="Batesville Fire Department" /> 
</div>

<a href="#proj1" rel="floatbox.projects" rev="autoStart:true enableWrap:true"   > </a>
<a href="#proj2" rel="floatbox.projects"> </a>

And in the parent page:

<div id="gather1">
<img src="pictures/Projects/Gathering1.jpg"  alt="The Gathering Place"/>
</div>
<div id="gather2">
<img src="pictures/Projects/Gathering2.jpg" alt="The Gathering Place" />
</div>
<div id="gather3">
<img src="pictures/Projects/Gathering3.jpg" alt="The Gathering Place" />
</div>

<a href="#gather1" rel="floatbox.gather"> a</a>
<a href="#gather2" rel="floatbox.gather"> </a>
<a href="#gather3" rel="floatbox.gather"> </a>

Everything works great except the call to from the iframe back to the parent page - "onclick="parent.fb.start(document.getElementByID('gather1'))" . I get an error on the call of "Error: Object doesn't support this property or method".

Help!
Anne

getElementById

Lower case d

Oh, and you'll want to put return false; in your onclick action too.
onclick="parent.fb.start(document.getElementById('gather1')); return false;"

We haven't yet addressed the slideshow getting stuck on what I call the loading gif in IE8, but I would like the chance to tackle that. If there's a bug in floatbox somewhere that's causing that, I'd appreciate the opportunity to track it down and exterminate it. Resolution of that would likely involve you pointing the floatbox include lines on a page with the problem to the floatbox files on my test server so I could insert surgical probes to isolate the problem. Are you interested in doing that sometime?

Cheers...

I hate when that happens! (typos that is).

OK, that got rid of the 'object doesn't support . . .' error, but now I am getting a 'Error: Object required' on line 430 ['if (anchor.getAttribute {' line] - code is below for your convenience. That and I am beginning to feel stupid - or maybe I have just been looking at this too long. That must be it, lol.

regarding testing, be glad to do that, or I could send you a couple of files to play with (the innerfade files are readily available for download). Either way.

Here's the code where the error is occurring - no doubt my set up is wrong triggering the error. My code is the same as before (except for the lowercase d and the return false.

thanks for you help.
Anne

start: function(anchor) {
	if (this !== fb.lastChild) return fb.lastChild.start(anchor);
	var that = this;
	this.preloadImages('', false);
	if (anchor.getAttribute) {
		var a = {
			rel: anchor.getAttribute('rel'),
			rev: anchor.getAttribute('rev'),
			title: anchor.getAttribute('title')
		};

Mea culpa.
I didn't read your example close enough.
My original recommendation was onclick="parent.fb.start(parent.document.getElementById('foo')); return false;"

You're missing that second "parent". This is important because the anchor element you are getting by Id is on the parent document, not the current (iframed) doc.

Actually my fault - I remember seeing both parent tags when I looked at your first response, and I know I put them in originally. I must have taken it out at some point when I was trying different things, and didn't get them both back in.

And now the errors are gone, but the floatbox in the parent page is also not opening.

thanks
Anne

I feel a little bit guilty because I led you a little astray. I forgot that the things inside the iframe slideshow are themselves iframes. So "parent" just gets you back to the iframe. You would need "parent.parent..." to get all the way back to the top document. Or better, just use "top" directly, as in onclick="top.fb.start(top.document.getElementById('foo')); return false;"

To make up for my bad advice, I put together a little test page to make sure I wasn't telling you too many lies. http://test.randomous.com/misc/t.html
(Never mind the wonky shadows. That's a feature of it being on the test site.)

You can of course view source on that to slice and dice.

I got my code working using your example. My call was OK, but I was trying to use divs in my parent page instead of images. I think I got the idea by (mis)reading your first post - You suggested that I needed to not have just raw images in the iframe, and I took that and thought, gee, if my client wants lots of text, I could use a div and have lots of ways to play with the images and text!. When I switched back to images (which I had tried before, but not since replacing the 'parent' with 'top') everything started working.

So anyway, I think the images at the top level will be fine, so I plan to go with that. Although, after struggling with using divs, I would love to know how you would do that. Nice move with the href with no reference for the id - I would have thought that would cause problems somewhere.

Thanks for all of your help. If you want to look at the innerfade and lockup (I think you called it 'loading gif in ie8', either by my sending you some files, or by my linking to the floatbox files on your site, I will be glad to do that.

thanks!
Anne