2

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">&times;</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

1 respuesta 1

4

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 a 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="" />

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">&times;</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.

6
  • Genial, creo que entendí todo! En cuanto al JS que pasaste, lo debo poner una sola vez y eso se aplicará a todos los iframes? O debo copiarlo y pegarlo por cada iframe? Commented el 28 ene. 2019 a las 19:27
  • 1
    Solo debes tener un iframe dentro de un modal (solo requieres de un modal) , como está en el código de mi respuesta, el código Js es solo eso, se coloca una sola vez y debería funcionar.
    – Dev. Joel
    Commented el 28 ene. 2019 a las 19:37
  • Genial, voy a modificar el código y ver cómo funciona! Gracias! Commented el 28 ene. 2019 a las 19:38
  • El modal en dónde debo agregarlo? Commented el 28 ene. 2019 a las 19:48
  • 1
    En cualquier lugar de su documento HTML, (pero de preferencia al final) eso sí, solo es uno ;)
    – Dev. Joel
    Commented el 28 ene. 2019 a las 19:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.