Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Instagram Test</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->

        <div class="container">
              <div class="row results">
              </div>
        </div>

        <!-- Modal -->
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <img class="img-responsive"src="' + gram.images.standard_resolution.url + '" alt="image" />
                </div>
                <div class="modal-footer">

                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
          </div><!-- /.modal -->


        <script>
             $(function () {

               // Adding the above wrapper around all the code makes sure the whole
               // DOM is loaded before any code is actually run. Its a good practice
               // read about it here: http://api.jquery.com/ready/

               var client_id = '[client_id]'
               var apiUrl = "https://api.instagram.com/v1/users/self/feed?access_token=[access_token]&callback=?"

               function success (instagramData) {
                 // This is run if the ajax call is successful
                 // The "instagramData" being passed to this function is the returned data from the url

                 if (instagramData.meta.code != 200) {
                   // If we don't get a 200 that means instagram threw an error.
                   // Instead of adding the html for images to .results div, we will put the error in there so
                   // we know what happend
                   $('.results').html('<h1>An Error Occured</h1><p>' + instagramData.meta.error_message + '</p>');
                   return
                 }

                 $.each(instagramData.data, function(index, gram) {
                   // instagramData.data is the "data" inside the returned json. There is "meta" and "data".
                   // index is just an incremental number for each gram. we don't need it yet.
                   // gram is the information for EACH gram. this $.each loops over all of them.

                   if (gram.type == 'image') {
                     // for this example we only care about images
                     $('.results').append('<div class="col-md-3">' +
                                          '<p><img class="img-circle" style="margin-right: 5px" width="60" src="' + gram.user.profile_picture + '">' + gram.user.username + '</p>' +
                                          '<a href="#myModal" data-toggle="modal" data-img-url="' + gram.images.standard_resolution.url + '"><img class="img-thumbnail" src="' + gram.images.low_resolution.url + '"/></a>' +
                                          '</div>')
                   }
                   if (gram.type == 'video') {
                     // for this example we only care about videos
                     $('.results').append('<div class="col-md-3">' +
                                          '<p><img class="img-circle" style="margin-right: 5px" width="60" src="' + gram.user.profile_picture + '">' + gram.user.username + '</p>' +
                                          '<a href="#myModal" data-toggle="modal" data-img-url="' + gram.videos.standard_resolution.url +'">href="' + gram.videos.standard_resolution.url +'"><video class="img-thumbnail" src="' + gram.videos.low_resolution.url + '"/></a>' +
                                          '</div>')
                   }
                 });
               }

               $.ajax({
                 type: "GET",
                 url: apiUrl,
                 dataType: "json",
                 success: success // If successful we call the success function, which lives up above
               });
             });
        </script>

    </body>
</html>