Skip to content

Instantly share code, notes, and snippets.

@atomize

atomize/jQuery_iScroll_Flickr.html

Created March 1, 2012 07:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save atomize/1948078 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save atomize/1948078 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. grok renamed this gist Mar 3, 2012. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions gistfile1.txt → jQuery_iScroll_Flickr.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,9 +7,7 @@
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>jQuery Mobile - iScroll - Flickr JSON</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script><script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript" src="https://raw.github.com/cubiq/iscroll/master/src/iscroll.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  2. grok created this gist Mar 1, 2012.
    160 changes: 160 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,160 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>jQuery Mobile - iScroll - Flickr JSON</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script><script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>

    <script type="text/javascript" src="https://raw.github.com/cubiq/iscroll/master/src/iscroll.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    <script type="text/javascript">


    var myScroll, myScroll2;

    function loaded() {
    myScroll = new iScroll('wrapper');
    myScroll.refresh();

    myScroll2 = new iScroll('wrapper2');
    myScroll2.refresh();
    }

    $('#pageTwo').live("pageshow", function(){myScroll2.refresh();});

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 500); }, false);
    </script>

    <style type="text/css" media="all">
    body,ul,li {
    padding:0;
    margin:0;
    border:0;
    }

    body {
    font-size:12px;
    -webkit-user-select:none;
    -webkit-text-size-adjust:none;
    font-family:helvetica;
    }


    #wrapper2 {
    position:absolute; z-index:1;
    top:45px; bottom:48px; left:0;
    width:100%;
    background:#000;
    overflow:auto;
    }

    #wrapper {
    position:absolute; z-index:1;
    top:45px; bottom:48px; left:0;
    width:100%;
    background:#000;
    overflow:auto;
    }

    #scroller {
    position:absolute; z-index:1;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
    padding:0;
    }

    #scroller ul {
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
    }

    #scroller li {
    padding:0 10px;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
    }

    #myFrame {
    position:absolute;
    top:0; left:0;
    }

    #scroller img {

    width:100px;
    height:40%;
    padding:5px;
    }
    </style>
    </head>
    <body>

    <div id="pageOne" data-role="page">
    <h1><a href="#pageTwo">Next</a></h1>

    <div id="wrapper">
    <div id="scroller" data-role="content">
    <article>
    <div class="tabs-1imgs"></div>
    </article>
    </div>
    </div>

    </div>

    <div id="pageTwo" data-role="page">
    <h1><a href="#pageOne">Prev</a></h1>
    <div id="wrapper2">
    <div id="scroller">
    <article>
    <div class="tabs-2imgs"></div>
    </article>
    </div>
    </div>
    </div>


    <script>
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
    {
    tags: "kitty",
    tagmode: "any",
    format: "json"},
    function(data) {
    $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo(".tabs-1imgs");
    if ( i == 999 ) return false;
    });
    });

    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
    {
    tags: "bmx",
    tagmode: "any",
    format: "json"},
    function(data) {
    $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo(".tabs-2imgs");
    if ( i == 99 ) return false;
    });
    });
    </script>
    </body>
    </html>