Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Flickr Api Picture to iFrame

    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:


    Quote 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?
    Last edited by starputzer; 01-18-2012 at 09:23 AM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    12
    Thanked 568 Times in 561 Posts
    You can do that by setting the src attribute of the iframe to the href attribute of the link onclick

    Something like this
    Code:
    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
    };

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I will try, thanks so far!

    edit: its working....Y>ESSSSSSSSSS !!! ^^
    Last edited by starputzer; 01-18-2012 at 09:53 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •