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!