Tengo un montón de imágenes que me gustaríaMostrar utilizando jquery. Tengo divs y utilicé jquery para rellenar los divs en función de algunos criterios node_id. Por ejemplo, si el node_id es teamA, muestro imágenes que tienen el texto de teamA en el nombre de las imágenes.
Funciona, el problema es que cuando se colocan las imágenes en el cuerpo del html, las imágenes se muestran verticalmente hasta que no hay espacio en la página principal.
Lo que me gustaría hacer esto dependiendo de latamaño de la ventana del navegador, muestra las imágenes dependiendo del tamaño de la ventana del navegador. Por ejemplo, si el tamaño de la imagen es 500x500 y el ancho de la ventana del navegador es 700, debería poder mostrar una imagen por línea. Si el ancho del navegador es 1200, debería haber 2 imágenes por línea en la ventana de mi navegador.
Para darte una idea, he puesto código html y jquery para mostrarte lo que estoy haciendo:
<div class="tab-content" id="tabs1">
<div id="team_A" class="team"></div>
<div id="team_B" class="team"></div>
<div id="team_C" class="team"></div>
<div id="team_D" class="team"></div>
</div>
Este es el código jquery para mostrar la imagen basada en jstree node_id:
var team_A_Img = "http://test.net" + node_id + "-team_A.png";
$(function () {
var myImage = new Image();
$(myImage).load(function () {
$("#team_A").html(myImage);
}).error(function () {
$("#team_A").hide();
}).attr("src", Img_A_Img)
});
Esto funciona pero necesito mostrar las imágenes basadasen el tamaño de la ventana del navegador, ya sea vertical u horizontalmente, en función de la cantidad de espacio que tengo en el navegador. ¿Puede alguien darme ideas de cómo haría esto?
Respuestas
3 para la respuesta № 1Si puede especificar el ancho de las imágenes, puede flotarlas en un elemento de nivel de bloque. Por ejemplo:
<div class="tab-content" id="tabs1">
<div id="team_A" class="team"><img src="/images/http://placehold.it/350x150"></div>
<div id="team_B" class="team"><img src="/images/http://placehold.it/350x150"></div>
<div id="team_C" class="team"><img src="/images/http://placehold.it/350x150"></div>
<div id="team_D" class="team"><img src="/images/http://placehold.it/350x150"></div>
</div>
y usa el siguiente CSS:
.tab-content {
padding: 0px;
background-color: yellow;
overflow: auto;
}
.team {
float: left;
margin: 0 5px 5px 0;
}
.team img {
display: block;
}
Para hacer este trabajo, establezca overflow: auto en el contenedor principal, especialmente si desea utilizar un color de fondo o una imagen.
Puede ajustar el margen o el relleno del elemento flotado para crear y diseñar canales entre las imágenes.
Finalmente, utilizo display: block en las imágenes para tratar cualquier espacio en blanco que pueda resultar de un elemento en línea.
Para referencia, ver: http://jsfiddle.net/audetwebdesign/8FEeM/
1 para la respuesta № 2
<div class="tab-content" id="tabs1">
<div id="team_A" class="team">
<img src="/images/http://placehold.it/500x500" />
<img src="/images/http://placehold.it/500x500" />
<img src="/images/http://placehold.it/500x500" />
</div>
CSS
.team img{float: left;}
0 para la respuesta № 3
En mi guión puedes hacer esto:
$ (". team"). css ({"width": $ (window) .width (), "height": "auto"});