Skip to content

Instantly share code, notes, and snippets.

@benthebear

benthebear/one-with-art.html

Last active August 29, 2015 14:26
Show Gist options
  • Save benthebear/7c4a38f1330661c12c41 to your computer and use it in GitHub Desktop.
Save benthebear/7c4a38f1330661c12c41 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Ben revised this gist Aug 7, 2015. 1 changed file with 14 additions and 14 deletions.
    28 changes: 14 additions & 14 deletions one-with-art.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,7 @@
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="cards.css">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    @@ -13,7 +14,7 @@
    <li><a href="index.html">Homepage</a></li>
    <li><a href="index.html">About this project</a></li>
    <li><a href="index.html">The Team</a></li>
    <li><a href="index.html">Friends & Family</a></li>
    <li><a href="index.html">Friends &amp; Family</a></li>
    <li><a href="index.html">Contacts</a></li>
    </ul>
    </div>
    @@ -57,27 +58,26 @@ <h4>Become one with art!</h4>
    <script>
    // Holding API-data.
    var gallery = [];
    var randomElement = '';

    function getRandomElement() {
    function getRandomElement(gallery) {
    // Randomize.
    var randomIndex = Math.floor((Math.random() * 161));
    return gallery[randomIndex];
    }

    function fetchData() {
    $.get('https://raw.githubusercontent.com/manuelmazzuola/muzei-google-art-project/master/app/src/main/assets/imax.json', function(data) {
    gallery = JSON.parse(data);
    });
    }

    fetchData();

    </script>

    $.get('https://raw.githubusercontent.com/manuelmazzuola/muzei-google-art-project/master/app/src/main/assets/imax.json', function(data) {
    gallery = JSON.parse(data);
    // Call the function from the cards.js for rendering
    getRandom (gallery);
    });

    </script>


    <div id="randomness"></div>
    <script id="render-newCard" type="x-tmpl-mustache">
    <div class="card" style="background-image: url{{image}}">
    <script id="render-newAPI" type="x-tmpl-mustache">
    <div class="card" style="background-image: url({{image}})">
    <div class="title">{{title}}</div>
    <div class="creator">{{creator}}</div>
    <div class="attribution">{{attribution}}</div>
  2. Ben created this gist Aug 7, 2015.
    92 changes: 92 additions & 0 deletions one-with-art.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,92 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="cards.css">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    </head>
    <body>
    <nav id="navigation">
    <div class="container">
    <ul class="navlinks">
    <li><a href="index.html">Homepage</a></li>
    <li><a href="index.html">About this project</a></li>
    <li><a href="index.html">The Team</a></li>
    <li><a href="index.html">Friends & Family</a></li>
    <li><a href="index.html">Contacts</a></li>
    </ul>
    </div>
    </nav>

    <header id="heading">
    <div class="container text-center">
    <h1>Your personal Museum</h1>
    <h4>Become one with art!</h4>

    <p><a href="index.html" class="btn btn-large btn-inverse">Open 24 hours</a></p>
    </div>
    </header>
    <div class="container">
    <div class="row">
    <div class="col col-sm-12">

    <div class="panel">
    <div class="panel-body">
    News: We are open for the public now! <span class="glyphicon glyphicon-heart-empty"></span>
    </div>
    </div>


    <div id="wunderbar"></div>
    <script id="render-newCard" type="x-tmpl-mustache">
    <div class="card" style="background-image: url({{image}})">
    <div class="pictureName">{{pictureName}}</div>
    <div class="artist">{{artist}}</div>
    <div class="year">{{year}}</div>
    <img class="more" src="more.png">
    <img class="share" src="share.png">
    <img class="favorite" src="favorite.png">
    </div>
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.2/mustache.min.js"></script>
    <script src="cards.js"></script>

    <script>
    // Holding API-data.
    var gallery = [];

    function getRandomElement() {
    // Randomize.
    var randomIndex = Math.floor((Math.random() * 161));
    return gallery[randomIndex];
    }

    function fetchData() {
    $.get('https://raw.githubusercontent.com/manuelmazzuola/muzei-google-art-project/master/app/src/main/assets/imax.json', function(data) {
    gallery = JSON.parse(data);
    });
    }

    fetchData();

    </script>


    <div id="randomness"></div>
    <script id="render-newCard" type="x-tmpl-mustache">
    <div class="card" style="background-image: url{{image}}">
    <div class="title">{{title}}</div>
    <div class="creator">{{creator}}</div>
    <div class="attribution">{{attribution}}</div>
    <img class="more" src="more.png">
    <img class="share" src="share.png">
    <img class="favorite" src="favorite.png">
    </div>
    </script>


    </body>
    </html>