fgm
/
front__coursera-responsive-design


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!-- This is an example of using the same template with
  different data -->

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

    <div class="page-header">
      <h1>My photo albums </h1>
    </div>

    <!-- this is a simple nav bar for selecting between images -->
    <ul class="nav nav-tabs">
          <li role=""  id="image1btn">
            <a href="#">Image 1</a>
            </li>
          <li role="" id="image2btn">
            <a href="#">Image 2</a>
            </li>
        </ul>
    <br/><br/>


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

  </div>

    <!-- this is our template
      it displays an image with a title and author headings
      the bits in curly brackets {{}} are template expressions.
      This code uses Bootstrap to provide a grid based layout
      -->
    <script id="detail-template" type="text/x-handlebars-template">
      <br>
      <div class="row-fluid">
        <div class="col-sm-5">

          <img  style="width:100%" src="{{src}}"/>
        </div>
  		  <div class="col-sm-7">
          <h1>{{title}}</h1>
  		    <h3 class="author">
  		      {{author}}
  		    </h3>
        </div>

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

  <!-- javascript code to fill the template -->
  <script type="text/javascript">


    // have two objects each representing a different image
    var data1 = {
      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"
    };

    var data2 = {
        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",
    };

    // get the template and compile it once when
    // the page loads
    var source   = $("#detail-template").html();
    var detail_template = Handlebars.compile(source);

    // instantiate the tempalte with data whenever you click
    // there are two separate functions, one for each
    // image (next week we will see a better way of doing this)
    $("#image1btn").click(function () {
      var html    = detail_template(data1);

      $('#content').html(html);
    });


    $("#image2btn").click(function () {
      var html    = detail_template(data2);

      $('#content').html(html);
    });


  </script>

</body>