Colorbox function is not working

I'm trying to create a HTML image gallery with colorbox jquery. But I can never get the images to open in a colorbox, instead they just open normally. Maybe I'm doing something terribly wrong. Here's the code:

<!doctype html>
<html>
  <head>
    <title> Gallery </title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/colorbox.css">
    <script src="js/jquery.colorbox-min.js"></script>
    <script src="js/jquery.colorbox.js"></script>
    <script>
    jQuery(document).ready(function () {
      jQuery('a.gallery').colorbox({ opacity:0.5 , rel:'group1' });
    });
    </script>

  <body>
    <h1>Gallery</h1>

    <div class="gallery">
    <a href="images/1.png"><img src="images/1.png"></a>
    <a href="images/2.png"><img src="images/2.png"></a>
    <a href="images/3.png"><img src="images/3.png"></a>    
    <a href="images/4.png"><img src="images/4.png"> </a>   
    <a href="images/5.png" ><img src="images/5"></a>   
    <a href="images/6.png" ><img src="images/6"></a>   
    <a href="images/7.png" ><img src="images/7"></a>
  </body>
</html>

Solution

As I mentioned in my comments, try including jQuery, removing one of the colorbox scripts, and add the gallery class to the anchors. Like this:

<!doctype html>
<html>
  <head>
    <title> Gallery </title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/colorbox.css">
    <!-- include a compatible jquery version and remove one of the colorbox scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.colorbox.min.js"></script>
    <script>
      jQuery(document).ready(function () {
        jQuery('a.gallery').colorbox({ opacity:0.5 , rel:'group1' });
      });
    </script>
  </head>
  <body>
    <h1>Gallery</h1>
    <div>
      <!-- Add the class of gallery to the anchors -->
      <a class="gallery" href="images/1.png"><img src="images/1.png"></a>
      <a class="gallery" href="images/2.png"><img src="images/2.png"></a>
      <a class="gallery" href="images/3.png"><img src="images/3.png"></a>    
      <a class="gallery" href="images/4.png"><img src="images/4.png"> </a>   
      <a class="gallery" href="images/5.png" ><img src="images/5"></a>   
      <a class="gallery" href="images/6.png" ><img src="images/6"></a>   
      <a class="gallery" href="images/7.png" ><img src="images/7"></a>
    </div>
  </body>
</html>