Quiero dividir varias imágenes en mosaicos (debe ser div o similar). (Con Javascript o jQuery.)
y las imágenes deben estar una debajo de la otra.
Es mi div;
<div class="reading-content"> <div class="page-break no-gaps"> <img id="image-0" src="image.jpg" class="some-class"> </div> <div class="page-break no-gaps"> <img id="image-1" src="image1.jpg" class="some-class"> </div> </div>ejemplo jsfiddle; http://jsfiddle.net/0Lxr2tad/
var t = Date.now(); var img = new Image(); var length = 30; var ylength = 20; img.onload = function() { var width = this.width, height = this.height, _length = -length, i, j; // create a <div/> with all basic characteristics, to be cloned over and over in the loops below. var $basicDiv = jQuery('<div/>', { class: 'splitImg', css: { 'width': Math.floor(width/length), 'height': Math.floor(height/ylength), 'background-image': 'url(' + img.src + ')' } }); // Finding a node in the DOM is slow. Do it once and assign the returned jQuery collection. // Also, #wrapper's width can be set here. var $wrapper = $('#wrapper').width(width + length * 2); for (i = 0; i > _length; i--) { for (j = 0; j > _length; j--) { $basicDiv.clone().css({'background-position': `${width/length * j}px ${height/ylength * i}px`}).appendTo($wrapper); } } console.log(Date.now() - t); } img.src = 'http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg'; // how to do multiple this??¿Alguien puede ayudar?
No uso mucho jquery, así que puedo sugerir una opción de javascript como esta:
const targetElement = document.querySelector(...) // I choose the div that we are going to append newdivsNo sé si existe, pero supongo que hay una variedad de contenido que usa para las URL de src o cualquier otro dato.
let arrayOfInfo = [{},{}] // this is a hypothetical array of objects that we will use arrayOfInfo.forEach(obj => { let newDiv = document.createElement("div"); newDiv.classList.add("page-break","no-gaps") newDiv.innerHTML=`<img id="image-${obj.index}" src=${obj.url} class="some-class">` targetElement.append(newDiv); })así que con ese enfoque automatizas todo. Si necesita reutilizarlo, puede convertirlo en una función y ejecutarlo donde lo necesite. También es útil si necesita cambiar algún contenido más adelante, por lo que solo cambia los valores de la matriz y el resto vuelve a ser automático.
Espero que esto sea lo que necesitas.