index.html | searchcode

/index.html

https://github.com/victusfate/Image-Matrix
HTML | 246 lines | 223 code | 22 blank | 1 comment | 0 complexity | 2654010ee82389bb4b0f3c8d9aa33a0a MD5 | raw file

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>
            victusfate/Image-Matrix @ GitHub
        </title>
        <!-- swap to https://developers.google.com/custom-search/json-api/v1/overview -->

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
        
        <style type="text/css">
        body {
            margin-top: 1.0em;
            background-color: #7ea4aa;
            font-family: "Helvetica,Arial,FreeSans";
            color: #000000;
        }
        #container {
            margin: 0 auto;
            width: 80%;
        }
        h1 {
            font-size: 3.8em;
            color: #815b55;
            margin-bottom: 3px;
        }
        h1 .small {
            font-size: 0.4em;
        }
        h1 a {
            text-decoration: none
        }
        h2 {
            font-size: 1.5em;
            color: #815b55;
        }
        h3 {
            text-align: center;
            color: #815b55;
        }
        a {
            color: #815b55;
        }
        .description {
            font-size: 1.2em;
            margin-bottom: 30px;
            margin-top: 30px;
            font-style: italic;
        }
        .download {
            float: right;
        }
        pre {
            background: #000;
            color: #fff;
            padding: 15px;
        }
        hr {
            border: 0;
            width: 80%;
            border-bottom: 1px solid #aaa
        }
        .footer {
            text-align: center;
            padding-top: 30px;
            font-style: italic;
        }

        #nav-list-example {
            list-style-type: none;
            height: 320px; 
            width: 100%;
            margin: 48px 0;
        }

        #nav-list-example li {
            width: 320px;
            height: 320px; 
            float: left;
            margin-right: 24px;
            position: relative;
        }

        #nav-list-example li div {
            width: 320px;
            height: 320px;
/*          overflow: hidden; */
/*          background: black; */
            position: relative;
            top: 0;
            left: 0;
        }

        #nav-list-example li div.back {
            background: #999;
            left:-999em;
        }
        
        ul.nav-list-example {
            margin-bottom: 12px;
        }
        
        #ibox {
            width: 100%;
        }
        img {
            position: absolute;
        }

        </style>
        
        
    <script type="text/javascript">
        var lDiv;
        $(document).ready(function() {
            var default_keys = ['energy', 'coffee', 'virtual worlds'];
//          $("#keys").prepend("cols "+$("#key_name").css('size')+"<br/>");
            $("input").focus(function(srcc)
             {
                if ($(this).val() == default_keys)
                {
                    $(this).val("");
                }
            });
            SetupGrowingDivs();
            GetImage(default_keys);
        });

        function UpdateTextArea() {
/*          // had trouble getting size css element back from .key_name
            var clength = $("#key_name").css('size');
            var vlength = $("#key_name").val().length;
            $("#keys").prepend("UpdateTextArea() clength "+clength+" vlength "+vlength+"<br/>");
            if ( (clength - vlength) <= 3) {
                $("#key_name").css('size', vlength + 10);
            }
            */
        }


        function SetupGrowingDivs() {
            $('#nav-list-example li div.back').hide().css('left', 0);
            $('div.front').live({
                mouseover: function() {
                    $(this).css('z-index', '5');
                    $(this).find('img').stop().animate({
                        width: 528,
                        height: 528,
                        left: -198,
                        top: -198,
                    },200);
                },
                mouseleave: function() {
                    $(this).find('img').stop().animate({
                        width: 132,
                        height: 132,
                        left: 0,
                        top: 0              
                    },200);
                    $(this).css('z-index', '1');
                }               
            });
        }

        function GetImage(keys) {
            $("#nav-list-example").html('');
            var NImages = keys.length;
            $("#ibox").css("height",keys.length*160);
            for (var bindex = 0; bindex < keys.length; bindex++) {
                index = bindex % keys.length;
                var key = keys[index];
                var apiurl = "http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=" + encodeURIComponent(key) 
                        + "&imgz=(large)"
                        + "&as_rights=(cc_publicdomain)"
                        + "&callback=?";
                // var apiurl = "http://api.duckduckgo.com/?q=" + encodeURIComponent(key) + "&format=json&callback=?";
                CreateImagesWithUrl(apiurl, bindex, key);
            }
        }


        function CreateImagesWithUrl(apiurl, bindex, key) {
            var cind = bindex;
            var ckey = key;
            $.getJSON(apiurl, {
                "": cind,
                "": ckey
            },
            function(ob) {
                // console.log('ob',ob);
                // var imageurl = ob.Image;
                // var ImageID = 'f' + cind;
                // var lDiv = $('#nav-list-example');
                // lDiv.append('<li><div class="front" id="f' + ImageID + '"><a href="' + imageurl + '" title="'+ob.Heading+'">' +
                //     '<img src="' + ob.Image + '" width="132" height="132" alt="' + ckey + '"/><\/a><\/div><\/li>');
                console.log('ob',ob);
                var dim = ob.responseData.results.length;
                for (var limageindex = 0; limageindex < dim; limageindex++) {
                    imageurl = ob.responseData.results[limageindex].url;
                    timageurl = ob.responseData.results[limageindex].tbUrl;
                    imagetitle = ob.responseData.results[limageindex].titleNoFormatting;
                    var ImageID = 'f' + (cind * dim + limageindex);
                    //          var lDiv = $(ImageID)[0];
                    var lDiv = $('#nav-list-example');
                    lDiv.append('<li><div class="front" id="f' + ImageID + '"><a href="' + imageurl + '" title="'+imagetitle+'">' +
                    '<img src="' + imageurl + '" width="132" height="132" alt="' + ckey + '"/><\/a><\/div><\/li>');
                }
            });
        }
    </script>
    </head>

    <body>
        <p>
            <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>
        </p>
        <div id="container">
            <div class="download">
                <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>
            </div>
            <h1>
                <a href="http://github.com/victusfate/Image-Matrix">Image-Matrix</a> <span class="small">by <a href="http://github.com/victusfate">victusfate</a></span>
            </h1>
            <div class="description">
                javascript matrix of images created from topics, google search API
            </div>

            <div id="keys">             
                    <form action="javascript:GetImage($('#key_name').val().split(','));">
                    <div>
                        search key(s) <input id="key_name" type="textarea" size="100" value="energy, coffee, virtual worlds" onkeyup="UpdateTextArea()"/>
                    </div>
                  </form>
                
            </div>          

            <div id="ibox">
                <ul id="nav-list-example">
                </ul>
            </div>

        </div>
    </body>
</html>