PageRenderTime 3ms CodeModel.GetById 1ms app.highlight 17ms 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
 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>