index.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <!DOCTYPE html>
  2. <!-- This is a complete example of an image gallery -->
  3. <html lang="en">
  4. <head>
  5. <!-- use the head section to define meta data and load css and js files -->
  6. <meta charset="utf-8">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <title>Gallery</title>
  10. <script src="js/jquery-2.2.2.js"></script>
  11. <script src="js/bootstrap.min.js"></script>
  12. <script src="js/handlebars-v3.0.3.js"></script>
  13. <!--
  14. These are our javascript files.
  15. Albums.js contains the data
  16. gallery.js is the code
  17. -->
  18. <script src="js/Albums.js"></script>
  19. <script src="js/gallery.js"></script>
  20. <link href="css/bootstrap.css" rel="stylesheet">
  21. <link href="css/gallery.css" rel="stylesheet">
  22. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  23. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  24. <!--[if lt IE 9]>
  25. <script
  26. src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  27. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  28. <![endif]-->
  29. </head>
  30. <body>
  31. <div class="container">
  32. <!-- page tile -->
  33. <div class="page-header">
  34. <h1>My photo albums </h1>
  35. </div>
  36. <!-- A navigation menu that selects different views -->
  37. <ul class="nav nav-tabs">
  38. <li role="" class="active"><a href="#" id="albums-tab">Albums</a></li>
  39. <li role=""><a href="#" id="photos-tab">Photos</a></li>
  40. <li role=""><a href="#" id="slideshow-tab">Slideshow</a></li>
  41. </ul>
  42. <br /><br />
  43. <!-- the content section is empty as we will fill it
  44. via javascript and templates -->
  45. <div id="content" class="container-fluid" role="main">
  46. </div>
  47. </div> <!-- / container -->
  48. <!-- Here are our Templates -->
  49. <!-- this is the template for the albums view -->
  50. <!--
  51. it displays the albums in a bootstrap grid format
  52. with one item for each album (using the {{#each}} template expression.
  53. Each album is displayed with a thumbnail image, a name and
  54. the number of photos (using the {{photos.length}} template expression, see my lecture for more details)
  55. -->
  56. <script id="albums-template" type="text/x-handlebars-template">
  57. <div class="row">
  58. {{#each albums}}
  59. <div class="col-xs-12 col-md-3">
  60. <div class="album-thumbnail" data-id="{{@index}}">
  61. <img class="crop-img" src="{{thumbnail}}" alt="" />
  62. <div class="caption">
  63. <h4> {{name}} </h4>
  64. <p>{{photos.length}} photos</p>
  65. </div>
  66. </div>
  67. </div> <!-- / col -->
  68. {{/each}}
  69. </div> <!-- / row -->
  70. </script>
  71. <!-- this is the template for the photos view of a single album -->
  72. <!--
  73. like albums view it uses a bootstrap grid format to display the photos in an album
  74. Each photos is displayed with anumbnail image, a name and
  75. a description
  76. -->
  77. <script id="photos-template" type="text/x-handlebars-template">
  78. <div class="row">
  79. <!-- xs-12 : small display shows a single column (taking up 12 grid columns)-->
  80. <!-- md-3 : medium and up displays use 3 grid columns per column -->
  81. {{#each photos}}
  82. <div class="col-xs-12 col-md-3">
  83. <div class="photo-thumbnail" data-id="{{@index}}">
  84. <img class="crop-img" src="{{src}}" alt="" />
  85. <div class="caption">
  86. <h3>{{title}}</h3>
  87. <p>{{description}}</p>
  88. </div>
  89. </div>
  90. </div> <!-- / col -->
  91. {{/each}}
  92. </div> <!-- / row -->
  93. </script>
  94. <!-- this is the template for the view a single photo -->
  95. <!--
  96. It is displayed as a large image with title and description
  97. -->
  98. <script id="photo-template" type="text/x-handlebars-template">
  99. <div class="row">
  100. <div class="col-xs-12 col-md-12">
  101. <img class="large-img" src="{{src}}" alt="" />
  102. <div class="caption">
  103. <h3>{{title}}</h3>
  104. <p>{{description}}</p>
  105. </div>
  106. </div> <!-- / col -->
  107. </div> <!-- / row -->
  108. </script>
  109. <!-- this is the template for the slideshow view of a single album -->
  110. <!--
  111. It uses the carousel view, which is quite complex, see my lecture for details
  112. -->
  113. <script id="slideshow-template" type="text/x-handlebars-template">
  114. <div class="row">
  115. <div class="col-md-6">
  116. <div id="carousel-example-generic" class="carousel slide"
  117. data-ride="carousel">
  118. <ol class="carousel-indicators">
  119. <li data-target="#carousel-example-generic" data-slide-to="0"
  120. class="active"></li>
  121. <li data-target="#carousel-example-generic"
  122. data-slide-to="1"></li>
  123. <li data-target="#carousel-example-generic"
  124. data-slide-to="2"></li>
  125. </ol>
  126. <!-- Wrapper for slides -->
  127. <div class="carousel-inner" role="listbox">
  128. {{#each photos}}
  129. <div class="item {{#if @first}}active{{/if}}">
  130. <img class="carousel-img" src="{{src}}" alt="" />
  131. <div class="carousel-caption">
  132. Image caption
  133. </div>
  134. </div> <!-- / carousel item -->
  135. {{/each}}
  136. </div>
  137. <!-- Controls -->
  138. <a class="left carousel-control" href="#carousel-example-generic"
  139. role="button" data-slide="prev">
  140. <span class="glyphicon glyphicon-chevron-left"
  141. aria-hidden="true"></span>
  142. <span class="sr-only">Previous</span>
  143. </a>
  144. <a class="right carousel-control" href="#carousel-example-generic"
  145. role="button" data-slide="next">
  146. <span class="glyphicon glyphicon-chevron-right"
  147. aria-hidden="true"></span>
  148. <span class="sr-only">Next</span>
  149. </a>
  150. </div>
  151. </div> <!-- / carousel -->
  152. </div> <!-- / col -->
  153. </div> <!-- / row -->
  154. </script>
  155. </body>
  156. </html>