Skip to main content
se eliminaron 6 caracteres en el cuerpo
Origen Enlace
Dev. Joel
  • 23.9k
  • 3
  • 30
  • 47

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">&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.

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 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">&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'));
 });

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.

Origen Enlace
Dev. Joel
  • 23.9k
  • 3
  • 30
  • 47

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 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">&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'));
 });