|
|
@@ -9,29 +9,24 @@
|
|
|
-->
|
|
|
|
|
|
<head>
|
|
|
+
|
|
|
+ <script src="js/jquery-2.1.4.min.js"></script>
|
|
|
+ <script src="js/handlebars-v3.0.3.js"></script>
|
|
|
|
|
|
-
|
|
|
-<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>
|
|
|
|
|
|
-<script src="js/bootstrap.min.js"></script>
|
|
|
-
|
|
|
-<link href="css/bootstrap.css" rel="stylesheet">
|
|
|
-<link href="css/gallery.css" rel="stylesheet">
|
|
|
-
|
|
|
+ <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>
|
|
|
|
|
|
-
|
|
|
|
|
|
the search box.
|
|
|
It is given the navbar-form class so that bootstrap
|
|
|
@@ -47,10 +42,10 @@
|
|
|
we can extend the example later to use them
|
|
|
-->
|
|
|
<ul class="nav nav-tabs">
|
|
|
- <li role="" id="detailsbtn"><a href="#">Details</a></li>
|
|
|
- <li role="" id="modalbtn"><a href="#">Modal</a></li>
|
|
|
+ <li role="" id="detailsbtn"><a href="#">Details</a></li>
|
|
|
+ <li role="" id="modalbtn"><a href="#">Modal</a></li>
|
|
|
</ul>
|
|
|
- <br/><br/>
|
|
|
+ <br /><br />
|
|
|
|
|
|
|
|
|
the content of the web page starts off empty
|
|
|
@@ -58,14 +53,14 @@
|
|
|
We use container-fluid because our template uses
|
|
|
the bootstrap grid
|
|
|
-->
|
|
|
- <div id="content" class="container-fluid" role="main">
|
|
|
+ <div id="content" class="container-fluid" role="main">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
this div will contain the modal dialog which will
|
|
|
display the large image
|
|
|
-->
|
|
|
- <div id="modal-container" >
|
|
|
+ <div id="modal-container">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -76,45 +71,40 @@
|
|
|
-->
|
|
|
<script id="album-template" type="text/x-handlebars-template">
|
|
|
|
|
|
- <div class="row">
|
|
|
- {{#each images}}
|
|
|
- <div class="col-xs-12 col-md-3">
|
|
|
- <div class="thumbnail" data-id="{{@index}}">
|
|
|
- <img class="crop-img" src="{{src}}" alt=""/>
|
|
|
+ <div class="row">
|
|
|
+ {{#each images}}
|
|
|
+ <div class="col-xs-12 col-md-3">
|
|
|
+ <div class="thumbnail" data-id="{{@index}}">
|
|
|
+ <img class="crop-img" src="{{src}}" alt="" />
|
|
|
|
|
|
- <div class="author">
|
|
|
- <h3> {{title}} </h3>
|
|
|
- <p> {{author}} </p>
|
|
|
- </div>
|
|
|
+ <div class="author">
|
|
|
+ <h3> {{title}} </h3>
|
|
|
+ <p> {{author}} </p>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- </div>
|
|
|
- {{/each}}
|
|
|
- </div>
|
|
|
- </script>
|
|
|
-
|
|
|
-
|
|
|
- This second template displays a modal pop-up of the image.
|
|
|
- It has quite a bit of boilder plate HTML code but in
|
|
|
- essence it just displays and image tag within a
|
|
|
- set of divs that define the modal
|
|
|
- -->
|
|
|
- <script id="modal-template" type="text/x-handlebars-template">
|
|
|
- <div id="imageModal" class="modal fade" role="dialog">
|
|
|
- <div class="modal-dialog" style="width:800">
|
|
|
-
|
|
|
- <div class="modal-content">
|
|
|
-
|
|
|
- <div class="modal-body">
|
|
|
- <img style="width:100%" src="{{src}}"/>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ {{/each}}
|
|
|
+ </div>
|
|
|
+ </script>
|
|
|
|
|
|
+
|
|
|
+ This second template displays a modal pop-up of the image.
|
|
|
+ It has quite a bit of boilder plate HTML code but in
|
|
|
+ essence it just displays and image tag within a
|
|
|
+ set of divs that define the modal
|
|
|
+ -->
|
|
|
+ <script id="modal-template" type="text/x-handlebars-template">
|
|
|
+ <div id="imageModal" class="modal fade" role="dialog">
|
|
|
+ <div class="modal-dialog" style="width:800px">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-body">
|
|
|
+ <img style="width:100%" src="{{src}}" />
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
- </script>
|
|
|
- </body>
|
|
|
+ </div>
|
|
|
+ </script>
|
|
|
|
|
|
|
|
|
The javascript code to instantiate the template
|
|
|
@@ -122,52 +112,53 @@
|
|
|
<script type="text/javascript">
|
|
|
// get the source code for our two template
|
|
|
// and compile them
|
|
|
- var source = $("#album-template").html();
|
|
|
+ var source = $("#album-template").html();
|
|
|
var template = Handlebars.compile(source);
|
|
|
|
|
|
- source = $("#modal-template").html();
|
|
|
+ source = $("#modal-template").html();
|
|
|
var modal_template = Handlebars.compile(source);
|
|
|
|
|
|
// define the data for the template
|
|
|
// we define an objects which contains an
|
|
|
// array of other objects. This array will be used
|
|
|
// to create multiple images
|
|
|
- var data = {images:[
|
|
|
- {
|
|
|
- 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",
|
|
|
- },
|
|
|
- {
|
|
|
- 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"
|
|
|
- },
|
|
|
- {
|
|
|
- src:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Barnard_33.jpg/300px-Barnard_33.jpg",
|
|
|
- title: "horse nebula",
|
|
|
- author: "John Smith",
|
|
|
- },
|
|
|
- {
|
|
|
- src:"http://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Wwii_woman_worker-edit.jpg/300px-Wwii_woman_worker-edit.jpg",
|
|
|
- title:"wwii woman worker",
|
|
|
- author:"Another author",
|
|
|
+ var data = {
|
|
|
+ images: [
|
|
|
+ {
|
|
|
+ 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"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Barnard_33.jpg/300px-Barnard_33.jpg",
|
|
|
+ title: "horse nebula",
|
|
|
+ author: "John Smith"
|
|
|
},
|
|
|
- {
|
|
|
- src:"http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Lijiang_Yunnan_China-Naxi-people-carrying-baskets-01.jpg/300px-Lijiang_Yunnan_China-Naxi-people-carrying-baskets-01.jpg",
|
|
|
- title:"Lijiang Yunnan China Naxi people carrying baskets-",
|
|
|
- author:"Wikimedia Commons",
|
|
|
- },
|
|
|
- {
|
|
|
- src:"http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Stift_G%C3%B6ttweig_Gobelinzimmer_01.JPG/300px-Stift_G%C3%B6ttweig_Gobelinzimmer_01.JPG",
|
|
|
- title:"Marco's house",
|
|
|
- author:"Wikimedia Commons",
|
|
|
- },
|
|
|
-
|
|
|
- ]};
|
|
|
+ {
|
|
|
+ src: "http://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Wwii_woman_worker-edit.jpg/300px-Wwii_woman_worker-edit.jpg",
|
|
|
+ title: "wwii woman worker",
|
|
|
+ author: "Another author"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Lijiang_Yunnan_China-Naxi-people-carrying-baskets-01.jpg/300px-Lijiang_Yunnan_China-Naxi-people-carrying-baskets-01.jpg",
|
|
|
+ title: "Lijiang Yunnan China Naxi people carrying baskets-",
|
|
|
+ author: "Wikimedia Commons"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Stift_G%C3%B6ttweig_Gobelinzimmer_01.JPG/300px-Stift_G%C3%B6ttweig_Gobelinzimmer_01.JPG",
|
|
|
+ title: "Marco's house",
|
|
|
+ author: "Wikimedia Commons"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
|
|
|
// render the data into the template
|
|
|
- var html = template(data);
|
|
|
+ var html = template(data);
|
|
|
// put the rendered template into the DOM
|
|
|
$('#content').html(html);
|
|
|
|
|
|
@@ -175,23 +166,23 @@
|
|
|
// image as a modal
|
|
|
// this is added as a click callback
|
|
|
// to the thumbnails
|
|
|
- function displayModal(event){
|
|
|
- // get the index (position in the array)
|
|
|
- // of the photo we clicked on
|
|
|
- // "this" is the element that was clicked on
|
|
|
- // data("id") gets the attribute data-id
|
|
|
- // (which we set to the index of the photo in
|
|
|
- // the array - @index)
|
|
|
- var imageNumber = $(this).data("id");
|
|
|
-
|
|
|
- // get the image out of the array using the image
|
|
|
- // number and render it using the modal template
|
|
|
- var html = modal_template(data.images[imageNumber]);
|
|
|
- // put the modal template in the DOM
|
|
|
- $('#modal-container').html(html);
|
|
|
-
|
|
|
- // show the modal
|
|
|
- $("#imageModal").modal('show');
|
|
|
+ function displayModal(event) {
|
|
|
+ // get the index (position in the array)
|
|
|
+ // of the photo we clicked on
|
|
|
+ // "this" is the element that was clicked on
|
|
|
+ // data("id") gets the attribute data-id
|
|
|
+ // (which we set to the index of the photo in
|
|
|
+ // the array - @index)
|
|
|
+ var imageNumber = $(this).data("id");
|
|
|
+
|
|
|
+ // get the image out of the array using the image
|
|
|
+ // number and render it using the modal template
|
|
|
+ var html = modal_template(data.images[imageNumber]);
|
|
|
+ // put the modal template in the DOM
|
|
|
+ $('#modal-container').html(html);
|
|
|
+
|
|
|
+ // show the modal
|
|
|
+ $("#imageModal").modal('show');
|
|
|
}
|
|
|
|
|
|
// display the modal when you click on a thumbnail
|
|
|
@@ -219,22 +210,20 @@
|
|
|
// create a new array of data with only
|
|
|
// the data that contains the search string
|
|
|
var filteredData = {
|
|
|
-
|
|
|
// use the filter function which returns
|
|
|
// a new array that contains only the
|
|
|
// elements of data.images for which
|
|
|
// the function returns true
|
|
|
- images: data.images.filter(function(d){
|
|
|
-
|
|
|
+ images: data.images.filter(function (d) {
|
|
|
// return true if the title contains
|
|
|
// the search text
|
|
|
- if (d.title.search(search_text) > -1){
|
|
|
+ if (d.title.search(search_text) > -1) {
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
// return true if the author contains
|
|
|
// the search text
|
|
|
- if (d.author.search(search_text) > -1){
|
|
|
+ if (d.author.search(search_text) > -1) {
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
@@ -246,14 +235,12 @@
|
|
|
|
|
|
// pass the newly filtered data into
|
|
|
// the template to generate new html
|
|
|
- var html = template(filteredData);
|
|
|
+ var html = template(filteredData);
|
|
|
$('#content').html(html);
|
|
|
|
|
|
// display the modal when you click on a thumbnail
|
|
|
$('.thumbnail').click(displayModal);
|
|
|
}
|
|
|
});
|
|
|
-
|
|
|
</script>
|
|
|
-
|
|
|
</body>
|
