How to Open each specific item in Bootstrap's Carousel?

Question

I've got a jQuery vertical timeline on this page and I'm trying to open each specific image on the timeline it's own modal when each image is clicked. The modal popup works as do the prev next buttons, but no matter which image you click on it always opens the first image. I need to add different information on each modal, dates, names, etc., so I'd like the info related to each image to match on each modal that pops up.

I've read through this post #210936 but no luck. I know my code is similar and I'm close, but I can't see what I'm missing. Any help is much appreciated. Thanks!

HTML modal trigger:

<!-- 1900's Time Period Start -->
   <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-movie">
        <span class="title"><strong>1900's</strong></span>
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content left">
        <h2>First Surfing Recorded</h2>
        <div class="flex-item1">
          <!-- Image to Trigger Modal -->
          <a href="#myModal" class="modalImg image-border image-border" data-toggle="modal">
            <img src="images/boards_v2.png"></a>
        </div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <a href="#myModal" class="cd-read-more" data-toggle="modal">Read more</a>
        <span class="cd-date right" id="1900's">Jan 18</span>
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

HTML for Modals:

<!-- Modal Code Start -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" data-interval="false">
<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
  </div>

  <div class="modal-body">
    <!-- Indicators -->
    <div class="carousel slide" data-interval="false" id="MyCarousel">

      <!-- Wrapper for slides -->
      <div class="carousel-inner timeline">

        <!-- 1st Modal in Timeline -->
        <div class="item active" id="modal1">

          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <h1>First Surfing Recorded</h1>
            <div class="col-1">
              <img src="images/boards.png" id="img1" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>

        <!-- 2nd Modal in Timeline -->
        <div class="item" id="modal2">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <div class="col-1">
              <h1>Service Infrastructure</h1>
              <img src="images/taihitian_surfers_joseph_banks_lg.jpg" id="img2" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>

        <!-- 3rd Modal in Timeline -->
        <div class="item">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <div class="col-1">
              <h1>Tom Blake and Sam Reid surf Malibu for the first time</h1>
              <img src="images/rawImage_pcr_fred_windisch.jpg" id="img2" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a href="#MyCarousel" class="left carousel-control timeline" data-slide="prev"><span class="glyphicon left"></span></a>
      <a href="#MyCarousel" class="right carousel-control timeline" data-slide="next"><span class="glyphicon right"></a>

      </div>

    </div>
  </div>
</div>

Javascript for modal:

// Timeline Modal
$(function() {
  $('.cd-timeline').on('click', '.flex-item1', function() {
    $('#myModal').modal('show');
    $('#MyCarousel').carousel($(this).index()); 
  });   
});

Answer 1

You only have one modal, called #myModal. All your links point to that one modal. So, really, there's no reason why it wouldn't open that modal for every one of them.

You need to create several instances of the modal HTML, give each one a unique ID, and then point your HREFs to those. One example of what would be many:

<a href="#waimea" class="cd-read-more" data-toggle="modal">Waimea Surfed for First Time</a>

<div class="modal fade" id="waimea"><!-- contents of waimea modal --></div>

I guess then your jQuery would look something like this:

// Timeline Modal
$(function() {
  $('.cd-timeline').on('click', '.flex-item1', function() {
    $($(this).attr('href')).modal('show');
  });   
});

Not sure about the carousel, as there's not enough to go off with your code as it stands, but the concept should be similar!

Answer 2

I sorted this out. I removed the href and added data-slide="0" in sequence for each modal trigger then modified the javascript call to the updated code below. See working example at link above.

HTML modal trigger:

<!-- 1900's Time Period Start -->
   <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-movie">
        <span class="title"><strong>1900's</strong></span>
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content left">
        <h2>First Surfing Recorded</h2>
        <div class="flex-item1" data-slide="0">
          <!-- Image to Trigger Modal -->
          <img src="images/boards_v2.png">
        </div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <span class="cd-read-more" data-slide="0">Read more</span>
        <span class="cd-date right" id="1900's">Jan 18</span>
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

HTML for Modals:

<!-- Modal Code Start -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" data-interval="false">
<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
  </div>

  <div class="modal-body">
    <!-- Indicators -->
    <div class="carousel slide" data-interval="false" id="MyCarousel">

      <!-- Wrapper for slides -->
      <div class="carousel-inner timeline">

        <!-- 1st Modal in Timeline -->
        <div class="item active" id="modal1">

          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <h1>First Surfing Recorded</h1>
            <div class="col-1">
              <img src="images/boards.png" id="img1" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>

        <!-- 2nd Modal in Timeline -->
        <div class="item" id="modal2">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <div class="col-1">
              <h1>Service Infrastructure</h1>
              <img src="images/taihitian_surfers_joseph_banks_lg.jpg" id="img2" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>

        <!-- 3rd Modal in Timeline -->
        <div class="item">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <div class="col-1">
              <h1>Tom Blake and Sam Reid surf Malibu for the first time</h1>
              <img src="images/rawImage_pcr_fred_windisch.jpg" id="img2" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a href="#MyCarousel" class="left carousel-control timeline" data-slide="prev"><span class="glyphicon left"></span></a>
      <a href="#MyCarousel" class="right carousel-control timeline" data-slide="next"><span class="glyphicon right"></a>

      </div>

    </div>
  </div>
</div>

Javascript for modal:

// Timeline Modal
$(function() {
  $('.flex-item1, .cd-read-more').on('click', function(event) {
    //Gets the Item that was clicked
    var $this = $(event.currentTarget);
    $('#myModal').modal('show');
    //Use the slide number of the clicked Item to open the slide on the carousel
    $('#MyCarousel').carousel($this.data('slide'));
  });
});