• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

221
Views
¿Cómo dividir imágenes *MÚLTIPLES* en mosaicos? (Javascript)

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?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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 newdivs

No 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.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error