Troubleshooting problem with nested image carousel in Bootstrap modal

Question

Troubleshooting problem with nested image carousel in Bootstrap modal

I am working on implementing a modal for displaying an image gallery. The initial modal showcases thumbnails, and upon clicking a thumbnail, a secondary modal should open on top with larger images displayed in a carousel. The issue I'm facing is that when I click on a thumbnail, the second modal appears but shows both thumbnails instead of the corresponding large image.

Although the code seems correct upon inspection, there seems to be a glitch preventing it from functioning as intended.

Below is the HTML structure:

<!-- kitchens modal -->
<div class="modal kitchens-modal fade" id="kitchens-modal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- modal header -->
              .....

The relevant CSS styles are:

.thumbnail {
    height: 100px;
    margin: 6px;
}

.thumbnail {
    margin-bottom: 6px;
}


.carousel-control.left,
.carousel-control.right {
    background-image: none;
    margin-top: 10%;
    width: 5%;
}

Finally, here is the associated JS code:

$('.row .thumbnail').on('load', function() {

}).each(function(i) {
  if(this.complete) {
        var item = $('<div class="item"></div>');
        var itemDiv = $(this).parents('div');
          .....

Despite having made modifications based on an online modal gallery, the functionality remains flawed. Upon clicking a thumbnail in the first modal, the second modal fails to display the corresponding large image and instead exhibits all thumbnails. Any suggestions or insights would be greatly appreciated!

html css twitter-bootstrap modal-dialog bootstrap-modal

Answer 1

Answer №1

Here is a possible solution:

$('.kitchens-modal .thumbnail').each(function(i) {
  var item = $('<div class="item"></div>');
  var itemDiv = $(this).parents('div');
  var title = $(this).parent('a').attr("title");

  item.attr("title", title);
  $(itemDiv.html()).appendTo(item);
  item.appendTo('.carousel-inner'); 
  if (i === 0) { // set first item as active
      item.addClass('active');
  }
});

/* activate the carousel */
$('#modalCarousel').carousel({interval: false});

/* update modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
    $('.modal-title').html($(this).find('.active').attr("title"));
});

/* when a thumbnail is clicked */
$('.row .thumbnail').click(function(){
    var idx = $(this).parents('div').index();
    var id = parseInt(idx);
    $('#myModal').modal('show'); // show the modal
    $('#modalCarousel').carousel(id); // move carousel to selected item
});

.thumbnail {
    height: 100px;
    margin: 6px;
}

.thumbnail {
    margin-bottom: 6px;
}


.carousel-control.left {
    background-image: none;
    position: absolute;
    top: 50%;
    left: 0;
    width: 25px;
    height: 100%;
    transform: translateY(-50%);
}

.carousel-control.right {
    background-image: none;
    position: absolute;
    top: 50%;
    right: 0;
    width: 25px;
    height: 100%;
    transform: translateY(-50%);
}

.item .thumbnail {
  margin: 0 auto;
}

body {
  margin: 20px !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn btn-primary" data-target="#kitchens-modal" data-toggle="modal">Open Kitchen Modal</div>

<!-- kitchens modal -->
<div class="modal kitchens-modal fade" id="kitchens-modal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- modal header -->
            <div class="modal-header">
                <h1>KITCHENS</h1>
                <h3>Your dream kitchen is so close...</h3>
            </div>
            <!-- end of modal header -->

            <!-- modal body -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-2 col-sm-3 col-xs-6">
                        <a href="#">
                            <img class="thumbnail img-responsive" src="http://placehold.it/200x200" alt="Kitchen" title="Kitchen">
                        </a>
                    </div>
                    <div class="col-lg-2 col-sm-3 col-xs-6">
                        <a href="#">
                            <img class="thumbnail img-responsive" src="http://placehold.it/300x300" alt="Kitchen two" title="Kitchen two">
                        </a>
                    </div>
                </div>
            </div>
            <!-- end of modal body -->

            <!-- modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
            <!--end of modal footer -->
        </div>
    </div>
</div>
<!-- end of kitchens modal -->

<!-- inner kitchen gallery modal -->
<div class="modal" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title"></h3>
            </div>

            <div class="modal-body">
                <div id="modalCarousel" class="carousel">
                    <div class="carousel-inner">

                    </div>

                    <a class="carousel-control left" href="#modalCarousel" data-slide="prev">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                    </a>
                    <a class="carousel-control right" href="#modalCarousel" data-slide="next">
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end of inner kitchen gallery modal -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

I hope this information proves useful!

Answer 2

Here is a possible solution:

$('.kitchens-modal .thumbnail').each(function(i) {
  var item = $('<div class="item"></div>');
  var itemDiv = $(this).parents('div');
  var title = $(this).parent('a').attr("title");

  item.attr("title", title);
  $(itemDiv.html()).appendTo(item);
  item.appendTo('.carousel-inner'); 
  if (i === 0) { // set first item as active
      item.addClass('active');
  }
});

/* activate the carousel */
$('#modalCarousel').carousel({interval: false});

/* update modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
    $('.modal-title').html($(this).find('.active').attr("title"));
});

/* when a thumbnail is clicked */
$('.row .thumbnail').click(function(){
    var idx = $(this).parents('div').index();
    var id = parseInt(idx);
    $('#myModal').modal('show'); // show the modal
    $('#modalCarousel').carousel(id); // move carousel to selected item
});

.thumbnail {
    height: 100px;
    margin: 6px;
}

.thumbnail {
    margin-bottom: 6px;
}


.carousel-control.left {
    background-image: none;
    position: absolute;
    top: 50%;
    left: 0;
    width: 25px;
    height: 100%;
    transform: translateY(-50%);
}

.carousel-control.right {
    background-image: none;
    position: absolute;
    top: 50%;
    right: 0;
    width: 25px;
    height: 100%;
    transform: translateY(-50%);
}

.item .thumbnail {
  margin: 0 auto;
}

body {
  margin: 20px !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn btn-primary" data-target="#kitchens-modal" data-toggle="modal">Open Kitchen Modal</div>

<!-- kitchens modal -->
<div class="modal kitchens-modal fade" id="kitchens-modal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- modal header -->
            <div class="modal-header">
                <h1>KITCHENS</h1>
                <h3>Your dream kitchen is so close...</h3>
            </div>
            <!-- end of modal header -->

            <!-- modal body -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-2 col-sm-3 col-xs-6">
                        <a href="#">
                            <img class="thumbnail img-responsive" src="http://placehold.it/200x200" alt="Kitchen" title="Kitchen">
                        </a>
                    </div>
                    <div class="col-lg-2 col-sm-3 col-xs-6">
                        <a href="#">
                            <img class="thumbnail img-responsive" src="http://placehold.it/300x300" alt="Kitchen two" title="Kitchen two">
                        </a>
                    </div>
                </div>
            </div>
            <!-- end of modal body -->

            <!-- modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
            <!--end of modal footer -->
        </div>
    </div>
</div>
<!-- end of kitchens modal -->

<!-- inner kitchen gallery modal -->
<div class="modal" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title"></h3>
            </div>

            <div class="modal-body">
                <div id="modalCarousel" class="carousel">
                    <div class="carousel-inner">

                    </div>

                    <a class="carousel-control left" href="#modalCarousel" data-slide="prev">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                    </a>
                    <a class="carousel-control right" href="#modalCarousel" data-slide="next">
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end of inner kitchen gallery modal -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

I hope this information proves useful!

Troubleshooting problem with nested image carousel in Bootstrap modal

Answer №1

Similar questions

Separating a picture into distinct sections

How to position a full-width banner image in the center using CSS without causing scrollbars

unable to apply custom css to primefaces components

Angular validation with input binding using if statement

Tips for arranging menu items along a curved counter

Centering text using CSS Bootstrap

Is there a way to display a loader when an item is selected from a dropdown menu? For example, while data is being fetched from the backend, can we

Tips on centering elements vertically using Zurb Foundation

Refining Flask-Generated Table Content with jQuery Filters

The for loop does not cycle through every element

Guide on adjusting padding for jQuery Flot graph for improved styling

Execute script when on a specific webpage AND navigating away from another specific webpage

Is there a way to retrieve the Location header of a 302 redirection URL using PHP?

Using JavaScript to create temporary drawings on a webpage that automatically erase themselves

Create a sorting feature for a ListView that allows users to organize items by price in both ascending and descending order, as

Axis incorporating additional padding for extensive domains

vertical-align applied to table cells creating a floating effect

The height of the iframe with the id 'iframe' is not functioning as expected

Tips for using various versions of jQuery at the same time

Dynamic drop-down navigation with rearranging menu