|
|
Line 3: |
Line 3: |
| <html> | | <html> |
| <div style="text-align:center"> | | <div style="text-align:center"> |
- | <script>
| |
- | function jsonFlickrApi(rsp) {
| |
- | if (rsp.stat != "ok"){
| |
- | // If this executes, something broke!
| |
- | return;
| |
- | }
| |
- |
| |
- | //variable "s" is going to contain
| |
- | //all the markup that is generated by the loop below
| |
- | var s = "";
| |
- |
| |
- | //this loop runs through every item and creates HTML
| |
- | for (var i=0; i < rsp.photos.photo.length; i++) {
| |
- | //for (var i=0; i < 10; i++) {
| |
- | photo = rsp.photos.photo[ i ];
| |
- |
| |
- | //notice that "t.jpg" is where you change the
| |
- | //size of the image
| |
- | t_url = "http://farm" + photo.farm +
| |
- | ".static.flickr.com/" + photo.server + "/" +
| |
- | photo.id + "_" + photo.secret + "_" + "t.jpg";
| |
| | | |
- | b_url = "http://farm" + photo.farm +
| + | <table border="1"> |
- | ".static.flickr.com/" + photo.server + "/" + | + | <tr> |
- | photo.id + "_" + photo.secret + "_" + "z.jpg";
| + | <th>Berlin</th> |
- |
| + | <th>Hamburg</th> |
- | p_url = "http://www.flickr.com/photos/" + | + | <th>München</th> |
- | photo.owner + "/" + photo.id; | + | </tr> |
- | | + | <tr> |
- | s += '<a class="lightbox" href="' + b_url + '">' + '<img alt="'+
| + | <td>Miljöh</td> |
- | photo.title + '"src="' + t_url + '" style="margin:10px; border:1px solid gray;" />' + '</a>';
| + | <td>Kiez</td> |
- | }
| + | <td>Bierdampf</td> |
| + | </tr> |
| + | <tr> |
| + | <td>Buletten</td> |
| + | <td>Frikadellen</td> |
| + | <td>Fleischpflanzerl</td> |
| + | </tr> |
| + | </table> |
| | | |
- | document.writeln(s);
| |
- | //this tells the JavaScript to write
| |
- | //everything in variable "s" onto the page
| |
- | }
| |
- | </script>
| |
- | <script type="text/javascript" language="javascript" src="http://api.flickr.com/services/rest/?format=json&method=flickr.photos.search&user_id=62454421@N04&api_key=7cadbf368e5ccf9f11f9ba0f58fccbe8&count=5"></script>
| |
| </div> | | </div> |
| </html> | | </html> |