3

Cómo puedo abrir mis imágenes en la misma página de una lista de elementos como un iframe? Este es mi código:

<article class="imagen1">
      <a href="#"><section class="imagen1_1" style="background:url(assets/images/marcas/diesel.jpg) no-repeat left center; background-size: 100%;"></section></a>
      <a href="#"><section class="imagen1_2" style="background:url(assets/images/marcas/diesel.jpg) no-repeat left center; background-size: 100%;"></section></a>
      <a href="#"><section class="imagen1_3" style="background:url(assets/images/marcas/diesel.jpg) no-repeat left center; background-size: 100%;"></section></a>
      <a href="#"><section class="imagen1_4" style="background:url(assets/images/marcas/diesel.jpg) no-repeat left center; background-size: 100%;"></section></a>
      <a href="#"><section class="imagen1_5" style="background:url(assets/images/marcas/diesel.jpg) no-repeat left center; background-size: 100%;"></section></a>
      <a href="#"><section class="imagen1_6" style="background:url(assets/images/marcas/diesel.jpg) no-repeat left center; background-size: 100%;"></section></a>
    </article>

Desearia que cada una de las imágenes se abrieran en la misma página para poner una descripción de las mismas, alguna sugerencia? debo hacer una página por cada imagen para incluir su texto?

5
  • ¿A qué te refieres con abrir las imágenes en la misma página en un iframe? Por los comentarios, parece que lo que quieres es abrir las imágenes en un modal y no en un iframe (que no es exactamente lo mismo)
    – Alvaro Montoro
    el 12 may. 2016 a las 16:26
  • ¿Tu crees? ¿podrias ilustrarme un poco? el 12 may. 2016 a las 16:40
  • Mencionas fancybox, ¿qué intentaste con ese plugin?¿cómo falló? Quizás podríamos usarlo de punto de partida
    – Alvaro Montoro
    el 12 may. 2016 a las 16:46
  • intente el modal y si me abre la imagen pero en otra pagina, desearia poder abrir la imagen en el misma pagina y tener opcion de cerrar el 12 may. 2016 a las 17:09
  • ¿Sólo con HTML+CSS o está bien usar JavaScript/jQuery también?
    – Alvaro Montoro
    el 12 may. 2016 a las 18:30

3 respuestas 3

1

Si quieres usar fancybox aquí te dejo un ejemplo funcionando de como cargarlo usando iframes. Ten en cuenta que estoy usando fancybox2

$(document).ready(function() {
  $(".fancybox").fancybox();
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" type="text/css" media="screen" />
<article class="imagen1">
  <section class="imagen1_1">
    <a class="fancybox.iframe fancybox" href="http://i.stack.imgur.com/ZSoEU.png">
       Imagen 1_1
    </a>
  </section>
  <section class="imagen1_2">
    <a class="fancybox.iframe fancybox" href="http://i.stack.imgur.com/ZSoEU.png">
       Imagen 1_2
    </a>
  </section>
  <section class="imagen1_3">
    <a class="fancybox.iframe fancybox" href="http://i.stack.imgur.com/ZSoEU.png">
       Imagen 1_3
    </a>
  </section>
  <section class="imagen1_4">
    <a class="fancybox.iframe fancybox" href="http://i.stack.imgur.com/ZSoEU.png">
       Imagen 1_4
    </a>
  </section>
  <section class="imagen1_5">
    <a class="fancybox.iframe fancybox" href="http://i.stack.imgur.com/ZSoEU.png">
       Imagen 1_5
    </a>
  </section>
  <section class="imagen1_6">
    <a class="fancybox.iframe fancybox" href="http://i.stack.imgur.com/ZSoEU.png">
       Imagen 1_6
    </a>
  </section>
</article>

Puedes especificar el tipo directamente usando una clase (fancybox.image, fancybox.iframe, etc) o el atributo data-fancybox-type

De la forma anterior no podrás controlar mucho la forma en la que se muestra el iframe ya que este es creado por fancybox por lo que puedes especificarlo también como "inline"

$(document).ready(function() {
  $(".fancybox").fancybox();
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" type="text/css" media="screen" />
<article class="imagen1">
  <section class="imagen1_1">
    <a class="fancybox" href="#imagen1_1">
       Imagen 1_1
    </a>
  </section>
  <section class="imagen1_2">
    <a class="fancybox" href="#imagen1_2">
       Imagen 1_2
    </a>
  </section>
  <section class="imagen1_3">
    <a class="fancybox" href="#imagen1_3">
       Imagen 1_3
    </a>
  </section>
  <section class="imagen1_4">
    <a class="fancybox" href="#imagen1_4">
       Imagen 1_4
    </a>
  </section>
  <section class="imagen1_5">
    <a class="fancybox" href="#imagen1_5">
       Imagen 1_5
    </a>
  </section>
  <section class="imagen1_6">
    <a class="fancybox" href="#imagen1_6">
       Imagen 1_6
    </a>
  </section>
</article>
<div style="display: none">
  <div id="imagen1_1">
    <iframe src="http://i.stack.imgur.com/ZSoEU.png"></iframe>
  </div>
  <div id="imagen1_2">
    <iframe src="http://i.stack.imgur.com/ZSoEU.png"></iframe>
  </div>
  <div id="imagen1_3">
    <iframe src="http://i.stack.imgur.com/ZSoEU.png"></iframe>
  </div>
  <div id="imagen1_4">
    <iframe src="http://i.stack.imgur.com/ZSoEU.png"></iframe>
  </div>
  <div id="imagen1_5">
    <iframe src="http://i.stack.imgur.com/ZSoEU.png"></iframe>
  </div>
  <div id="imagen1_6">
    <iframe src="http://i.stack.imgur.com/ZSoEU.png"></iframe>
  </div>
</div>

1

Por lo que leo en los comentarios de la pregunta y de otra respuesta, parece que lo que quieres es "que al clickear la imagen se abra en un iframe en la misma pagina y pueda yo cerrarla y seguir en la pagina". Eso parece más la definición de un modal o pop-up que la de un iframe (podrías usar iframe pero no es necesario); lo cual también tendría sentido viendo el código de que acompaña a la pregunta (parece una serie de thumbnails que al pulsar se ve la imagen en grande).

Te recomendaria que usases algún plug-in que ya exista como el propio FancyBox que dices que usaste, o algún modal de Bootstrap o jQuery UI. Pero te voy a dejar una solución sin ningún tipo de biblioteca o extensión.

La idea es la siguiente cuando pulses en el enlace:

  • Crea un div que será el modal e irá sobre todos los elementos (con z-index)
  • Asigna el fondo del modal la misma image del fondo de la sección del enlace pulsado.
  • Cuando se pulse en cualquier parte del modal, se cierra/borra

El código quedaría así:

var enlaces = document.querySelectorAll(".imagen1 a");

for (var x = 0; x < enlaces.length; x++) {
  enlaces[x].addEventListener("click", function() {
    var modal = document.createElement("div");
    modal.id = "modal";
    modal.style.backgroundImage = this.querySelector("section").style.backgroundImage;
    modal.onclick = function() { document.querySelector("body").removeChild(modal); }
    document.querySelector("body").appendChild(modal);
  }, false);
}
article > a > section {
  width:50px;
  height:50px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size:100%;
}

#modal {
  background-color:rgba(0,0,0,0.9);
  background-repeat: no-repeat;
  background-position: center center;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:999;
}
<article class="imagen1">
  <a href="#"><section class="imagen1_1" style="background-image:url(http://lorempixel.com/300/300/people)"></section></a>
  <a href="#"><section class="imagen1_2" style="background-image:url(http://lorempixel.com/300/300/animals)"></section></a>
  <a href="#"><section class="imagen1_3" style="background-image:url(http://lorempixel.com/300/300/sports)"></section></a>
  <a href="#"><section class="imagen1_4" style="background-image:url(http://lorempixel.com/300/300/cats)"></section></a>
  <a href="#"><section class="imagen1_5" style="background-image:url(http://lorempixel.com/300/300/nature)"></section></a>
  <a href="#"><section class="imagen1_6" style="background-image:url(http://lorempixel.com/300/300/abstract)"></section></a>
</article>

1
  • Muchisimas gracias a todos los que se tomaton la molestia, ya me funciona con el fancybox2! el 12 may. 2016 a las 19:18
0

Si deseas tener los iframes en la misma página simplemente agregalos de esta forma:

<iframe scrolling="auto" allowtransparency="true" style="background-repeat: no-repeat;background-position: left center; background-size: 100%;background-image:url(assets/images/marcas/diesel.jpg)"> </iframe>
...
...

Agrego un ejemplo aquí.

introducir la descripción de la imagen aquí

4
  • Pero eso lo abre en otra página? Puedo lograrlo en la misma pagina y que me de la opcion de cerrar y seguir en la pagina padre? el 12 may. 2016 a las 16:10
  • uh te refieres a que esa imagen dentro del iframe al dar clic abra en la misma pagina?
    – Jorgesys
    el 12 may. 2016 a las 16:13
  • Asi es, que al clickear la imagen se abra en un iframe en la misma pagina y pueda yo cerrarla y seguir en la pagina, alguna sugerencia? el 12 may. 2016 a las 16:14
  • ¿Seria con javascript o jQuery? probé con fancybox pero no funcionó el 12 may. 2016 a las 16:15

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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