|
|
@@ -1,13 +1,19 @@
|
|
|
<html>
|
|
|
- <head>
|
|
|
+ <head>
|
|
|
<title>Image Gallery</title>
|
|
|
+
|
|
|
+ <!-- import bootstrap -->
|
|
|
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
|
|
|
+
|
|
|
+ <!-- import our own stylesheet -->
|
|
|
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
|
|
|
+
|
|
|
+ <!-- import jQuery -->
|
|
|
<script type="text/ecmascript" src="/lib/jquery-2.2.1.js"></script>
|
|
|
- </head>
|
|
|
+ </head>
|
|
|
|
|
|
- <body>
|
|
|
- <!-- some header info (from Matthew's code) -->
|
|
|
+ <body>
|
|
|
+ <!-- some header info (from Matthew's code) -->
|
|
|
<a href="index.html">Home</a>
|
|
|
|
|
|
<a href="aboutme.html">About me</a>
|
|
|
@@ -20,59 +26,120 @@
|
|
|
<h1>Image Gallery</h1>
|
|
|
|
|
|
<!--
|
|
|
- These are the thumbnail images. They are laid out using the bootstrap
|
|
|
- grid. I have given them all the class "crop-image" which I use in the
|
|
|
- css and the javascript code.
|
|
|
+ These are the thumbnail images.
|
|
|
+ They pretty much the same as the
|
|
|
+ last example from the previous
|
|
|
+ module, except I have added an
|
|
|
+ id to each image which includes
|
|
|
+ the number of that image.
|
|
|
-->
|
|
|
<div class="row">
|
|
|
<div class="col-md-3">
|
|
|
- <img class="crop-img"
|
|
|
- src="/images/img_1.jpg"
|
|
|
- alt="graffittied building"/>
|
|
|
+ <img id="image1" class="crop-img" src="/images/img_1.jpg" alt="graffittied building"/>
|
|
|
</div>
|
|
|
<div class="col-md-3">
|
|
|
- <img class="crop-img"
|
|
|
- src="/images/img_3.jpg"
|
|
|
- alt="display of cheese"/>
|
|
|
+ <img id="image2" class="crop-img" src="/images/img_3.jpg" alt="display of cheese"/>
|
|
|
</div>
|
|
|
<div class="col-md-3">
|
|
|
- <img class="crop-img"
|
|
|
- src="/images/img_4.jpg"
|
|
|
- alt="synethesizer workshop"/>
|
|
|
+ <img id="image3" class="crop-img" src="/images/img_4.jpg" alt="synethesizer workshop"/>
|
|
|
</div>
|
|
|
<div class="col-md-3">
|
|
|
- <img class="crop-img"
|
|
|
- src="/images/img_5.jpg"
|
|
|
- alt="City night"/>
|
|
|
+ <img id="image4" class="crop-img" src="/images/img_5.jpg" alt="City night"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--
|
|
|
this is the large image which is
|
|
|
on a row of its own.
|
|
|
- I will change it source in the
|
|
|
- javascript
|
|
|
+ The code is similar to the last example
|
|
|
+ of the previous module, but I have
|
|
|
+ added a backwards and forwards button
|
|
|
-->
|
|
|
<div class="row">
|
|
|
- <div class="col-md-12">
|
|
|
- <img id="bigImage"
|
|
|
- class="large-img"
|
|
|
- src="/images/img_1.jpg"
|
|
|
- alt="graffittied building"/>
|
|
|
+ <div class="col-md-1">
|
|
|
+ <button id="backward"><</button>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-10">
|
|
|
+ <img id="bigImage" class="large-img" src="/images/img_1.jpg" alt="graffittied building"/>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-1">
|
|
|
+ <button id="forward">></button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
+ // Whether the slideshow is paused or not.
|
|
|
+ var paused = false;
|
|
|
+
|
|
|
// when we click on the thumbnail
|
|
|
// we set the src attribute of the
|
|
|
- // bit image to be the same as the
|
|
|
- // src of the image we have clicked on
|
|
|
- // ("this"). This loads the same
|
|
|
- // image file into the big image
|
|
|
+ // big image to be the same as the
|
|
|
+ // src of the image we have clicked on.
|
|
|
$(".crop-img").click(function(){
|
|
|
$("#bigImage").attr('src',
|
|
|
$(this).attr('src'));
|
|
|
});
|
|
|
+
|
|
|
+ // the counter variable that keeps
|
|
|
+ // track of which image you are showing
|
|
|
+ var counter = 1;
|
|
|
+
|
|
|
+ // virtually click on the current
|
|
|
+ // image to load it into the big image
|
|
|
+ $("#image" + counter).click();
|
|
|
+
|
|
|
+ // when you click on the backwards
|
|
|
+ // button select the previous image
|
|
|
+ $("#backward").click(function () {
|
|
|
+ // go back one in the counter
|
|
|
+ counter = counter - 1;
|
|
|
+ // if we are below 1 (the first
|
|
|
+ // image) loop round to 4 (the
|
|
|
+ // last image)
|
|
|
+ if (counter < 1) {
|
|
|
+ counter = 4;
|
|
|
+ }
|
|
|
+ // virtually click on the current
|
|
|
+ // image to load it into the big image
|
|
|
+ $("#image" + counter).click();
|
|
|
+ });
|
|
|
+
|
|
|
+ // when you click on the backwards
|
|
|
+ // button select the next image
|
|
|
+ $("#forward").click(function () {
|
|
|
+ // go forward one in the counter
|
|
|
+ counter = counter + 1;
|
|
|
+ // if we are above 4 (the last
|
|
|
+ // image) loop round to 1 (the
|
|
|
+ // first image)
|
|
|
+ if (counter > 4) {
|
|
|
+ counter = 1;
|
|
|
+ }
|
|
|
+ // virtually click on the current
|
|
|
+ // image to load it into the big image
|
|
|
+ $("#image" + counter).click();
|
|
|
+ });
|
|
|
+
|
|
|
+ // when you click the big image
|
|
|
+ // toggle pausing. Set paused to
|
|
|
+ // not paused, i.e. if it is paused
|
|
|
+ // set it to not paused, if it is
|
|
|
+ // not paused set it to paused
|
|
|
+ $("#bigImage").click(function () {
|
|
|
+ paused = !paused;
|
|
|
+ });
|
|
|
+
|
|
|
+ // set interval makes it move
|
|
|
+ // forward every 3 second
|
|
|
+ setInterval(function () {
|
|
|
+ // first check if it is paused
|
|
|
+ if (!paused) {
|
|
|
+ // virtual click the forward
|
|
|
+ // button
|
|
|
+ $("#forward").click();
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ }, 3000);
|
|
|
</script>
|
|
|
- </body>
|
|
|
+ </body>
|
|
|
</html>
|
