Bootstrap gallery thumbnail with carousel bo

by

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