After a little experimenting I have devised a way to embed my flickr page in my photos page without IFrames. In addition, this was done using an asynchronous method and now I own the markup. This is a really nice idea as it will allow for many different sites and services to be mashed-up on a single page. The important thing for me in all of this is that I control the presentation of my photos page.
** Currently, this is only working in IE… I will investigate FF over the weekend.
If you would like to see the coolness that I am speaking of then simply navigate to my photos page. As you will notice it is displaying my flickr page only without all of the extra stuff that I don’t care to display. You can even expect my presentation to be cleaned up quite a bit in the future.
At this point, because I am so tired, I am just going to give you the rundown of the basic concepts for what I did. This weekend I will give you some sample code so that you can add your own flickr page to your site and change its presentation.
I have two pages; a static html page and an aspx page for writing out my flickr page. On the html page I employed JAH to load my aspx page. Originally, I tried to point JAH directly to flickr. However, you will find this not to work because it is on different domain and server. You can call an external site from your localhost web server, but external users will not be able to request your page successfully. Therefore, I put the aspx page on the same server so that it will be loading a local page. The aspx page simply makes a request to my flickr page and writes it out. In the second part of my post I show you a couple of different techniques you can use on this aspx page.
After I load the page there is a problem with all of the links because now they are pointing to my server’s address. Therefore, I wrote a little JavaScript to update these links. I still need to fix it on my main links so that they do not point to flickr. The important thing for me was that I called my rewrite function in the body onload event. Therefore, I needed to have the flickr page load before the body was loaded. To do this I had to use the window.onload event so that I could call JAH to request this page early.
The other big thing I did was to update the CSS so that everything looks pretty. I am still working on this aspect, so bear with me. I want to integrate my photos better in the future.
In the second part I will give you some actual code to look at and describe my technique in more depth.
Imagine the possibilities with this strategy though. You can really include external services on your site quite easily and make them blend well. Again, I am not using an IFrame and the pages are able to load asynchronously and you can write your own CSS for them. This means that you could do some really cool stuff because you do not have to include a full page in your presentation.