fgm
/
front__coursera-responsive-design


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
							<!--
  This example extends our array example so that you can
  display an image by clicking on it.
  It uses two templates, one for viewing thumbnails and
  one for viewing a single image.

  NB I have found a bug in this code since doing the video
  see if you can find it and even fix it.
-->

<head>
  <!-- include our libraries and css files -->
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/handlebars-v3.0.3.js"></script>


  <script src="js/bootstrap.min.js"></script>

  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/gallery.css" rel="stylesheet">
</head>

<body role="document">
  <div class="container">
    <!-- the page title -->
    <div class="page-header">
      <h1>My photo albums </h1>
    </div>

    <!--
      the search box.
      It is given the navbar-form class so that bootstrap
      put it in the top navbar
    -->
    <div class="navbar-form navbar-right">
      <input id="searchbox" type="text" class="form-control" placeholder="Search...">
    </div>

    <!--
      We don't actually use these navigation tabs in this example, but
      I've included them so that the top nav looks right, and
      we can extend the example later to use them
    -->
    <ul class="nav nav-tabs">
      <li role="" id="detailsbtn"><a href="#">Details</a></li>
      <li role="" id="modalbtn"><a href="#">Modal</a></li>
    </ul>
    <br /><br />

    <!--
     the content of the web page starts off empty
     because we will fill it later from the template
     We use container-fluid because our template uses
     the bootstrap grid
    -->
    <div id="content" class="container-fluid" role="main">
    </div>

    <!--
      this div will contain the modal dialog which will
      display the large image
    -->
    <div id="modal-container">
    </div>
  </div>

  <!--
    This template displays many photos in an album.
    Is uses the {{#each }} template tag which repeats the
    innter bit of the template for each element of an array
  -->
  <script id="album-template" type="text/x-handlebars-template">

    <div class="row">
      {{#each images}}
      <div class="col-xs-12 col-md-3">
        <div class="thumbnail" data-id="{{@index}}">
          <img class="crop-img" src="{{src}}" alt="" />

          <div class="author">
            <h3> {{title}} </h3>
            <p> {{author}} </p>
          </div>
        </div>

      </div> <!-- / col -->
      {{/each}}
    </div> <!-- / row -->
  </script>

  <!--
       This second template displays a modal pop-up of the image.
       It has quite a bit of boilder plate HTML code but in
       essence it just displays and image tag within a
       set of divs that define the modal
  -->
  <script id="modal-template" type="text/x-handlebars-template">
    <div id="imageModal" class="modal fade" role="dialog">
      <div class="modal-dialog" style="width:800px">
        <div class="modal-content">
          <div class="modal-body">
            <img style="width:100%" src="{{src}}" />
          </div>
        </div>
      </div>
    </div>
  </script>

  <!--
    The javascript code to instantiate the template
  -->
  <script type="text/javascript">
    // get the source code for our two template
    // and compile them
    var source = $("#album-template").html();
    var template = Handlebars.compile(source);

    source = $("#modal-template").html();
    var modal_template = Handlebars.compile(source);

    // define the data for the template
    // we define an objects which contains an
    // array of other objects. This array will be used
    // to create multiple images
    var data = {
      images: [
        {
          src: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Shopping_Center_Magna_Plaza_Amsterdam_2014.jpg/600px-Shopping_Center_Magna_Plaza_Amsterdam_2014.jpg",
          title: "Shopping Center Magna Plaza Amsterdam 2014",
          author: "Tuxyso"
        },
        {
          src: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/600px-The_Earth_seen_from_Apollo_17.jpg",
          title: "The Earth seen from Apollo 17",
          author: "Ed g2s"
        },
        {
          src: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Barnard_33.jpg/300px-Barnard_33.jpg",
          title: "horse nebula",
          author: "John Smith"
        },
        {
          src: "http://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Wwii_woman_worker-edit.jpg/300px-Wwii_woman_worker-edit.jpg",
          title: "wwii woman worker",
          author: "Another author"
        },
        {
          src: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Lijiang_Yunnan_China-Naxi-people-carrying-baskets-01.jpg/300px-Lijiang_Yunnan_China-Naxi-people-carrying-baskets-01.jpg",
          title: "Lijiang Yunnan China Naxi people carrying baskets-",
          author: "Wikimedia Commons"
        },
        {
          src: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Stift_G%C3%B6ttweig_Gobelinzimmer_01.JPG/300px-Stift_G%C3%B6ttweig_Gobelinzimmer_01.JPG",
          title: "Marco's house",
          author: "Wikimedia Commons"
        }
      ]
    };

    // render the data into the template
    var html = template(data);
    // put the rendered template into the DOM
    $('#content').html(html);

    // a function to display a clicked
    // image as a modal
    // this is added as a click callback
    // to the thumbnails
    function displayModal(event) {
      // get the index (position in the array)
      // of the photo we clicked on
      // "this" is the element that was clicked on
      // data("id") gets the attribute data-id
      // (which we set to the index of the photo in
      // the array - @index)
      var imageNumber = $(this).data("id");

      // get the image out of the array using the image
      // number and render it using the modal template
      var html = modal_template(data.images[imageNumber]);
      // put the modal template in the DOM
      $('#modal-container').html(html);

      // show the modal
      $("#imageModal").modal('show');
    }

    // display the modal when you click on a thumbnail
    $('.thumbnail').click(displayModal);

    // the search functionality
    // this happens when a key is pressed
    // inside the search box
    $('#searchbox').keypress(function (e) {

      // check if the key that was pressed
      // is the return key (it has id 13)
      // and only do the search if it is
      if (e.which == 13) {

        // get the search text which is the
        // contents of the search box
        var search_text = $('#searchbox').val();

        // print the search box
        // (this is an example of using
        // console.log for debugging)
        console.log(search_text)

        // create a new array of data with only
        // the data that contains the search string
        var filteredData = {
          // use the filter function which returns
          // a new array that contains only the
          // elements of data.images for which
          // the function returns true
          images: data.images.filter(function (d) {
            // return true if the title contains
            // the search text
            if (d.title.search(search_text) > -1) {
              return true;
            }

            // return true if the author contains
            // the search text
            if (d.author.search(search_text) > -1) {
              return true;
            }

            // if we reach here it means we haven't
            // found a match so return false
            return false;
          })
        };

        // pass the newly filtered data into
        // the template to generate new html
        var html = template(filteredData);
        $('#content').html(html);

        // display the modal when you click on a thumbnail
        $('.thumbnail').click(displayModal);
      }
    });
  </script>
</body>