title: Bootstrap Modal. include image dynamically with Jquery
body: <p>I want to open a <code>Modal</code> that shows the image the user clicks on. So, I have many images with the class <code>.image</code></p>
  
  <pre><code>&lt;a href="#"&gt;
      &lt;img data-toggle="modal" data-target="#modal_image" src="..." class="image thumbnail img-responsive"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I have a <code>modal</code>:</p>
  
  <pre><code>&lt;div class="modal fade" id="modal_image" tabindex="-1" role="dialog" aria-labelledby="modal_imagen" aria-hidden="true"&gt;
      &lt;div class="modal-body"&gt;
          &lt;img class = "image_modal" src=""&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also following <code>JQuery</code> code that is supposed to define the modal's image:</p>
  
  <pre><code>$('.image').click(function(){
      var new_src = $(this).attr('src');
      $('#image_modal').attr('src', new_src);
  });
  </code></pre>
  
  <p>But it is not working. Hope it is not a dumb error, thanks a lot for your help.</p>