Bootstrap gallery thumbnail with carousel bo

I want add following effect – got 4 thumbnails, single thumbnail = different album: enter image description here

After click on single should be indicated carousel:
enter image description here

I don’t have idea how can I put together thumbnail and carousel.
What can I use to automatic add pages with gallery albums, and management them on Bootstrap 3?

<section id="gallery">
<div class="container bg-5 text-center">
    <div class="row">
        <h2>Gallery</h2>
            <center>
            <div class="col-md-3">
                <a href="#">
                    <img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
                </a>
                39
            </div>
            <div class="col-md-3">
                <a href="#">
                    <img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
                </a>
                38
            </div>
            <div class="col-md-3">
                <a href="#">
                    <img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
                </a>
                37
            </div>
            <div class="col-md-3">
                <a href="#">
                    <img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
                </a>
                36
            </div>
            </center>
    </div>

    <div class="row">
        <div class="col-md-12">
            <ul class="pagination">
                <li>
                    <a href="#">&laquo;</a>
                </li>
                <li class="active">
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>
                <li>
                    <a href="#">...</a>
                </li>
                <li>
                    <a href="#">&raquo;</a>
                </li>
            </ul>
        </div>
    </div> 
</div>

Carousel

6 thoughts on “Bootstrap gallery thumbnail with carousel bo”

  1. In this, carousel thumbnails, appear twice, on top and at the bottom of the carousel slides. I can’t figure out why!! 🙂

    <html>
    <head>
        <title>Stackoverflow Trials</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <script src="js/jquery-2.1.4.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    
         <link rel="stylesheet" href="css/bootstrap.css" media="screen">
    
         <style>
    
             h4 {
                margin: 20px 10px 10px;
            }
            p {
                margin: 10px;
            }
    
            #carousel-example-generic {
                margin: 20px auto;
                width: 400px;
            }
    
    
            #carousel-example-generic .carousel-indicators {
                margin: 10px 0 0;
                overflow: auto;
                position: static;
                text-align: left;
                white-space: nowrap;
                width: 100%;
            }
            #carousel-example-generic .carousel-indicators li {
                background-color: transparent;
                -webkit-border-radius: 0;
                border-radius: 0;
                display: inline-block;
                height: auto;
                margin: 0 !important;
                width: auto;
            }
            #carousel-example-generic .carousel-indicators li img {
                display: block;
                opacity: 0.5;
            }
            #carousel-example-generic .carousel-indicators li.active img {
                opacity: 1;
            }
            #carousel-example-generic .carousel-indicators li:hover img {
                opacity: 0.75;
            }
            #carousel-example-generic .carousel-outer {
                position: relative;
            }
         </style>
    
    </head>
    <body>
            <section id="gallery">
            <div class="container bg-5 text-center">
                <div class="row">
                    <h2>Gallery</h2>
                        <center>
                        <div class="col-md-3">
                            <a href="#">
                                <img class="img-responsive img-rounded thumbnail" id="thumb1" src="http://placehold.it/350x250" alt="">
                            </a>
                            39
                        </div>
                        <div class="col-md-3">
                            <a href="#">
                                <img class="img-responsive img-rounded thumbnail" id="thumb2" src="http://placehold.it/350x250" alt="">
                            </a>
                            38
                        </div>
                        <div class="col-md-3">
                            <a href="#">
                                <img class="img-responsive img-rounded thumbnail" id="thumb3" src="http://placehold.it/350x250" alt="">
                            </a>
                            37
                        </div>
                        <div class="col-md-3">
                            <a href="#">
                                <img class="img-responsive img-rounded thumbnail" id="thumb4" src="http://placehold.it/350x250" alt="">
                            </a>
                            36
                        </div>
                        </center>
                </div>
    
                <div class="row">
                    <div class="col-md-12">
                        <ul class="pagination">
                            <li>
                                <a href="#">&laquo;</a>
                            </li>
                            <li class="active">
                                <a href="#">1</a>
                            </li>
                            <li>
                                <a href="#">2</a>
                            </li>
                            <li>
                                <a href="#">3</a>
                            </li>
                            <li>
                                <a href="#">...</a>
                            </li>
                            <li>
                                <a href="#">&raquo;</a>
                            </li>
                        </ul>
                    </div>
                </div> 
            </div>
            </section>
    
    
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <div class='carousel-outer'>
                    <!-- Wrapper for slides -->
              <!-- Indicators -->
              <ol class="carousel-indicators"></ol>
              <!-- Wrapper for slides -->
              <div class="carousel-inner"></div>
              <!-- Controls -->
              <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
              </a>
    
                </div> 
                  <ol class='carousel-indicators'>
    
                </ol>
    
            </div>
    
    
            <script>
    
    
                $(document).ready(function() {
                    // create arrays of images to be displayed in each carousel for each thumbnails.
                    // the array name is exactly the same as thumbnail id
                    var thumb1 = new Array("book2.jpg","book3.jpg","book4.jpg","book5.jpg");
                    var thumb2 = new Array("book3.jpg","book4.jpg","book5.jpg","book2.jpg");
                    var thumb3 = new Array("book4.jpg","book5.jpg","book2.jpg","book3.jpg");
                    var thumb4 = new Array("book5.jpg","book4.jpg","book3.jpg","book2.jpg");
    
                    var $carousel = $('#carousel-example-generic .carousel-inner');
                    var $carouselInd =  $('#carousel-example-generic .carousel-indicators');
    
                    $( ".thumbnail" ).click(function() {
    
                        var numberOfSlides = $('.item').length;
    
                        if(numberOfSlides >0) {
                            // remove all items from the carousel before adding the new ones to it.
                            $carousel.empty(); 
                            //$carouselInd.empty();
    
                        }
    
                        var m = this.id;
                        m = eval(m);
    
                        //alert(m.length);
    
                        for(var i=0 ; i< m.length ; i++) {
                            var j= i+1;
                          $('<div class="item"><img src="images/'+m[i]+'"><div class="carousel-caption"></div>   </div>').appendTo('.carousel-inner');
                          $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"><img src="http://placehold.it/100x50&text=slide'+j+'" alt="" /></li>').appendTo('.carousel-indicators');
    
                        }
                        $('.item').first().addClass('active');
                        $('.carousel-indicators > li').first().addClass('active');
                        $('#carousel-example-generic').carousel();                      
    
                    });
    
                }); 
    
            </script>
    </body>
    

    Reply

Leave a Comment