iFrame

Hi,

I would like to integrate several jalbums, specifically bananalbums into my site. I understand that this can be done with an iFrame (I’ve no idea what that is, but I’m happy to find out). I’ve seen that Paul Dunning produced an Action for iFrame, but I can’t find the action itself anywhere on the web. Has it become outdated? Perhaps there’s a better way of doing it now? I’m running FW 4.4.

The developer of the bananalbum says this about embedding :

Embed a BananAlbum in your site. · 19.10.06

Here’s a nice tutorial about embedding a BananAlbum in your site. It can be done very easily by using an IFRAME.

For example; Your album is located at www.yourdomain.com/album, the piece of html-code you’ll have to put in your page is: IFRAME SRC=”http://www.yourdomain.com/album” WIDTH=424 HEIGHT=350 FRAMEBORDER=0 SCROLLING=no>

Is this something that I could do easily with FW?

Any help/pointers, much appreciated. :)

Grant

www.grantsymon.com

quote

Yes, you can do this quite easily. First publish your banana albums to your choice of server. This is how you get iFrames to work - I use FW Pro 4:

1. Have a blank part prepared for your album area.
2. Click Insert>Action Item>IFrame
3. Make the provided box roughly 750x600 (you can change this to your taste)
4. With the box selected, view the Actions window
5. For the URL select the previously published location (only giving up to the last directory, you wont put in an actual filename such as index.html or such)
6. Select scrolling to NO and play with other options as you choose.

That should get you started. The action that is installed selects the html-code for you as outlined in your post. So if you can get the action, you are all set. (Just download it, double click, and it installs. Then you access it from the menu as I stated)

quote

Beatrice,

thanks! … That sounds really simple.

I in fact found the iFrame action on the Softpress site. I guess I’ll have to stop doing these things at 2am. :) I was sure it wasn’t there. Don’t know why the Tutorial doesn’t reference the downloads though. :/

Grant

BTW … To all those concerned. This new look list-board is really cool. Well done! It’s the nicest I’ve seen. (And works particularly well with Safari’s re-sizable text window.)

quote

Beatrice, thought you might be able to help me here, since I posted this six days ago and no one replied.

Subject: iframe as target for a link from different page

What I want to do:

Page One has an iframe.

Page Two contains specific links that when clicked will open a specific web page in the iframe on page one.

Here are the instructions from a previous post on how this is accomplished, but it didn’t work, so I experimented and found the solution. I lost my solution and can’t get it back:

The original post reads (freewaytalk.net/thread/view/9246#m_9332):

“… what you do is create the link for each url > then press the extended button > then press new > in the name box type “target” ( without the quotes ) > then in the value box type the name of your iframe ( i.e. iframe, fred, or whatever” ) > then type ok > and ok again.”

Following these instructions causes the web page to open, but does not target inside my iframe.

This is what I am doing: 1. Create an iframe named “designer” on page 2. 2. Create a link on page one and in Edit Hyperlink dialog choose “other or http” 3. Type the full url to the page I wish to open. 4. While in the Edit Hyperlink dialog click the “extended” button 5. In extended attributes click the “new” button and name=target and value=”the name of my iframe” (in this case “designer” 6. Okay all windows. 7. When preview in browser or upload clicking the link opens the targeted website, but it doesn’t open in in my iframe.

As I said, I had this working somehow, but cannot replicate it. Any help will be greatly appreciated.

Cecil

quote

Hi Cecil

The instructions you read in that previous post were how to target different iFrame content from links in the same web page.

Your idea is a bit different in that you want to target page 2 from page 1 and insert the content into the iFrame on page 2.

You would need to alter the extended attributes to target your iFrame something like designer/page2.html(www.newcontent.com)

Now I know this is not the right syntax for this and to be honest I don’t even know if it is doable.

Why go to the trouble of targeting an iFrame on a different page anyway?

David

quote

Alternatively have links to multiple page2s with different iFrame content on each.

David

quote

Thanks Dave. That does shed some light on this. I will work this out in the morning.

I have a site full of products scattered throughout my site that are customized in real time using a design facility on a different host. I want my customers to stay within my site when using the facility, thus the iframe. In my initial tests (till I lost it) it appeared to work perfectly. There may be a better way to handle this kind of thing, but the iframed seemed the logical idea for my limited knowledge.

quote

I am not an expert at this by no means - but it sounds like you want to get external pages to show withing your site, right? Then the directions I gave would work.

If you want to use an iframe with another page from your current website, that is possible too - you just select that page from the drop down menu in the action window (same spot you select the external page).

Now, why do this? iFrame allows the scroll option. So I found it useful if I have a long text page, I can insert that into another current page - save space. The setup? One page for view and then I created a new folder called popups which contain the different size pages that are inserted into other pages as needed.

Hope that helps.

quote

Hi Beatrice,

Just had a look at the banana site and downloaded the creator, works well!

To get this up and running is it as simple as placing the folder it creates ‘pics’ on the server? Then reference this from the iframe actions pallette, however only ref” the folder NOT individual files!

To align where you wish the thumb nails to go say top/left/right is this also done through the iframe actions palette? And are the thumbnails also contained within the size of the space you allocate for this photo album?

I also looked at the site you did “BSB” mentioned on beta5 forum ‘CSS scrolling horizontally” and noticed you had also written a post in early jan about adding ‘poop up’ text etc to each thumbnail once selected, is this what you wanted to achieve? Sorry if I got the wrong end of the stick!

This is a feature that I would also like to use, hav you solved this issue yet or come up with another solution?

Is the folder that banana creates all contained within one page when shoen in freeway? i.e do each image have its own page, or all they all flash?

The only thing I can think of at the moment is to have a seperate page for each ‘thumb’ assigned to its own master ‘thumbs’ and apply some kinda slave image rollover or link so that once each is visited, the page appears to have its own text specific to that image!

I know you would prefer a popup to be inkeeping with the flash style of the banana album, correct? Complex, and messy as you said! ummmm……

Anyone have any suggestions?

quote

Hi,

I have another question about iFrame … which is working well, except, it leaves a large border around the flash content. Is there a way to force it to leave less, or none? I have tried using minus numbers for the Margins (and indeed huge numbers) but these have no effect on the placement of the flash-content (bananAlbum).

Grant

quote

Could you post a link to your test page? One of the tricks I use to diagnose these is to use either CSSEdit or Xyle scope to fiddle with the live site and see what happens. Often these sorts of things are caused by a different element or style rule than you imagine. Xyle scope in particular can show you the relative weight that each rule is given in the cascade. Most things on a page are affected by more than one rule, no matter how explicitly you may name that rule.

Walter

On Feb 6, 2008, at 8:03 AM, grantsymon wrote:

Hi,

I have another question about iFrame … which is working well, except, it leaves a large border around the flash content. Is there a way to force it to leave less, or none? I have tried using minus numbers for the Margins (and indeed huge numbers) but these have no effect on the placement of the flash-content (bananAlbum).

Grant

quote

Hi Walter!!

I haven’t got a test page yet. I’m still fiddling around trying to optimise the images for a larger size, but the bananAlbum side of things is working quite well. I’ll post when I have something online.

As for the borders … turns out that it’s JAlbum/bananAlbum which is creating them. I’m trying different tools, but they have varying capabilities. One of the weird things is that JAlbum is written in Java and is really very hard to work with. Let’s just say, it’s not like a modern app. :)

Grant

quote

On 6 Feb. 2008, 2:45 pm, grantsymon wrote: As for the borders … turns out that it’s JAlbum/bananAlbum which is creating them. I’m trying different tools, but they have varying capabilities. One of the weird things is that JAlbum is written in Java and is really very hard to work with. Let’s just say, it’s not like a modern app. :)

Grant

I set up a site here for a client using a personalised version of bananalbum ( paid extra to get rid of the logs etc ) www.fletcherphotography.co.uk/ukclc07.html

but you are right Grant it is a bit of a sod to get it right - in the jalbum settings dialogue in the bananalbum section i set all the margins to zero - if i remember correctly and by tweeking the sizes of thumbnails and large images and position of the scroll bars got there in the end.

I don’t think I’ll do it again in a hurry (-:

have fun anyway - always nice to beat the system when you get it working !

Gary

quote

Hello all.. Iam new here, finally upgrade to F Pro4,

but my issue is also IFrame. Please advise

I have a multiple menu list on the page and across from that is an iFrame box.

I just cannot figure out how to connect the dots. I tried what was suggested above by linking and using extended ect, but this does not work on the same page. I have made a mistake. So I tried layers of Iframes on top of each other and that does nothing

anyone who could help I would be most grateful

Thx

quote

Carla,

try breaking it all down to find out what’s going wrong.

Make a fresh empty page in FW and place an iFrame on the page.

Upload your iFrame content to your server (or have it locally, but you still need the address … remembering that when you publish, unless it is accessible via the internet, it will not be available to your site’s visitors)

In the Actions palette, set the URL for the content.

Preview it in your browser.

That should work. Now apply the same process to your normal page. If it doesn’t work, then I’d suggest making a copy of the page, then slowly stripping bits away until you find out what’s causing the problem.

N.B. iFrame will not publish if any other elements are sitting on top of it.

Grant

quote

On 7 Feb. 2008, 3:46 am, Carla wrote: I have a multiple menu list on the page and across from that is an iFrame box.

I just cannot figure out how to connect the dots. I tried what was suggested above by linking and using extended ect, but this does not work on the same page. I have made a mistake.

Hi Carla , what you do is highlight the link for each url in your list > then press command (apple) + k to open the hyperlink dialogue box > then choose your link url - either internal or external > press the extended button > then press new > in the name box type “target” ( without the quotes ) > then in the value box type the name of your iframe on the page ( i.e. iframe, fred, or whatever” ) > then type ok > and ok again.

just be careful that the content you have linked to will fit into the iframe otherwise you will get scroll bars up and sideways ( if in the action palette you set it at auto ), unfortunately in I.E. you might even get double scroll bars ! not found a way to cure that one yet ( unless someone knows a workround please ! )

plus if you are linking to external content it will also not show until you upload your page !

ps sorry cosjr - I have not had time to figure out how you link from one page and get the iframe to load separate or different content each time

Gary

quote

Thanks Grant

My iFrames works but only one scrolloer at a time. and with a menu on the left I can not figure how to connect it all.

When I click rollover it goes to the internal page of images but not in iFrame. When I layer one frame on top of another, that does not work either..

Thanks for the help

Carla

On Feb 7, 2008, at 3:46 AM, grantsymon wrote:

Carla,

try breaking it all down to find out what’s going wrong.

Make a fresh empty page in FW and place an iFrame on the page.

Upload your iFrame content to your server (or have it locally, but you still need the address … remembering that when you publish, unless it is accessible via the internet, it will not be available to your site’s visitors)

In the Actions palette, set the URL for the content.

Preview it in your browser.

That should work. Now apply the same process to your normal page. If it doesn’t work, then I’d suggest making a copy of the page, then slowly stripping bits away until you find out what’s causing the problem.

N.B. iFrame will not publish if any other elements are sitting on top of it.

Grant

quote

Thanks

I did this but the link goes to the internal page and does not diplay the scroll in iFrame. I have 5 links to fit in one frame. I already tried to layer frames but that does not work.. This is new to me so I am a bit confuised

Thanks On Feb 7, 2008, at 5:40 AM, diarbyrag wrote:

On 7 Feb. 2008, 3:46 am, Carla wrote: I have a multiple menu list on the page and across from that is an iFrame box.

I just cannot figure out how to connect the dots. I tried what was suggested above by linking and using extended ect, but this does not work on the same page. I have made a mistake.

Hi Carla , what you do is highlight the link for each url in your list > then press command (apple) + k to open the hyperlink dialogue box > then choose your link url - either internal or external > press the extended button > then press new > in the name box type “target” ( without the quotes ) > then in the value box type the name of your iframe on the page ( i.e. iframe, fred, or whatever” )

then type ok > and ok again.

just be careful that the content you have linked to will fit into the iframe otherwise you will get scroll bars up and sideways ( if in the action palette you set it at auto ), unfortunately in I.E. you might even get double scroll bars ! not found a way to cure that one yet ( unless someone knows a workround please ! )

plus if you are linking to external content it will also not show until you upload your page !

ps sorry cosjr - I have not had time to figure out how you link from one page and get the iframe to load separate or different content each time

Gary

quote

Hi Carla

Have you got a page online somewhere that we can have a look at?

David

quote

Carla

Also check which HTML output setting you have chosen in the Page Inspector> 3rd button along

I think it has to be 4.01 Transitional to work.

David

quote

Thanks to you all, but I have done all the above

You see I have 5 separate scrolls to fit on one page each to link to iFrame on the same page with arrows to scroll and stop it. This is my problem. I di not know howe to connect them all so it all triggers into the iFrame

On 7 Feb. 2008, 7:46 am, grantsymon wrote:

Carla,

try breaking it all down to find out what’s going wrong.

Make a fresh empty page in FW and place an iFrame on the page.

Upload your iFrame content to your server (or have it locally, but you still need the address … remembering that when you publish, unless it is accessible via the internet, it will not be available to your site’s visitors)

In the Actions palette, set the URL for the content.

Preview it in your browser.

That should work. Now apply the same process to your normal page. If it doesn’t work, then I’d suggest making a copy of the page, then slowly stripping bits away until you find out what’s causing the problem.

N.B. iFrame will not publish if any other elements are sitting on top of it.

Grant

quote

Hi Carla

I have been looking at this myself as I haven’t used iFrames except in their basic form andI couldn’t get it to work either.

…what you do is highlight the link for each url in your list > then press command (apple) + k to open the hyperlink dialogue box > then choose your link url - either internal or external > press the extended button > then press new > in the name box type “target” ( without the quotes ) > then in the value box type the name of your iframe on the page ( i.e. iframe, fred, or whatever” ) > then type ok > and ok again.

The critical part is this

the name of your iframe on the page

Now this is the value that you put in the iFrame action inspector pane and NOT what the iFrame is called in the Item General Settings of the Page Inspector

URL:

Scrolling:

Alignment:

Frame border:

Margin width:

Margin height:

Name: My iFrame Name

So to target your iFrame from your link you would have

the name box type “target” (without the quotes) > then in the value box type the name of your iframe which in this case would be “My iFrame Name” without the quotes of course.

Hope that this does the trick for you - it did it for me. On top of everything else of course.

David

quote

Thanks David I have tried this too and the link continues to take me to the page, and not inside frame.. I am getting close. I know I am not doing one thing.,…

Ugh well I will keep trying Thx so very much

Carla

quote

Dave I tried again and it is working You are fantastic!

Ok now all I need is a stop button for the scrolls Thanks

quote

Hi

I am pleased that we were able to help.

Remember to post a link so that we can have a look at your hard work!

David

quote

David

I will absolutely send you all the link to our website once I upload it. Does anyone have an idea how to make the scroll stop, so one can look at an image longer…. wow.. am I a dodo or what. I can not figure this out!

You are all wonderful

Carla

quote

My site is now up and running with the iFrame and bananAlbum working really well together.

Walter … you are now free to take a look! :)

Thanks Beatrice for the help. It made this much easier

You can see the effect here :

www.grantsymon.com

NB, some of the content in the ‘Patates’ page and the ‘Mix’ page has yet to be updated for the larger image size I’m now using. So it may seem ‘mushy’ and slightly pixelated.

Also and FWIW, I’m using Aperture via a free plugin for bananAlbum (works with iPhoto too) to create the albums, which makes it really easy and gives great control. I’m also using .Mac to host the site, which is equally easy with the built-in support in FW and happily I find that hosting a site on .Mac is very fast these days. It used to be unusably slow.

Question …

I have a number of photographer chums who are interested in building sites like mine … does the iFrame Action work with FW Express?? (It’s really hard to find any clear explanations on the Softpress site).

Grant

quote

It looks really good. Does nothing useful for my diet, though. One question — the orange stripe at the top of the navigation — is that meant to move along to show which of the galleries you are viewing? I thought it might, but then it didn’t.

Man, do I miss food photography!

Walter

On Feb 13, 2008, at 5:55 AM, grantsymon wrote:

Walter … you are now free to take a look! :)

quote

On 13 Feb. 2008, 11:44 am, waltd wrote:

the orange stripe at the top of the navigation — is that meant to move along to show which of the galleries you are viewing?

Hi Walter,

no … it’s not, but now I see why you would think so. It was intended as a simple way of highlighting my most recent work. However, now that you mention it, that would be quite nice to have. Any tips on the absolute simplest way of doing it, with the least performance hit? :)

Sorry about enticing your tummy to grow. :)

Grant

quote

Since there’s no practical connection between the iFrame and the rest of your page, the easiest way to manage this would be to use a Rollover in Click mode. The two events (click here and particular page load in iFrame) would be synchronized, but not driven by one another.

You could also use this same Rollover to make the navigation “flutter” when you mouse over it, so it looks more active. I would set the button to roll over to a slightly lighter-color version of itself, and then to Click to the orange state.

The more precise way to do this would be to set a JavaScript observer on the iFrame, and then change the current navigation tab when the source of the iFrame changes. But that’s quite a lot of fiddling for very little incremental improvement.

Walter

On Feb 13, 2008, at 7:52 AM, grantsymon wrote:

> >

On 13 Feb. 2008, 11:44 am, waltd wrote:

the orange stripe at the top of the navigation — is that meant to move along to show which of the galleries you are viewing?

Hi Walter,

no … it’s not, but now I see why you would think so. It was intended as a simple way of highlighting my most recent work. However, now that you mention it, that would be quite nice to have. Any tips on the absolute simplest way of doing it, with the least performance hit? :)

Sorry about enticing your tummy to grow. :)

Grant

quote

Hi Walter … I went for the simplest route, by simply changing the colour of the buttons according to the page. But I think you’re right. It definitely aids navigation.

Grant

quote

Just received this in the Softpress email newsletter. I used the same technique described below for my 13 year old son’s photography portfolio lucaventer.com/

Freeway Tricks - Embedding a photo gallery from Aperture or iPhoto into a Freeway page Are you an Aperture or iPhoto user? Do you want to embed rich media galleries into your Freeway page? If so, the secret is iFrames.

iFrames are a standard web convention which allow you to embed a webpage into another page. Read more about them at wikipedia. They’re fairly easy to set up and there’s a Freeway Action to make it even easier. Get the Action here. www.softpress.com/kb/article.php?id=196

Next, make and post your slideshow. From Aperture or iPhoto, create an album of images you’d like to use or select one you already have. There’s no limit to the number of images you can use, so have at it! Using the free Flash Album Exporter flashalbumexporter.home.comcast.net, export your album to a folder. Next, simply upload this to your web server using an FTP client (we love Transmit, but anything will work here). Be sure to make a note of the URL for the gallery you’ve just created (for example - mywebserver.com/gallery/).

Back in Freeway, choose a blank area in your page for the gallery. Choose Insert>Action Item>iFrame. Make the box as big as you like, then select the Action Inspector from the Window menu. Enter the URL for your gallery, customize the display settings, and publish your site. That’s it!

quote

Not sure why my previous post ended in this topic, I was replying to Steve Curran’s question about a photo gallery freewaytalk.net/thread/view/28000#latest

quote

With reference to the newsletter I can’t get the Flash Album Exporter to install. I have followed the instructions to the letter, but the new tab as described in the instructions to allow me to create the folder to put on the FTP will not show up in iPhoto.

Does Flash Album Exporter work with Leopard?

quote

A BananaAlbum slideshow in an iFrame works in Safari and IE but not FireFox. In FireFox the photo borders show where the thumbs should be, but the thumbs are black, no photo is visible. Does FireFox need a plugin for this to work?

page is here: www.edgeoutreach.com/bananatest.html

I’m using FW Pro 4.2.2.

quote

It doesn’t look like the iFrame causes the problem, here’s the page in the iFrame and it displays the same behavior:

www.edgeoutreach.com/PureWater/

I would contact Adobe? or whoever it is makes the Bananlbum to find out what could be causing the problem.

Cheers,

Joe

On 6 Mar 2008, at 16:51, troubadour wrote:

A BananaAlbum slideshow in an iFrame works in Safari and IE but not FireFox. In FireFox the photo borders show where the thumbs should be, but the thumbs are black, no photo is visible. Does FireFox need a plugin for this to work?

page is here: www.edgeoutreach.com/bananatest.html

I’m using FW Pro 4.2.2.

quote

Thanks Joe for pointing this out. I’ve sent in inquiry to BananAlbum about the issue. I’ll post the response.

quote