Databases
StackOverflow2013
Postsdbo
POJquery Cycle Plugin and IE - Preloading and re-sizing but, intermittently, image not rendering/re-sizing correctly in IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery Cycle Plugin and IE - Preloading and re-sizing but, intermittently, image not rendering/re-sizing correctly in IE
    text
    copied!<p>Re-sizing images and running jquery cycle plugin (<a href="http://www.jquery.malsup.com/cycle/" rel="nofollow">http://www.jquery.malsup.com/cycle/</a>). I am also using a preloader plugin. </p> <p><strong>THE GOAL</strong></p> <p>The goal is to take a number of images (sourced from the cms database), re-size either height or width of each, (depending on its aspect ratio compared to the container's aspect ratio) so that it fits within the container, center it in the container and then run a slideshow (project images). </p> <p><strong>THE ISSUE</strong></p> <p>The cycle slideshow runs before the images have loaded (the images are way too big so it can cycle through 3 slides before images show). Wanting it to wait until the iamges have loaded, displaying a gif while it loads. </p> <p>Here's the html and jquery code im running to preload, re-size and run the cycle slideshow:</p> <pre><code>&lt;div id="slideshow" class="single_project_images pics"&gt; &lt;img src="/components/com_sedarticles/assets/1333588925" /&gt; &lt;img src="/components/com_sedarticles/assets/1333852906" /&gt; &lt;img src="/components/com_sedarticles/assets/1333852914" /&gt; &lt;/div&gt; </code></pre> <p>the script:</p> <pre><code>$(document).ready(function() { $(".single_project_images img").each(function(){ $(this).imagesLoaded(function(){ var w = $(this).width(); var h = $(this).height(); if( (w/h) &lt; 0.85){ $(this).height("541px"); $(this).css("margin-left", parseInt((460 - $(this).width())/2)+"px"); }else{ $(this).width("460px"); $(this).css("margin-top", parseInt((541 - $(this).height())/2)+"px"); } }); }); $('#slideshow').cycle({ speed: 1000, timeout: 5000, pager: '#nav' }); }); </code></pre>
 

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