JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">

    <div class="col-lg-12">
        <h1 class="page-header">Thumbnail Gallery</h1>
    
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Image One" data-caption="This is some dummy text for the first image, anything can go here really.." data-image="http://lorempixel.com/output/abstract-q-c-640-480-10.jpg" data-href="http://codepen.io" data-target="#image-gallery">
                <img class="img-responsive" src="http://lorempixel.com/output/abstract-q-c-640-480-10.jpg" alt="Another alt text">
            </a>
        </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Image Two" data-caption="Second image description and speil, running out of words that I can think of. I thought my vocabulary was better than that." data-image="http://lorempixel.com/output/animals-q-c-640-480-9.jpg" data-href="http://jsfiddle.net" data-target="#image-gallery">
                <img class="img-responsive" src="http://lorempixel.com/output/animals-q-c-640-480-9.jpg" alt="Another alt text">
            </a>
        </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Image Three" data-caption="My YouTube playlist is playing music I would literally never listen to." data-image="http://lorempixel.com/output/technics-q-c-640-480-9.jpg" data-href="http://google.com" data-target="#image-gallery">
                <img class="img-responsive" src="http://lorempixel.com/output/technics-q-c-640-480-9.jpg" alt="Another alt text">
            </a>
        </div>
</div>


<div...

CSS

.modal-footer {
    min-height:150px;
}
#image-gallery-link {
    clear:both;
    width:100%;
    text-align:center;
    padding:0px;
    margin:0px;
}
#image-gallery-caption {
    max-width:60%;
    text-align:center;
}

JavaScript

$(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'));
            $('#image-gallery-link a').text($sel.data('title'));
            $('#image-gallery-link a').attr('src', $sel.data('href'));
            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));
        });
    }
});