Navigation :

Gallery Example 2

<!-- Nav tabs -->
<ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="row image-box-css">
                        <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=254" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=255" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=256" class="img-fluid">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="row image-box-css">
                        <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery2" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="row image-box-css">
                        <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery3" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery3" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery3" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="row image-box-css">
                        <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery4" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
                        </a>
                        <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery4" class="col-sm-4">
                            <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

            body a,
            body .btn {
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            font-family: 'Montserrat', sans-serif;
        }
        .nav-tabs>li>a {
            margin-right: 2px;
            line-height: 1.42857143;
            border-radius: 4px 4px 0 0;
            text-transform: uppercase;
            color: #5b9ee6 !important;
            font-weight: inherit !important;
        }
        .nav-tabs>li>a:hover {
            border-color: #eee #eee #ddd
        }
        .shadow-wrapper {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12),
            0 2px 4px 0 rgba(0, 0, 0, 0.08);
        }
        .nav-tabs>li.active>a,
        .nav-tabs>li.active>a:focus,
        .nav-tabs>li.active>a:hover {
            color: #FFFFFF;
            cursor: default;
            background-color: #00C0FF !important;
            font-weight: 500;
            border: 1px solid #016da8 !important;
            border-radius: 20px;
            text-transform: uppercase;
            -webkit-box-shadow: 1px 1px 1px 0px rgba(233, 233, 233, 1.00);
            box-shadow: 1px 1px 1px 0px rgba(233, 233, 233, 1.00);
        }
        .nav>li>a:hover,
        .nav>li>a:focus {
            text-decoration: none;
            border: 1px solid #016da8 !important;
            border-radius: 20px;
        }
        .tab-content {
            margin-top: 40px;
            margin-bottom: 30px;
        }
        .nav-tabs {
            border-bottom: none !important;
        }
        .nav-tabs .nav-link.active {
            border: 1px solid #016da8 !important;
            border-radius: 20px;
        }
        .tab-pane>.row {

            margin-left: 0px !important;
            margin-right: 0px !important;
        }
        .image-box-css>a>img {
            margin-bottom: 20px;
            padding-top: 7px;
            padding-bottom: 7px;
            padding-left: 7px;
            padding-right: 7px;
            margin-bottom: 20px;
            -webkit-box-shadow: 0px 5px 7px -2px rgba(0, 0, 0, 0.4);
            box-shadow: 0px 5px 7px -2px rgba(0, 0, 0, 0.4);
            margin-top: 5px;
            background-color: rgba(255, 255, 255, 1.00);
            color: rgba(0, 0, 0, 1.00);
        }

$(document).on(‘click’, ‘[data-toggle=“lightbox”]‘, function (event) { event.preventDefault(); $(this).ekkoLightbox(); });