index.html 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  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 src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  26. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  27. <![endif]-->
  28. </head>
  29. <body>
  30. <div class="container">
  31. <!-- page tile -->
  32. <div class="page-header">
  33. <h1>My photo albums </h1>
  34. </div>
  35. <!-- A navigation menu that selects different views -->
  36. <ul class="nav nav-tabs">
  37. <li role="" class="active"><a href="#" id="albums-tab" >Albums</a></li>
  38. <li role=""><a href="#" id="photos-tab" >Photos</a></li>
  39. <li role=""><a href="#" id="slideshow-tab" >Slideshow</a></li>
  40. </ul>
  41. <br/><br/>
  42. <!-- the content section is empty as we will fill it
  43. via javascript and templates -->
  44. <div id="content" class="container-fluid" role="main">
  45. </div>
  46. </div> <!-- / container -->
  47. <!-- Here are our Templates -->
  48. <!-- this is the template for the albums view -->
  49. <!--
  50. it displays the albums in a bootstrap grid format
  51. with one item for each album (using the {{#each}} template expression.
  52. Each album is displayed with a thumbnail image, a name and
  53. the number of photos (using the {{photos.length}} template expression, see my lecture for more details)
  54. -->
  55. <script id="albums-template" type="text/x-handlebars-template">
  56. <div class="row">
  57. {{#each albums}}
  58. <div class="col-xs-12 col-md-3">
  59. <div class="album-thumbnail" data-id="{{@index}}">
  60. <img class="crop-img" src="{{thumbnail}}" alt=""/>
  61. <div class="caption">
  62. <h4> {{name}} </h4>
  63. <p>{{photos.length}} photos</p>
  64. </div>
  65. </div>
  66. </div> <!-- / col -->
  67. {{/each}}
  68. </div> <!-- / row -->
  69. </script>
  70. <!-- this is the template for the photos view of a single album -->
  71. <!--
  72. like albums view it uses a bootstrap grid format to display the photos in an album
  73. Each photos is displayed with anumbnail image, a name and
  74. a description
  75. -->
  76. <script id="photos-template" type="text/x-handlebars-template">
  77. <div class="row">
  78. <!-- xs-12 : small display shows a single column (taking up 12 grid columns)-->
  79. <!-- md-3 : medium and up displays use 3 grid columns per column -->
  80. {{#each photos}}
  81. <div class="col-xs-12 col-md-3">
  82. <div class="photo-thumbnail" data-id="{{@index}}">
  83. <img class="crop-img" src="{{src}}" alt=""/>
  84. <div class="caption">
  85. <h3>{{title}}</h3>
  86. <p>{{description}}</p>
  87. </div>
  88. </div>
  89. </div> <!-- / col -->
  90. {{/each}}
  91. </div> <!-- / row -->
  92. </script>
  93. <!-- this is the template for the view a single photo -->
  94. <!--
  95. It is displayed as a large image with title and description
  96. -->
  97. <script id="photo-template" type="text/x-handlebars-template">
  98. <div class="row">
  99. <div class="col-xs-12 col-md-12">
  100. <img class="large-img" src="{{src}}" alt=""/>
  101. <div class="caption">
  102. <h3>{{title}}</h3>
  103. <p>{{description}}</p>
  104. </div>
  105. </div> <!-- / col -->
  106. </div> <!-- / row -->
  107. </script>
  108. <!-- this is the template for the slideshow view of a single album -->
  109. <!--
  110. It uses the carousel view, which is quite complex, see my lecture for details
  111. -->
  112. <script id="slideshow-template" type="text/x-handlebars-template">
  113. <div class="row">
  114. <div class="col-md-6">
  115. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  116. <ol class="carousel-indicators">
  117. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  118. <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  119. <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  120. </ol>
  121. <!-- Wrapper for slides -->
  122. <div class="carousel-inner" role="listbox">
  123. {{#each photos}}
  124. <div class="item {{#if @first}}active{{/if}}">
  125. <img class="carousel-img" src="{{src}}" alt=""/>
  126. <div class="carousel-caption">
  127. Image caption
  128. </div>
  129. </div> <!-- / carousel item -->
  130. {{/each}}
  131. </div>
  132. <!-- Controls -->
  133. <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  134. <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  135. <span class="sr-only">Previous</span>
  136. </a>
  137. <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  138. <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  139. <span class="sr-only">Next</span>
  140. </a>
  141. </div>
  142. </div> <!-- / carousel -->
  143. </div> <!-- / col -->
  144. </div> <!-- / row -->
  145. </script>
  146. </body>
  147. </html>