fgm
/
front__coursera-responsive-basics


			
				
					
						
						
							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>
    &nbsp;
    <a href="aboutme.html">About me</a>
    &nbsp;
    <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>