Tengo un problema con mi portfolio. Quiero hacer una galería que, al tocar en la img
, se abra un iframe
en donde se vea el proyecto que hice. El tema es que cada imagen debería abrir un iframe distinto. Estoy usando un código que solo me permite abrir el primer iframe, y no sé cómo hacer para poder abrir los otros, ya que al clickear en los otros, no se abren.
El código que estoy usando es el siguiente:
HTML5:
<div id="ad1" class="portfolio-item deporte col-md-3">
<div class="portfolio-box">
<div class="portfolio-image-wrap">
<img id="myImg" src="img/portfolio/img1.jpg" alt="" />
</div>
<div class="portfolio-caption-mask" id="myDiv">
<div class="portfolio-caption-text">
<div class="portfolio-caption-tb-cell">
<h5 class="alt-title">Texto</h5>
<p>Nombre del proyecto</p>
</div>
</div>
</div>
</div>
</div>
<div id="MyModal" class="modal">
<span class="close">×</span>
<div class="contenido">
<iframe style="height: 480px; width: 320px" src="http://url.com/test/proyecto1/" frameborder="0"></iframe>
</div>
</div>
JS:
<script>
// Get the modal
var modal = document.getElementById('MyModal');
// Get the button that opens the modal
var div = document.getElementById("myDiv");
// Get the button that opens the modal
var img = document.getElementById("myImg");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
div.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on the button, open the modal
img.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
var freezeVp = function(e) {
e.preventDefault();
};
</script>
Con este JS, puedo hacer que se abra únicamente el primer iframe, pero no sabría cómo hacer para copiar el código o adaptarlo para que abra todos los iframes. Dejo también la url para ver una demo de mi sitio y para que entiendan mi problema: demo portfolio