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>