fgm
/
front__coursera-responsive-design


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
							<!--
  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:800">

          <div class="modal-content">

            <div class="modal-body">
              <img  style="width:100%" src="{{src}}"/>
            </div>

          </div>

        </div>
      </div>
    </script>
  </body>

  <!--
    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>