View Full Version : Flickr Api Picture to iFrame

01-18-2012, 10:11 AM
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/641/unbenannteek.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:

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

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

//src sagt welches Bild angezeigt wird

//Dem Link wird das Bild zugewiesen
//anstatt Text wird nun das Bild klickbar

//Dem Container noch den Link zuweisen


// 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:
but this syntax doesn't work, any ideas?

01-18-2012, 10:47 AM
You can do that by setting the src attribute of the iframe to the href attribute of the link onclick

Something like this

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

01-18-2012, 10:51 AM
I will try, thanks so far!

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