Flickr Api Picture to iFrame

[starputzer]

Hi,
Im pretty new to programming and scripting as Ive just started my studies. We have an university project (small one) which is about gathering a few images with the json flickr api and displaying it in a window.
The whole design is like that http://imageshack.us/photo/my-images...enannteek.png/
How can i script it that way, that the picture I want to see opens up in an extra iframe (top left corner).

I gather the pictures like that:
<script type="text/javascript" src="http://api.flickr.com/services/rest/?format=json&sort=random&method=flickr.photos.search&tags=MadC&tag_mode=all&api_key=MYAPIKEY"></script>


in my script.js i have a few functions for thumbs, medium and large pictures, e.g.:
function pictureLarge(photo) {
return "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_" + "b.jpg";
}


in my index.html i have an iframe:
<iframe id="iframe_4" name="frame1" align="right" src="photos.html" frameBorder="0"></iframe>


Do I have to edit my javascript or do I have to add onclick="window.open('whattodisplay','frame1')" or change the script that gathers the url for the images?

I hope someone can help. I also posted in the JSON Subforum but no one answered

Maybe there have to be some changes to do in here:

Originally Posted by script.js

function jsonFlickrApi(response) {
if (response.stat != "ok"){
return;
}

window.onload = function(){

for (var i=0; i < response.photos.photo.length; i++) {

photo = response.photos.photo[i];

// Hier können Elemente im DOM erzeugt werden! Beispiel
var photosContainer = document.getElementById("photos");

//die Urls zu den Bildern generieren
var urlThumb = pictureThumb(photo);
var urlMedium = pictureMedium(photo);
var urlLarge = pictureLarge(photo);

//HTML Div Element erstellen--quasi als Container für Bild und Link
var output = document.createElement("div");

//HTML Link Element erstellen
var link = document.createElement("a");

//HTML Bild Element erstellen
var img = document.createElement("img");

//href sagt wo der Link hingeht
link.setAttribute("href",urlMedium);

//src sagt welches Bild angezeigt wird
img.setAttribute("src",urlThumb);


//Dem Link wird das Bild zugewiesen
//anstatt Text wird nun das Bild klickbar
link.appendChild(img)

//Dem Container noch den Link zuweisen
photosContainer.appendChild(link);
}

}

// Utility-Functions: Generieren von Flickr-URLs
// Dokumentation siehe http://www.flickr.com/services/api/misc.urls.html

// Die URL des Fotos (Thumbnail):
function pictureThumb(photo) {
return "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" +
photo.id + "_" + photo.secret + "_" + "s.jpg";
}

// Die URL des Fotos (Mittel):
function pictureMedium(photo) {
return "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" +
photo.id + "_" + photo.secret + "_" + "z.jpg";
}

// Die URL des Fotos (Groß):
function pictureLarge(photo) {
return "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" +
photo.id + "_" + photo.secret + "_" + "b.jpg";
}

// Die URL zur entsprechenden Seite bei Flickr:
function linkURL(photo) {
return "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id;

}
}

I just figured that maybe I could edit it somehow like this:
link.setAttribute("href",urlMedium,target="frame1");
but this syntax doesn't work, any ideas?

[devnull69]

You can do that by setting the src attribute of the iframe to the href attribute of the link onclick

Something like this

link.setAttribute("href",urlMedium);
link.onclick = function() {
   // set the iframe's src
   document.getElementById('iframe_4').src = this.href;
   return false; // to prevent the default action of the link click
};

[starputzer]

I will try, thanks so far!

edit: its working....Y>ESSSSSSSSSS !!! ^^