Gallery Example

by jezzipin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<ul class="thumbnail-gallery">
    <li class="col-lg-4 col-md-3 col-sm-3 col-xs-4"><img src="http://placehold.it/200x200" class="img-responsive" data-modal="MyModal" data-large="http://placehold.it/400x400" /></li>  
    <li class="col-lg-4 col-md-3 col-sm-3 col-xs-4"><img src="http://placehold.it/300x300" class="img-responsive" data-modal="MyModal" data-large="http://placehold.it/600x600" /></li>
    <li class="col-lg-4 col-md-3 col-sm-3 col-xs-4"><img src="http://placehold.it/400x400" class="img-responsive" data-modal="MyModal" data-large="http://placehold.it/800x800" /></li>
</ul>

<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="MyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header MyModal">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body MyModal">
                <img src="" alt="" style="width: 100%; height: auto;" />
            </div>
        </div>
    </div>
</div>

CSS

ul.thumbnail-gallery{      
    padding:0;
    margin:0;
}

ul.thumbnail-gallery li{
    list-style:none;
    margin-bottom:25px;  
}

ul.thumbnail-gallery li img{
    cursor: pointer;
}

.controls{          
    width:50px;
    display:block;
    font-size:11px;
    padding-top:8px;
    font-weight:bold;          
}
.next {
    float:right;
    text-align:right;
}

.item{
    background-size: cover;
    background-position: center;    
    width: 400px;
    height: 400px;
}

JavaScript

$('ul.thumbnail-gallery li').click(function () {
        var src = $(this).find('img').data('large');
        var img = '<div class="item" style="background-image: url(' + src + ');"></div>'

        // index of the li element
        var index = $(this).index();

        var html = '';
        html += img;
        html += '<div style="height:25px;clear:both;display:block;">';
        html += '<a class="controls next" href="' + (index + 2) + '">Next &raquo;</a>';
        html += '<a class="controls previous" href="' + (index) + '">&laquo; Previous</a>';
        html += '</div>';

        var modal = '#' + $(this).find('img').data('modal');
        $(modal).modal();
        $(modal).on('shown.bs.modal', function () {
            $(modal + ' .modal-body').html(html);
        });
        $(modal).on('hidden.bs.modal', function () {
            $(modal + ' .modal-body').html('');
        });
    });

$(document).on('click', 'a.controls', function () {
    var index = $(this).attr('href');
    var src = $('ul.thumbnail-gallery li:nth-child(' + index + ')').find('img').data('large');
    $('.modal-body div.item').css('background-image', 'url(' + src + ')');

    var newPrevIndex = parseInt(index) - 1;
    var newNextIndex = parseInt(index) + 2;

    if ($(this).hasClass('previous')) {
        $(this).attr('href', newPrevIndex);
        $('a.next').attr('href', newNextIndex);
    } else {
        $(this).attr('href', newNextIndex);
        $('a.previous').attr('href', newNextIndex);
    }

    var total = $('ul.thumbnail-gallery li').length + 1;
    //hide next button
    if (total === newNextIndex) {
        $('a.next').hide();
    } else {
        $('a.next').show();
    }

    //hide previous button
    if (newPrevIndex === 0) {
        $('a.previous').hide();
    } else {
        $('a.previous').show();
    }

    return false;
});