fgm
/
front__coursera-responsive-design


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<!-- 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>
  </script>

  <!-- javascript code to fill the template -->
  <script type="text/javascript">
    var data = {
      image1btn: {
        src: "images/The_Earth_seen_from_Apollo_17.jpg",
        title: "The Earth seen from Apollo 17",
        author: "Ed g2s"
      },
      image2btn: {
        src: "images/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 template with data whenever you click
    // There is only one handler on only one element.
    $('ul.nav.nav-tabs').click(function (event) {
      var id = $(event.originalEvent.target).parent().attr('id');
      var html = detail_template(data[id]);
      $('#content').html(html);
    });
  </script>
</body>