Entonces, estoy tratando de hacer una galería de fotos en el medio de mi pantalla usando porcentajes, la imagen termina en el centro y funciona bien con jquery para cambiar imágenes, sin problema, pero la imagen div termina superponiéndose a la div. que contiene el nombre de la galería, ¿cómo puedo hacer que el div de la galería sea fijo usando porcentajes?

Aquí está el violín: https://jsfiddle.net/52gwc0j2/

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.body{
  height: 100%;
  width: 100%;
}
.photoset {
    position:relative;
    width: 52%;
    height: 69%;
}

.photoset img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0px 25px -2px rgba(89,89,89,1);
}
<div class="row">
 <div class="col-md-4 col-md-offset-4 text-center">
    Photoset Header
 </div>
</div> 
<div class="photoset center-block">
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>
1
n.ab 27 ene. 2016 a las 18:35

4 respuestas

La mejor respuesta

Como dijo @rac, la altura de .photoset es 0 porque sus elementos secundarios están absolutamente posicionados.

Para solucionar esto con la mínima cantidad de cambio de código, actualice su selector de .photoset img a .photoset img + img. Esto solo apuntará a imágenes colocadas después de una imagen. El resultado es que su primera imagen establece la altura de .photoset, y todas las imágenes posteriores se superponen en la parte superior.

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.body{
  height: 100%;
  width: 100%;
}
.photoset {
    position:relative;
    width: 52%;
    height: 69%;
}

.photoset img + img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0px 25px -2px rgba(89,89,89,1);
}
<div class="row">
 <div class="col-md-4 col-md-offset-4 text-center">
    Photoset Header
 </div>
</div> 
<div class="photoset center-block">
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>
2
jperezov 27 ene. 2016 a las 15:48

En lugar de usar una altura para tu conjunto de fotos, usa padding-bottom: 50%; y juega con el porcentaje hasta que obtengas la altura que deseas. Luego, configure la imagen para que tenga una altura del 100% y un ancho del 100% en lugar de arriba, izquierda, derecha, abajo.

Aquí hay un violín Fiddle

0
Steve K 27 ene. 2016 a las 16:01

Como han mencionado otros, usar el posicionamiento absolute para sus imágenes no tiene sentido; hará las cosas mucho más difíciles. Sin embargo, puede aprovechar el hecho de que los elementos absolute se pueden colocar detrás de otros elementos sin presionar el contenido. Mi propuesta es simplemente tener una sola clase que diga qué imagen está mostrando actualmente. La imagen mostrada tendrá una posición relative y las otras tendrán una posición absolute, lo que permitirá que las imágenes aparezcan en la misma esquina superior izquierda, pero que algunas se oscurezcan y otras sean visibles. .

La principal ventaja del enfoque a continuación es que sus imágenes escalan su cuadro como lo desea, y el photoset se puede colocar en línea, en el flujo del documento, como una superposición, etc. un intento. Esto también significa que su javascript se vuelve más liviano y fácil, ya que todo lo que necesita hacer es agregar la clase correcta a la imagen para mostrarla. También puede agregar un cuadro relativo con un título en, y funcionará bien.

// Don't worry about this, its just a quick implementation to make your photos rotate
var ps = Array.prototype.slice.call(document.querySelectorAll('.photoset')).forEach(function(set){
  var all = Array.prototype.slice.call(set.querySelectorAll('img'));
  var index = 0;
  setInterval(function(){
    all[index].className = '';
    index = index + 1 >= all.length ? 0 : index + 1;
    all[index].className = 'active';
  },1000)
});
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.body {
  height: 100%;
  width: 100%;
}

.photoset {
  box-shadow: 0px 0px 25px -2px rgba(89,89,89,1);
  overflow: hidden;
  width: auto;
  display: inline-block;
}

#absolute-photoset {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 80%;
  max-height: 80%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 1;
}

.photoset img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  display: block;
}

.photoset img.active {
  position: relative;
  opacity: 1;
}
<div class="photoset" id="absolute-photoset">
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" class="active" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>

<h1>My Title</h1>
<div class="photoset" id="inline-photoset">
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" class="active" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>
<p>The above photoset seems to be pushing this text down as expected!</p>

Esta clase de conjunto de fotos también apartó los contenidos de su camino si no está en posición absoluta, que supongo que es lo que estás buscando. También puede cambiar el tamaño de .photoset y la imagen interior debería seguir (no estoy seguro de si max-width cambiará las proporciones de la imagen, de ser así, use solo valores max unidireccionales, como solo max-width).

La principal ventaja es que puede tratar el .photoset como una caja y no preocuparse por su contenido, por lo que ahora puede usarlo en línea, absolutamente posicionado, fijo, etc.

1
somethinghere 27 ene. 2016 a las 16:15

Mi propuesta es cambiar la propiedad de posición de la imagen del conjunto de fotos a relativa:

$(function () {
  $('.photoset').each(function(){
    $(this).data('counter', 0);
  });

  var showCurrent = function (photoset) {
    $items = photoset.find('img');
    var counter = photoset.data('counter');
    var numItems = $items.length;
    var itemToShow = Math.abs(counter % numItems);
    var width = $(window).width;

    $items.fadeOut(1000);

    //Adjust orientation - Portrait or Landscape
    if (($items.eq(itemToShow).width() / $items.eq(itemToShow).height()) > 1) {

      photoset.css({
        width: "52%",
        height: "69%"
      });
    } else if (($items.eq(itemToShow).width() / $items.eq(itemToShow).height()) < 1) {
      photoset.css({
        width: "23%",
        height: "69%"
      });
    }
    $items.eq(itemToShow).fadeIn(1000);
  };

  $('.photoset').on('click', function(e) {
    e.stopPropagation();
    var photoset = $(this);
    var pWidth = photoset.innerWidth();
    var pOffset = photoset.offset();
    var x = e.pageX - pOffset.left;
    if (pWidth / 2 > x) {
      photoset.data('counter', photoset.data('counter') - 1);
      showCurrent(photoset);
    } else {
      photoset.data('counter', photoset.data('counter') + 1);
      showCurrent(photoset);
    }
  });
});
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.body{
  height: 100%;
  width: 100%;
}
.photoset {
  position:relative;
  width: 52%;
  height: 69%;
}

.photoset img {
  position: relative;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px 0px 25px -2px rgba(89,89,89,1);
}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<div class="row">
    <div class="col-md-4 col-md-offset-4 text-center">
        Photoset Header
    </div>
</div>
<div class="photoset center-block">
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>
1
gaetanoM 27 ene. 2016 a las 15:47