fgm
/
front__coursera-responsive-basics


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