title: Bootstrap carousel and modal popup
body: <p>I'm trying to build a Bootstrap carousel and when clicking a button the main image should show in a Bootstrap modal. </p>
  
  <p>I've read <a href="http://www.bootply.com/61231" rel="nofollow">this answer</a> but that's not exactly what I'm looking for. This answer creates a modal for every image. I want to use just one modal and the change the image inside that modal depending on the image you click.</p>
  
  <p>I can't get this to work!</p>
  
  <p><strong>As per request a <a href="http://jsfiddle.net/qtppstLm/" rel="nofollow">fiddle</a></strong></p>
  
  <p>What I have is this:</p>
  
  <p>// Carousel</p>
  
  <pre><code> &lt;div id="slider" class="col-md-12 productimage"&gt;
    &lt;div id="myCarousel" class="carousel slide"&gt;
      &lt;!-- Carousel items --&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div data-slide-number="0" class="item active"&gt;
          &lt;img class="img-responsive" src="url-to-image"&gt;&lt;/div&gt;
        &lt;div data-slide-number="1" class="item"&gt;
          &lt;img class="img-responsive" src="url-to-image"&gt;&lt;/div&gt;       
       &lt;/div&gt;                     
    &lt;/div&gt;
  
    &lt;div class="bottom"&gt;
     &lt;a data-slide="prev" role="button" href="#myCarousel" class="left carousel-control"&gt;                                 
     &lt;/a&gt;
     &lt;div id="zooming"&gt;
      &lt;a data-target="#myModal" data-toggle="modal"&gt;full size&lt;/a&gt;
     &lt;/div&gt;
      &lt;a data-slide="next" role="button" href="#myCarousel" class="right carousel-control"&gt;                                     
      &lt;/a&gt;    
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="slider-thumbs" class="row hidden-xs"&gt;
      &lt;!-- Bottom switcher of slider --&gt;
      &lt;ul class="hide-bullets"&gt;
        &lt;li class="col-sm-6"&gt;
          &lt;a id="carousel-selector-0" class="thumbnail"&gt;
          &lt;img src="url-to-image"&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="col-sm-6"&gt;
          &lt;a id="carousel-selector-1" class="thumbnail"&gt;
          &lt;img src="url-to-image"&gt;&lt;/a&gt;
        &lt;/li&gt;    
      &lt;/ul&gt;                 
    &lt;/div&gt;
  </code></pre>
  
  <p>// Modal</p>
  
  <pre><code>&lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;!-- Change image source for large popup--&gt;
          &lt;img src="..." class="img-responsive" alt="Responsive image"&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>// JQUERY</p>
  
  <pre><code>  $(document).ready(function($) {      
      $('#myCarousel').carousel({
        interval: 5000
      });
      $('.carousel-control.left').click(function() {
        $('#myCarousel').carousel('prev');
      });
  
      $('.carousel-control.right').click(function() {
        $('#myCarousel').carousel('next');
      });
      $('#carousel-text').html($('#slide-content-0').html());
  
      //Handles the carousel thumbnails
      $('[id^=carousel-selector-]').click( function(){
        var id = this.id.substr(this.id.lastIndexOf("-") + 1);
        var id = parseInt(id);
        $('#myCarousel').carousel(id);
      });
  
    });
  </code></pre>
  
  <p>At what point or where do I grab the url of the image to show in the modal? How do you do that? Is it easier to work with data attributes and then with js grab that attribute? </p>
  
  <p>There should be an easier faster way to do that, right?!</p>