Navigation :

Gallery Example 3

<div class="container">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" 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-12">
                        <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-12">
                        <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-12">
                        <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-12">
                        <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>
    </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;
        }
        .shadow-wrapper {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12),
            0 2px 4px 0 rgba(0, 0, 0, 0.08);
        }
        .tab-content {
            margin-top: 50px;
            margin-bottom: 30px;
        }
        .nav-tabs .nav-item.show .nav-link,
        .nav-tabs .nav-link.active {
            border: none !important;
            color: #FFFFFF;
            cursor: default;
            background-color: #00C0FF;
            font-weight: 500;
            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-tabs .nav-link {
            font-weight: 500;
            text-transform: uppercase;
            color: darkslategray;
            border: none !important;
        }
        .nav-link:focus,
        .nav-link:hover {
            text-decoration: none;
            background-color: rgba(0, 0, 0, 0.08);
        }
        .nav-tabs {
            border-bottom: none !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(); });