Mostrar una imagen diferente en ventana modal

[The_uncle]

Hola chicos.

Estoy haciendo un proyecto de un portfolio y he tropezado con algo que no puedo solucionar (ya os aviso que no soy ningún experto en javascript).

Muestro una cuadricula de imagenes con una descripcion que aparece al hacer hover y quiero que cuando haga click, se me abra una ventana modal con otra imagen diferente a la de la cuadricula.

Este esel codigo para la rejilla de imagenes:

Código:

<div class="portfolio">
        <ul>
            <li class="col-lg-3 col-md-2 col-sm-3 col-xs-4">
                <div id="caption" class="mini">
                    <span class="caption fade-caption">  
                        <h3>Fade Caption</h3>  
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, aspernatur.</p>
                        <img id="info" class="sr-only" src="img/portfolio/Inlay/Ballantines.png" alt=""> 
                    </span>
                    <img class="thumb" src="img/portfolio/Booklet/Ballantines.png" alt="">
                </div>
            </li>

            <li class="col-lg-3 col-md-2 col-sm-3 col-xs-4">
                <div id="caption" class="mini">
                    <span class="caption fade-caption">  
                        <h3>Fade Caption</h3>  
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, aspernatur.</p>
                        <img id="info" class="sr-only" src="img/portfolio/Inlay/Bocatta_CocaCola.png" alt="">  
                    </span>
                    <img class="thumb" src="img/portfolio/Booklet/Bocatta_CocaCola.png" alt="">
                </div>
            </li>

                        
        </ul>
    </div>

Este el de la ventana modal.

Código:

   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">                
                </div>
            </div>
        </div>
    </div>

Y este el javascript para abrirla.

Código:

   $(document).ready(function(){
   $('li #caption').on('click',function(){
        var src = $('#info').attr('src');
        var img = '<img src="' + src + '" class="img-responsive"/>';
        $('#myModal').modal();
        $('#myModal').on('shown.bs.modal', function(){
            $('#myModal .modal-body').html(img);
        });
        $('#myModal').on('hidden.bs.modal', function(){
            $('#myModal .modal-body').html('');
        });
   });  
})

El problema es que cuando hago click en cualquier imagen de la rejilla se ve siempre la imagen "Ballantines.png".

Que he de hacer para que se vea la imagen asociada a cada rejilla?

Gracias de antebrazo!

[GeekGirl]

Tenés muchos ids repetidos y eso está generando problemas en tu código, ya que siempre levanta el src del mismo elemento. Te recomiendo que lo soluciones usando clases en vez de ids, ya que las mismas pueden repetirse.

Mientras tanto, podés salir del apuro haciendo algo así:

Código Javascript:

$(document).ready(function(){
  $('li #caption').on('click',function(){
      var src = $(this).find('#info').attr('src');
      var img = '<img src="' + src + '" class="img-responsive"/>';
 
      console.log(src);
      $('#myModal').modal();
      $('#myModal').on('shown.bs.modal', function(){
          $('#myModal .modal-body').html(img);
      });
      $('#myModal').on('hidden.bs.modal', function(){
          $('#myModal .modal-body').html('');
      });
  });  
});
 

Saludos

[The_uncle]

Muchas gracias por tu respuesta @GeekGirl.

He estado trasteando con PrettyPhoto y hace todo lo que necesito pero pondré en práctica tu código ya que seguro que me aclara algunas cosas :)