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