How to link a thumbnail to a specific image in an owl carousel on a different page?

I would appreciate any help in solving this problem. I've made a page with thumbnails that link to a new page that shows the gallery of images. I've used the Owl Carousel to create the gallery page. I created id tags to link the thumbs to the larger image and it sort of works, and does pull up that image directly, but the problem is the small button icons beneath the large photo no longer corresponds to the correct large image. It seems to work except if you click a later thumb at the bottom of the page, it opens the link, but scrolling through the photos only allows you to see the ones after the selected photo and doesn't include any of the photos that should have shown up before the selected thumb. Does that make sense? I want any thumb to open it's corresponding large image, but still be able to slide through the whole gallery with all the included images. I've posted the site I'm working on to show you what I mean. I'm totally stumped here!

http://thadenphoto.com/levy/drawings.html

Thumbnail Page
<div class="box"> <div class="boxInner"> <a href="drawings/drawgallery.html"> <img src="images/drawings/thumbs/image1.jpg" alt=""> </a> </div> </div> <div class="box"> <div class="boxInner"> <a href="drawings/drawgallery.html#d2"> <img src="images/drawings/thumbs/image2.jpg" alt=""> </a> </div> </div> <div class="box"> <div class="boxInner"> <a href="drawings/drawgallery.html#d3"> <img src="images/drawings/thumbs/image3.jpg" alt=""> </a> </div> <div class="box"> <div class="boxInner"> <a href="drawings/drawgallery.html#d4"> <img src="images/drawings/thumbs/image4.jpg" alt=""> </a> </div> </div> <div class="box"> <div class="boxInner"> <a href="drawings/drawgallery.html#d5"> <img src="images/drawings/thumbs/image5.jpg" alt=""> </a> </div> </div> <div class="box"> <div class="boxInner"> <a href="drawings/drawgallery.html#d6"> <img src="images/drawings/thumbs/image6.jpg" alt=""> </a> </div>

drawgallery Page

<div class="container"> <div id="carousel" class="owl-carousel owl-theme"> <div class="item" id="d1"><img src="../images/drawings/image1.jpg" alt=""></div> <div class="item" id="d2"><img src="../images/drawings/image2.jpg" alt=""></div> <div class="item" id="d3"><img src="../images/drawings/image3.jpg" alt=""></div> <div class="item" id="d4"><img src="../images/drawings/image4.jpg" alt=""></div> <div class="item" id="d5"><img src="../images/drawings/image5.jpg" alt=""></div> <div class="item" id="d6"><img src="../images/drawings/image6.jpg" alt=""></div> </div> </div>

<!-- end of owl carousel --> <footer> </footer>

<!-- javascript --> <script src="../js/jquery-1.12.0.min.js"></script> <script src="../js/owl.carousel.min.js"></script>

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

    $("#carousel").owlCarousel({
      autoplay : true,
      // navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true,
      paginationNumbers : false

    });

  });

</script>

</body> </html>