<commit_before><commit_msg>getting the whole shibang working<commit_after><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="<EMAIL>">

    <title>Simple Image Switcher</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
      #images {
        width:100%;
        position:relative;
      }
      #images img {
        display:none;
        position:absolute;
        top:0;
        left:0;
      }
      #images img.display {
        display:block;
      }
      #images-controller {
        .clearfix;
        margin-top:24px;
      }
      #images-controller a {

        width:24px;
        height:24px;
        border-radius: 100%;
        display:inline-block;
        float:left;
        margin-right:12px;
      }
      .button-1 {

        background:red;
      }
      .button-2 {
        background:yellow;
      }
      .button-3 {
        background:blue;
      }
      .button-4 {
        background:orange;
      }
      .button-5 {
        background:black;
      }
    </style>

  </head>

  <body>

    <div class="container">

      <h1>Simple Image Switcher with Jquery and Bootstrap</h1>

      <div class="row">
        <div id="images" class="col-md-12">
          <img src="http://lorempixel.com/output/nature-q-c-640-480-9.jpg" alt="Image" class="img-responsive display">
          <img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" alt="Image" class="img-responsive">
          <img src="http://lorempixel.com/output/nature-q-c-640-480-7.jpg" alt="Image" class="img-responsive">
          <img src="http://lorempixel.com/output/nature-q-c-640-480-6.jpg" alt="Image" class="img-responsive">
          <img src="http://lorempixel.com/output/nature-q-c-640-480-5.jpg" alt="Image" class="img-responsive">
        </div>
      </div>

      <div id="images-controller">
        <a href="" class="button-1"></a>
        <a href="" class="button-2"></a>
        <a href="" class="button-3"></a>
        <a href="" class="button-4"></a>
        <a href="" class="button-5"></a>
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <script>
      $(document).ready(function() {

        // when the page first loads, get the height of the first image and make the parent the same height
        $('#images').children(':first').load(function() {
          var imageHeight = $(this).height();
          $('#images').height(imageHeight);
        });

        // When the window resizes, change the height of the parent div so that it scales to the viewport
        $(window).resize(function() {
          var imageHeight = $('#images img').height();
          $('#images').height(imageHeight);
        });

        $('#images-controller').on('click', 'a', function(e) {
          // Stops the ahref from going anywhere
          event.preventDefault();

          //Find the index number of the ahref that was clicked
          var thisLink = $(this).index();

          //Find the image in #images with the same index number as
          var thisImage = $('#images img').eq(thisLink);
          
          // Fade out any displayed images
          $('#images img').fadeOut();
          $(thisImage).fadeIn();

        });
      });
    </script>

  </body>
</html>
{'fraction_non_alphanumeric': 0.1821017274472169, 'fraction_numerical': 0.02111324376199616, 'mean_word_length': 2.2019969278033793, 'pattern_counts': {'":': 0, '<': 62, '<?xml version=': 0, '>': 62, 'https://': 5, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1392850', 'n_tokens_mistral': 1360, 'n_tokens_neox': 1275, 'n_words': 265}