Obtener el ancho de Div y LIMITAR la consulta mySQL de acuerdo con no de elementos? - php, javascript, jquery, mysql, html

Necesitaba mostrar el número de imágenes en

<li><img class="1"><img class="1"><img class="1"></li>
<li><img class="1"><img class="1"><img class="1"></li>

Pero a medida que mi div está aumentando automáticamente de acuerdo conancho de la pantalla. Necesitaba calcular el número de imágenes para mostrar de acuerdo con el ancho de div, supongo que el ancho es de 1200 px y cada imagen será de 150 px. por lo que el número de imágenes a mostrar es 8.

<script type="text/javascript">
var screen_width = document.getElementById("div_1").offsetWidth();
var no_of_images =Math.round(screen_width/100);
</script>

Estoy obteniendo las imágenes de la base de datos mysql,usando la consulta LIMIT ... Quiero LIMITARLO a ninguna de las imágenes que obtuve usando var no_of_images. Pero como no hay una regla directa para integrar la variable javascript en la consulta mysql. Quiero pasarlo a la variable de PHP y luego usarlo en Mysql. Pero lamentablemente no sé cómo hacerlo.

Respuestas

Puedes usar el document.ready controlador de eventos para asegurarse de que el DOM está listo para sermanipule y luego realice una solicitud AJAX a su script del lado del servidor que podría generar el HTML para el número correcto de imágenes para colocar en el contenedor:

//wait for the `document.ready` event to fire
$(function () {

//cache the container element since it will be used later more than once
//also get the width of the container and figure out how many 150px wide images can fit without being clipped
//note that this does not take into consideration any padding/margin/border for the images
var $container   = $("#div_1"),
screen_width = $container.width(),
no_of_images = Math.floor(screen_width / 150);

//create an AJAX call to your server-side script to get the image HTML
$.ajax({
url  : "<URL>",
type : "get",//or "post"
data : { "no_of_images" : no_of_images },//jQuery will handle data encoding if you pass it an object
success : function (serverResponse) {

//now the AJAX request has returned successfully so this fades the container out, replaces it"s HTML with the server response and then fades back in
$container.fadeOut(500, function () {
$container.html(serverResponse).fadeIn(500);
});
},

//if an error occurs with the AJAX call this is how you handle it, you may just try to re-send the AJAX call
error   : function () {
alert("an error occured");
}
});
});

Usted puede pasarlo como un parámetro para obtener al cargar elpágina. p.ej. al crear el enlace para cargar la página siguiente, simplemente agréguelo como parámetro. en la carga inicial de la página, obtiene todas las imágenes, pero solo las que necesita para la resolución disponible.

Tienes que usar AJAX.

<script type="text/javascript">
var screen_width = document.getElementById("div_1").offsetWidth();
var no_of_images =Math.round(width/100);

$.ajax({
type: "post",
url: "script.php",
data: "no_of_images="+no_of_images,
success: function(){
// do something
}
});
</script>

Tienes que usar jQuery para que mi código funcione, porque yo usé el método jQuery $ .ajax ().