Puede utilizar las bondades de Bootstrap y Jquery para abrir la modal. Además solo deberá tener 1 modal para todos los proyectos posibles.
Los cambios que deberá hacer en el HTML es. Añadir un atributo data-url paraa cada una de las imágenes para saber que url
cargar en el iframe
cuando se de click
. Además añadir data-toggle="modal" data-target="#miModal"
para abrir la modal respectiva
Imágenes
<img id="myImg"
data-toggle="modal" data-target="#miModal"
data-url="http://kickads.mobi/test/nike/jordan/"
src="http://kickads.mobi/richmediagallery/img/portfolio/nike_jordan.jpg" alt="" />
<img id="myImg"
data-toggle="modal" data-target="#miModal"
data-url="http://kickads.mobi/test/sony/markronson/"
src="http://kickads.mobi/richmediagallery/img/portfolio/spotify.jpg" alt="" />
<img id="myImg2"
data-toggle="modal" data-target="#miModal"
data-url="http://kickads.mobi/test/fox/pistas/it/"
src="http://kickads.mobi/richmediagallery/img/portfolio/expreso_oriente.jpg" alt="" />
Modal
<div class="modal" tabindex="-1" role="dialog" id="miModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe src="" frameborder="0" style="width:100%;"></iframe>
</div>
</div>
</div>
Js
$('img[data-target="#miModal"]').click(function(){
// modificamos el src del iframe con el atributo data-url de la imagen clickeada
$('#miModal').find('iframe').attr('src',$(this).data('url'));
});
Update
Revisando su template, haría falta añadir la referencia a bootstrap JS para que funcione la apertura de la modal, eliminar los atributos data-toggle="modal" data-target="#miModal" data-url=""
de la imagen img
y añadirlos al padre con la clase portafolio-box
de esta forma.
<div class="portfolio-box" data-toggle="modal" data-target="#miModal" data-url="....">
El JS funcionaría como esta en la parte superior de mi respuesta.