fgm
/
front__coursera-responsive-basics


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
							<html>
  <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>

  <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 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 id="image1" class="crop-img" src="/images/img_1.jpg" alt="graffittied building"/>
        </div>
        <div class="col-md-3">
          <img id="image2" class="crop-img" src="/images/img_3.jpg" alt="display of cheese"/>
        </div>
        <div class="col-md-3">
          <img id="image3" class="crop-img" src="/images/img_4.jpg" alt="synethesizer workshop"/>
        </div>
        <div class="col-md-3">
          <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.
        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-1">
          <button id="backward">&lt;</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">&gt;</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
      // 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--;

        // 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++;

        // 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>
</html>