PageRenderTime 28ms CodeModel.GetById 26ms RepoModel.GetById 1ms app.codeStats 0ms

/index.html

https://github.com/victusfate/Image-Matrix
HTML | 246 lines | 223 code | 22 blank | 1 comment | 0 complexity | 2654010ee82389bb4b0f3c8d9aa33a0a MD5 | raw file
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8'>
  5. <title>
  6. victusfate/Image-Matrix @ GitHub
  7. </title>
  8. <!-- swap to https://developers.google.com/custom-search/json-api/v1/overview -->
  9. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  10. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  11. <style type="text/css">
  12. body {
  13. margin-top: 1.0em;
  14. background-color: #7ea4aa;
  15. font-family: "Helvetica,Arial,FreeSans";
  16. color: #000000;
  17. }
  18. #container {
  19. margin: 0 auto;
  20. width: 80%;
  21. }
  22. h1 {
  23. font-size: 3.8em;
  24. color: #815b55;
  25. margin-bottom: 3px;
  26. }
  27. h1 .small {
  28. font-size: 0.4em;
  29. }
  30. h1 a {
  31. text-decoration: none
  32. }
  33. h2 {
  34. font-size: 1.5em;
  35. color: #815b55;
  36. }
  37. h3 {
  38. text-align: center;
  39. color: #815b55;
  40. }
  41. a {
  42. color: #815b55;
  43. }
  44. .description {
  45. font-size: 1.2em;
  46. margin-bottom: 30px;
  47. margin-top: 30px;
  48. font-style: italic;
  49. }
  50. .download {
  51. float: right;
  52. }
  53. pre {
  54. background: #000;
  55. color: #fff;
  56. padding: 15px;
  57. }
  58. hr {
  59. border: 0;
  60. width: 80%;
  61. border-bottom: 1px solid #aaa
  62. }
  63. .footer {
  64. text-align: center;
  65. padding-top: 30px;
  66. font-style: italic;
  67. }
  68. #nav-list-example {
  69. list-style-type: none;
  70. height: 320px;
  71. width: 100%;
  72. margin: 48px 0;
  73. }
  74. #nav-list-example li {
  75. width: 320px;
  76. height: 320px;
  77. float: left;
  78. margin-right: 24px;
  79. position: relative;
  80. }
  81. #nav-list-example li div {
  82. width: 320px;
  83. height: 320px;
  84. /* overflow: hidden; */
  85. /* background: black; */
  86. position: relative;
  87. top: 0;
  88. left: 0;
  89. }
  90. #nav-list-example li div.back {
  91. background: #999;
  92. left:-999em;
  93. }
  94. ul.nav-list-example {
  95. margin-bottom: 12px;
  96. }
  97. #ibox {
  98. width: 100%;
  99. }
  100. img {
  101. position: absolute;
  102. }
  103. </style>
  104. <script type="text/javascript">
  105. var lDiv;
  106. $(document).ready(function() {
  107. var default_keys = ['energy', 'coffee', 'virtual worlds'];
  108. // $("#keys").prepend("cols "+$("#key_name").css('size')+"<br/>");
  109. $("input").focus(function(srcc)
  110. {
  111. if ($(this).val() == default_keys)
  112. {
  113. $(this).val("");
  114. }
  115. });
  116. SetupGrowingDivs();
  117. GetImage(default_keys);
  118. });
  119. function UpdateTextArea() {
  120. /* // had trouble getting size css element back from .key_name
  121. var clength = $("#key_name").css('size');
  122. var vlength = $("#key_name").val().length;
  123. $("#keys").prepend("UpdateTextArea() clength "+clength+" vlength "+vlength+"<br/>");
  124. if ( (clength - vlength) <= 3) {
  125. $("#key_name").css('size', vlength + 10);
  126. }
  127. */
  128. }
  129. function SetupGrowingDivs() {
  130. $('#nav-list-example li div.back').hide().css('left', 0);
  131. $('div.front').live({
  132. mouseover: function() {
  133. $(this).css('z-index', '5');
  134. $(this).find('img').stop().animate({
  135. width: 528,
  136. height: 528,
  137. left: -198,
  138. top: -198,
  139. },200);
  140. },
  141. mouseleave: function() {
  142. $(this).find('img').stop().animate({
  143. width: 132,
  144. height: 132,
  145. left: 0,
  146. top: 0
  147. },200);
  148. $(this).css('z-index', '1');
  149. }
  150. });
  151. }
  152. function GetImage(keys) {
  153. $("#nav-list-example").html('');
  154. var NImages = keys.length;
  155. $("#ibox").css("height",keys.length*160);
  156. for (var bindex = 0; bindex < keys.length; bindex++) {
  157. index = bindex % keys.length;
  158. var key = keys[index];
  159. var apiurl = "http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=" + encodeURIComponent(key)
  160. + "&imgz=(large)"
  161. + "&as_rights=(cc_publicdomain)"
  162. + "&callback=?";
  163. // var apiurl = "http://api.duckduckgo.com/?q=" + encodeURIComponent(key) + "&format=json&callback=?";
  164. CreateImagesWithUrl(apiurl, bindex, key);
  165. }
  166. }
  167. function CreateImagesWithUrl(apiurl, bindex, key) {
  168. var cind = bindex;
  169. var ckey = key;
  170. $.getJSON(apiurl, {
  171. "": cind,
  172. "": ckey
  173. },
  174. function(ob) {
  175. // console.log('ob',ob);
  176. // var imageurl = ob.Image;
  177. // var ImageID = 'f' + cind;
  178. // var lDiv = $('#nav-list-example');
  179. // lDiv.append('<li><div class="front" id="f' + ImageID + '"><a href="' + imageurl + '" title="'+ob.Heading+'">' +
  180. // '<img src="' + ob.Image + '" width="132" height="132" alt="' + ckey + '"/><\/a><\/div><\/li>');
  181. console.log('ob',ob);
  182. var dim = ob.responseData.results.length;
  183. for (var limageindex = 0; limageindex < dim; limageindex++) {
  184. imageurl = ob.responseData.results[limageindex].url;
  185. timageurl = ob.responseData.results[limageindex].tbUrl;
  186. imagetitle = ob.responseData.results[limageindex].titleNoFormatting;
  187. var ImageID = 'f' + (cind * dim + limageindex);
  188. // var lDiv = $(ImageID)[0];
  189. var lDiv = $('#nav-list-example');
  190. lDiv.append('<li><div class="front" id="f' + ImageID + '"><a href="' + imageurl + '" title="'+imagetitle+'">' +
  191. '<img src="' + imageurl + '" width="132" height="132" alt="' + ckey + '"/><\/a><\/div><\/li>');
  192. }
  193. });
  194. }
  195. </script>
  196. </head>
  197. <body>
  198. <p>
  199. <a href="http://github.com/victusfate/Image-Matrix"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
  200. </p>
  201. <div id="container">
  202. <div class="download">
  203. <a href="http://github.com/victusfate/Image-Matrix/zipball/master"><img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a> <a href="http://github.com/victusfate/Image-Matrix/tarball/master"><img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
  204. </div>
  205. <h1>
  206. <a href="http://github.com/victusfate/Image-Matrix">Image-Matrix</a> <span class="small">by <a href="http://github.com/victusfate">victusfate</a></span>
  207. </h1>
  208. <div class="description">
  209. javascript matrix of images created from topics, google search API
  210. </div>
  211. <div id="keys">
  212. <form action="javascript:GetImage($('#key_name').val().split(','));">
  213. <div>
  214. search key(s) <input id="key_name" type="textarea" size="100" value="energy, coffee, virtual worlds" onkeyup="UpdateTextArea()"/>
  215. </div>
  216. </form>
  217. </div>
  218. <div id="ibox">
  219. <ul id="nav-list-example">
  220. </ul>
  221. </div>
  222. </div>
  223. </body>
  224. </html>