1. <!DOCTYPE html>
  2. <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  3. <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  4. <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
  5. <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  6. <head>
  7. <meta charset="utf-8">
  8. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9. <title>Feed Hype</title>
  10. <meta name="description" content="">
  11. <meta name="viewport" content="width=device-width">
  12. <link rel="stylesheet" href="css/bootstrap.min.css">
  13. <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
  14. <link rel="stylesheet" href="css/main.css">
  15. <link href='http://fonts.googleapis.com/css?family=Sintony' rel='stylesheet' type='text/css'>
  16.  
  17. </head>
  18. <body>
  19.  
  20. <div id="topwrap">
  21. <div class="contentwrap">
  22. <div id="topmenu">
  23. <ul>
  24. <li><a href="./index.html">Home</a></li>
  25. <li><a href="./about.html">About</a></li>
  26. </ul>
  27. <div class="clear"></div>
  28. </div>
  29. </div>
  30.  
  31. </div>
  32.  
  33. <div id="votenow">
  34. <p>I want to see...</p>
  35. <input id="query" type="text" class="input">
  36. <button onclick="searchTumblr()" style="margin-top:-10px;" class="btn btn-success">Go</button>
  37.  
  38. </div>
  39. <div id="bodywrap">
  40. <div class="contentwrap">
  41. <br />
  42. <div id="tumblr">
  43. <ul id="posts">
  44. </ul>
  45. </div>
  46. <div class="fancyBox">Hidden</div>
  47.  
  48. </div> <!-- /container -->
  49.  
  50. <div id="copyrightwrap">
  51. &copy; 2009-2013 Shrav Mehta. All Rights Reserved.
  52. </div>
  53.  
  54. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  55. <script type="text/javascript" src="./fancybox/jquery.fancybox-pack.js"></script>
  56. <link rel="stylesheet" href="./fancybox/jquery.fancybox.css" type="text/css" media="screen" />
  57. <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
  58. <script src="js/vendor/bootstrap.min.js"></script>
  59. <script src="js/main.js"></script>
  60. <script>
  61. !function ($) {
  62. $(function(){
  63. // carousel demo
  64. $('#myCarousel').carousel()
  65. })
  66. }(window.jQuery)
  67.  
  68. </script>
  69. <script>
  70. function searchTumblr() {
  71. $('#posts').empty();
  72. var query = $("#query").val();
  73. myJsonpCallback = function (data)
  74. {
  75. $.each( data.response, function( key, value ) {
  76. $('#posts').append("<li><a href='#' onclick='openFancy(" + value + ");'><img src='" + value.photos[0].original_size.url + "' /></a><li>");
  77. });
  78. };
  79.  
  80. $.ajax({
  81. type: "GET",
  82. url : "http://api.tumblr.com/v2/tagged?tag=" + query,
  83. dataType: "jsonp",
  84. data: {
  85. api_key : "MHaooqOfz7VNviUuN4jBQqLi7Uq3roRldgF9hbdovIWIZmky7W",
  86. jsonp : "myJsonpCallback"
  87. }
  88. });
  89. }
  90. </script>
  91. <script>
  92. function openFancy(var1) {
  93. alert(var1);
  94. }
  95.  
  96.  
  97. </script>
  98. <script type="text/javascript">
  99. $(document).ready(function() {
  100. $(".fancybox").fancybox();
  101. });
  102. </script>
  103.  
  104. </body>
  105. </html>