Databases
StackOverflow2013
Postsdbo
POBest way to zoom/scale/resize multiple images with Javascript?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBest way to zoom/scale/resize multiple images with Javascript?
    text
    copied!<p>I have a list of images inside divs and a jquery ui slider, when user slides the bar the images should be resized/zoomed (whatever you want to call it), i tried selecting all the images and changing the css's width and height using jquery. It works but it's very slow and not very fluid.</p> <p>I read that browsers sucks resizing images, but there should be a way to improve performance or making it fluid, at least with the images that are being loading.</p> <p>Here is my html markup:</p> <pre><code>&lt;div class="file-list"&gt; &lt;div class="file-cell"&gt; &lt;div class="thumb-wrapper"&gt; &lt;img width="100" height="100" title="mytitle" alt="myalt" src="image1.jpg"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="file-cell"&gt; &lt;div class="thumb-wrapper"&gt; &lt;img width="100" height="100" title="mytitle" alt="myalt" src="image1.jpg"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is the CSS code:</p> <pre><code> div.file-cell { margin: 10px; float: left; padding: 8px; width: 100px; background: none; margin-bottom: 5px; cursor: pointer; } </code></pre> <p>Here is the Javascript code:</p> <pre><code>jQuery().ready(function(){ var images = jQuery('.thumb-wrapper img'); //caches the query when dom is ready jQuery( "#slider" ).slider({ step: 13, min: 70, max: 200, value: 100, slide: function(event, ui){ //i think if i return while resizing increases performace, //confirm this please if(resizing) return; resizing = true; var size = CELL_WIDTH * ui.value / 100; size = size + 'em'; images.css({ 'width': size, 'height': size }); resizing = false; } }); } </code></pre> <p><strong>Note:</strong> <em>should i remove the width and height attributes for the image? they are there because they generated by wordpress.</em></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload