|
|
@@ -13,14 +13,14 @@
|
|
|
<script src="js/jquery-2.2.2.js"></script>
|
|
|
<script src="js/bootstrap.min.js"></script>
|
|
|
<script src="js/handlebars-v3.0.3.js"></script>
|
|
|
-
|
|
|
+
|
|
|
|
|
|
These are our javascript files.
|
|
|
Albums.js contains the data
|
|
|
gallery.js is the code
|
|
|
-->
|
|
|
- <script src="js/Albums.js"> </script>
|
|
|
- <script src="js/gallery.js"> </script>
|
|
|
+ <script src="js/Albums.js"></script>
|
|
|
+ <script src="js/gallery.js"></script>
|
|
|
|
|
|
<link href="css/bootstrap.css" rel="stylesheet">
|
|
|
<link href="css/gallery.css" rel="stylesheet">
|
|
|
@@ -28,11 +28,12 @@
|
|
|
|
|
|
|
|
|
|
|
|
- <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
|
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
|
+ <script
|
|
|
+ src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
|
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
|
<![endif]-->
|
|
|
-
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
|
|
|
<div class="container">
|
|
|
@@ -40,152 +41,156 @@
|
|
|
|
|
|
<div class="page-header">
|
|
|
<h1>My photo albums </h1>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
<ul class="nav nav-tabs">
|
|
|
- <li role="" class="active"><a href="#" id="albums-tab" >Albums</a></li>
|
|
|
- <li role=""><a href="#" id="photos-tab" >Photos</a></li>
|
|
|
- <li role=""><a href="#" id="slideshow-tab" >Slideshow</a></li>
|
|
|
- </ul>
|
|
|
- <br/><br/>
|
|
|
+ <li role="" class="active"><a href="#" id="albums-tab">Albums</a></li>
|
|
|
+ <li role=""><a href="#" id="photos-tab">Photos</a></li>
|
|
|
+ <li role=""><a href="#" id="slideshow-tab">Slideshow</a></li>
|
|
|
+ </ul>
|
|
|
+ <br /><br />
|
|
|
|
|
|
|
|
|
|
|
|
via javascript and templates -->
|
|
|
- <div id="content" class="container-fluid" role="main">
|
|
|
+ <div id="content" class="container-fluid" role="main">
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- it displays the albums in a bootstrap grid format
|
|
|
- with one item for each album (using the {{#each}} template expression.
|
|
|
- Each album is displayed with a thumbnail image, a name and
|
|
|
- the number of photos (using the {{photos.length}} template expression, see my lecture for more details)
|
|
|
--->
|
|
|
-<script id="albums-template" type="text/x-handlebars-template">
|
|
|
- <div class="row">
|
|
|
-
|
|
|
- {{#each albums}}
|
|
|
- <div class="col-xs-12 col-md-3">
|
|
|
- <div class="album-thumbnail" data-id="{{@index}}">
|
|
|
- <img class="crop-img" src="{{thumbnail}}" alt=""/>
|
|
|
-
|
|
|
- <div class="caption">
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ it displays the albums in a bootstrap grid format
|
|
|
+ with one item for each album (using the {{#each}} template expression.
|
|
|
+ Each album is displayed with a thumbnail image, a name and
|
|
|
+ the number of photos (using the {{photos.length}} template expression, see my lecture for more details)
|
|
|
+ -->
|
|
|
+ <script id="albums-template" type="text/x-handlebars-template">
|
|
|
+ <div class="row">
|
|
|
+
|
|
|
+ {{#each albums}}
|
|
|
+ <div class="col-xs-12 col-md-3">
|
|
|
+ <div class="album-thumbnail" data-id="{{@index}}">
|
|
|
+ <img class="crop-img" src="{{thumbnail}}" alt="" />
|
|
|
+
|
|
|
+ <div class="caption">
|
|
|
<h4> {{name}} </h4>
|
|
|
<p>{{photos.length}} photos</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- {{/each}}
|
|
|
-
|
|
|
- </div>
|
|
|
-</script>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- like albums view it uses a bootstrap grid format to display the photos in an album
|
|
|
-
|
|
|
- Each photos is displayed with anumbnail image, a name and
|
|
|
- a description
|
|
|
--->
|
|
|
-<script id="photos-template" type="text/x-handlebars-template">
|
|
|
- <div class="row">
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- {{#each photos}}
|
|
|
- <div class="col-xs-12 col-md-3">
|
|
|
- <div class="photo-thumbnail" data-id="{{@index}}">
|
|
|
- <img class="crop-img" src="{{src}}" alt=""/>
|
|
|
-
|
|
|
- <div class="caption">
|
|
|
- <h3>{{title}}</h3>
|
|
|
- <p>{{description}}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- {{/each}}
|
|
|
-
|
|
|
- </div>
|
|
|
-</script>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- It is displayed as a large image with title and description
|
|
|
--->
|
|
|
-<script id="photo-template" type="text/x-handlebars-template">
|
|
|
- <div class="row">
|
|
|
- <div class="col-xs-12 col-md-12">
|
|
|
- <img class="large-img" src="{{src}}" alt=""/>
|
|
|
-
|
|
|
- <div class="caption">
|
|
|
- <h3>{{title}}</h3>
|
|
|
- <p>{{description}}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {{/each}}
|
|
|
|
|
|
- </div>
|
|
|
-</script>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- It uses the carousel view, which is quite complex, see my lecture for details
|
|
|
--->
|
|
|
-<script id="slideshow-template" type="text/x-handlebars-template">
|
|
|
- <div class="row">
|
|
|
- <div class="col-md-6">
|
|
|
-
|
|
|
- <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
|
|
-
|
|
|
- <ol class="carousel-indicators">
|
|
|
- <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
|
|
|
- <li data-target="#carousel-example-generic" data-slide-to="1"></li>
|
|
|
- <li data-target="#carousel-example-generic" data-slide-to="2"></li>
|
|
|
- </ol>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <div class="carousel-inner" role="listbox">
|
|
|
-
|
|
|
- {{#each photos}}
|
|
|
- <div class="item {{#if @first}}active{{/if}}">
|
|
|
- <img class="carousel-img" src="{{src}}" alt=""/>
|
|
|
- <div class="carousel-caption">
|
|
|
- Image caption
|
|
|
+ </div>
|
|
|
+ </script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ like albums view it uses a bootstrap grid format to display the photos in an album
|
|
|
+
|
|
|
+ Each photos is displayed with anumbnail image, a name and
|
|
|
+ a description
|
|
|
+ -->
|
|
|
+ <script id="photos-template" type="text/x-handlebars-template">
|
|
|
+ <div class="row">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ {{#each photos}}
|
|
|
+ <div class="col-xs-12 col-md-3">
|
|
|
+ <div class="photo-thumbnail" data-id="{{@index}}">
|
|
|
+ <img class="crop-img" src="{{src}}" alt="" />
|
|
|
+
|
|
|
+ <div class="caption">
|
|
|
+ <h3>{{title}}</h3>
|
|
|
+ <p>{{description}}</p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- {{/each}}
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
|
|
|
- <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
|
|
- <span class="sr-only">Previous</span>
|
|
|
- </a>
|
|
|
- <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
|
|
|
- <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
|
|
- <span class="sr-only">Next</span>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ {{/each}}
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ It is displayed as a large image with title and description
|
|
|
+ -->
|
|
|
+ <script id="photo-template" type="text/x-handlebars-template">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-xs-12 col-md-12">
|
|
|
+ <img class="large-img" src="{{src}}" alt="" />
|
|
|
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</div>
|
|
|
-</script>
|
|
|
+ <div class="caption">
|
|
|
+ <h3>{{title}}</h3>
|
|
|
+ <p>{{description}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
+ </div>
|
|
|
+ </script>
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+ It uses the carousel view, which is quite complex, see my lecture for details
|
|
|
+ -->
|
|
|
+ <script id="slideshow-template" type="text/x-handlebars-template">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-6">
|
|
|
+
|
|
|
+ <div id="carousel-example-generic" class="carousel slide"
|
|
|
+ data-ride="carousel">
|
|
|
+
|
|
|
+ <ol class="carousel-indicators">
|
|
|
+ <li data-target="#carousel-example-generic" data-slide-to="0"
|
|
|
+ class="active"></li>
|
|
|
+ <li data-target="#carousel-example-generic"
|
|
|
+ data-slide-to="1"></li>
|
|
|
+ <li data-target="#carousel-example-generic"
|
|
|
+ data-slide-to="2"></li>
|
|
|
+ </ol>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <div class="carousel-inner" role="listbox">
|
|
|
+
|
|
|
+ {{#each photos}}
|
|
|
+ <div class="item {{#if @first}}active{{/if}}">
|
|
|
+ <img class="carousel-img" src="{{src}}" alt="" />
|
|
|
+ <div class="carousel-caption">
|
|
|
+ Image caption
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {{/each}}
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
+
|
|
|
+ <a class="left carousel-control" href="#carousel-example-generic"
|
|
|
+ role="button" data-slide="prev">
|
|
|
+ <span class="glyphicon glyphicon-chevron-left"
|
|
|
+ aria-hidden="true"></span>
|
|
|
+ <span class="sr-only">Previous</span>
|
|
|
+ </a>
|
|
|
+ <a class="right carousel-control" href="#carousel-example-generic"
|
|
|
+ role="button" data-slide="next">
|
|
|
+ <span class="glyphicon glyphicon-chevron-right"
|
|
|
+ aria-hidden="true"></span>
|
|
|
+ <span class="sr-only">Next</span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </script>
|
|
|
|
|
|
|
|
|
</body>
|
|
|
-</html>
|
|
|
+</html>
|
|
|
+
|
