I have a problem with my portfolio. I want to make a gallery that, when touching the img
, opens a iframe
where you can see the project I made. The issue is that each image should open a different iframe. I'm using a code that only allows me to open the first iframe, and I don't know how to open the others, since when I click on the others, they don't open.
The code I am using is the following:
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>
With this JS, I can get only the first iframe to open, but I don't know how to copy the code or adapt it to open all iframes. I also leave the url to see a demo of my site and so that you understand my problem: demo portfolio
You can use the goodies of Bootstrap and Jquery to open the modal. Also you should only have 1 modal for all possible projects.
The changes you will need to make to the HTML is. Add a data-url attribute to each of the images to know what to
url
load intoiframe
it when it isclick
. Add additiondata-toggle="modal" data-target="#miModal"
to open the respective modalImages
Modal
js
update
Reviewing your template, it would be necessary to add the reference to bootstrap JS so that the opening of the modal works, remove the attributes
data-toggle="modal" data-target="#miModal" data-url=""
of the imageimg
and add them to the parent with the classportafolio-box
in this way.The JS would work like this at the top of my answer.