Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  .ui-menu { width: 150px; }
</style>
</head>
<body>
<ul id="menu">
    <li><a href="#" id="next">Next</a></li>
    <li><a href="#" id="previous">Previous</a></li>
    <li>
        <a href="#" id="jump">Jump</a>
        <ul id="jump_ul">
        </ul>
    </li>
</ul>
<br />
<div id="images"></div>
</body>
</html>
​
 
    class PhotoTable2
      json: null
      number: null
​
      constructor:(number) ->
        @number = number
​
      getData:(successCallback) =>
        $.getJSON(
          'http://www.flickr.com/services/rest/?jsoncallback=?'
            format : 'json'
            method : 'flickr.photos.search'
            api_key : '7965a8bc5a2a88908e8321f3f56c80ea'
            user_id : '29242822@N00'
            per_page : @number
          (data) =>
            @json = data.photos.photo;
            successCallback?())
​
      url:(index) ->
        item = @json[index]
        itemFarm = item.farm
        itemServer = item.server
        itemID = item.id
        itemSecret = item.secret
        itemPathList =
          'http://farm' + itemFarm + '.static.flickr.com/' + itemServer +
          '/' + itemID + '_' + itemSecret + '_m.jpg'
​
      putPhoto:(index) ->
        if (0 <= index and index <= (@number - 1))
          $('#images').empty()
          $('#images').append(
            $('<h3></h3>')
              .text(@json[index].title)
            $('<a></a>')
              .append(
                $('<img />')
                  .attr('src', @url(index))))
        else
          console.log('index is out of number')
​
        console.log('index: ', index)
​
    $ ->
      index = 0
​
      photo_table2 = new PhotoTable2(5)
      photo_table2.getData(successCallback = ->
        console.log('Data loaded',photo_table2.json)
​
        photo_table2.putPhoto(index)
​
        $('#next')
          .click ->
            index++
            photo_table2.putPhoto(index)
​
        $('#previous')
          .click ->
            index--
            photo_table2.putPhoto(index)
​
        for i in [0..(photo_table2.number - 1)]
          $('#jump_ul').append(
            $('<li></li>').append(
              $('<a></a>')
                .text(photo_table2.json[i].title)
                .click ->
                  photo_table2.putPhoto(i)
                console.log(i)
            )
          )
​
        $("#menu").menu()
      )
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
weedpro
0viewers