Gallery Link in Caption

Trying to put a hyperlink inside the caption of a photo in a gallery Modal.

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

      <div class="container">
	  		
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Slide #1" data-caption="What a nice building." data-image="http://dv-2.com/boots/fidslides/slide1.jpg" data-target="#image-gallery" style="display:inline-block; max-width:85px;">
								<img class="img-responsive" src="http://dv-2.com/boots/fidslides/slide1.jpg" alt="">
					            </a> 
					            
        						<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Slide #2" data-image="http://dv-2.com/boots/fidslides/slide2.jpg" data-target="#image-gallery" data-caption="A beautiful sky." style="display:inline-block; max-width:85px;">
								<img class="img-responsive" src="http://dv-2.com/boots/fidslides/slide2.jpg" alt="">
					            </a>
					            
					             <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Slide #3" data-caption="Gorgeous scenery." data-image="http://dv-2.com/boots/fidslides/slide3.jpg" data-target="#image-gallery" style="display:inline-block; max-width:85px;">
								<img class="img-responsive" src="http://dv-2.com/boots/fidslides/slide3.jpg" alt="">
					            </a> 
					            
        						<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Slide #4" data-image="http://dv-2.com/boots/fidslides/slide4.jpg" data-target="#image-gallery" data-caption="Brrrr!" style="display:inline-block; max-width:85px;">
								<img class="img-responsive" src="http://dv-2.com/boots/fidslides/slide4.jpg" alt="">
					            </a>
					            
					            <a class="thumbnail ds" href="#" data-image-id="" data-toggle="modal"...

JavaScript

<script>

	$(document).ready(function(){

    loadGallery(true, 'a.thumbnail');

    //This function disables buttons when needed
    function disableButtons(counter_max, counter_current){
        $('#show-previous-image, #show-next-image').show();
        if(counter_max == counter_current){
            $('#show-next-image').hide();
        } else if (counter_current == 1){
            $('#show-previous-image').hide();
        }
    }

    /**
     *
     * @param setIDs        Sets IDs when DOM is loaded. If using a PHP counter, set to false.
     * @param setClickAttr  Sets the attribute for the click handler.
     */

    function loadGallery(setIDs, setClickAttr){
        var current_image,
            selector,
            counter = 0;

        $('#show-next-image, #show-previous-image').click(function(){
            if($(this).attr('id') == 'show-previous-image'){
                current_image--;
            } else {
                current_image++;
            }

            selector = $('[data-image-id="' + current_image + '"]');
            updateGallery(selector);
        });

        function updateGallery(selector) {
            var $sel = selector;
            current_image = $sel.data('image-id');
            $('#image-gallery-caption').text($sel.data('caption'));
            $('#image-gallery-title').text($sel.data('title'));
            $('#image-gallery-image').attr('src', $sel.data('image'));
            disableButtons(counter, $sel.data('image-id'));
        }

        if(setIDs == true){
            $('[data-image-id]').each(function(){
                counter++;
                $(this).attr('data-image-id',counter);
            });
        }
        $(setClickAttr).on('click',function(){
            updateGallery($(this));
        });
    }
});

</script>