123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- <html>
- <head>
- <title>Image Gallery</title>
- <link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
- <link rel="stylesheet" type="text/css" href="/css/styles.css" />
- <script type="text/ecmascript" src="/lib/jquery-2.2.1.js"></script>
- </head>
- <body>
- <!-- some header info (from Matthew's code) -->
- <a href="index.html">Home</a>
-
- <a href="aboutme.html">About me</a>
-
- <a href="contact.html">Contact me</a>
- <hr />
- <div class="container">
- <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.
- -->
- <div class="row">
- <div class="col-md-3">
- <img 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"/>
- </div>
- <div class="col-md-3">
- <img 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"/>
- </div>
- </div>
- <!--
- this is the large image which is
- on a row of its own.
- I will change it source in the
- javascript
- -->
- <div class="row">
- <div class="col-md-12">
- <img id="bigImage"
- class="large-img"
- src="/images/img_1.jpg"
- alt="graffittied building"/>
- </div>
- </div>
- </div>
- <script>
- // 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
- $(".crop-img").click(function(){
- $("#bigImage").attr('src',
- $(this).attr('src'));
- });
- </script>
- </body>
- </html>
|