NewBie question about image resize function

[Helsen]

Hello Appery.io team,

I have a HTML/Jquery sample code that resize images proportionally / keeping the aspect ratio (copy from http://stackoverflow.com/questions/39...).

Here is the code that works fine in Standalone html file (outside appery.io plataform). But inside appery.io plataform, this function don ́t work.

code

<img id="story-small" src="http:&#47;&#47;www&#46;weddingguide&#46;com&#46;br&#47;wp-content&#47;uploads&#47;2013&#47;07&#47;D&#46;Cantidio-3-e1373048601175&#46;jpg" width="280" height="180" >

<script>
$(document)&#46;ready(function() {
$('&#46;story-small img')&#46;each(function() {
var maxWidth = 100; &#47;&#47; Max width for the image
var maxHeight = 100; &#47;&#47; Max height for the image
var ratio = 0; &#47;&#47; Used for aspect ratio
var width = $(this)&#46;width(); &#47;&#47; Current image width
var height = $(this)&#46;height(); &#47;&#47; Current image height

Code: Select all

     // Check if the current width is larger than the max 
     if(width > maxWidth){ 
         ratio = maxWidth / width;   // get ratio for scaling image 
         $(this).css("width", maxWidth); // Set new width 
         $(this).css("height", height * ratio);  // Scale height based on ratio 
         height = height * ratio;    // Reset height to match scaled image 
         width = width * ratio;    // Reset width to match scaled image 
     } 

     // Check if current height is larger than max 
     if(height > maxHeight){ 
         ratio = maxHeight / height; // get ratio for scaling image 
         $(this).css("height", maxHeight);   // Set new height 
         $(this).css("width", width * ratio);    // Scale width based on ratio 
         width = width * ratio;    // Reset width to match scaled image 
     } 
 }); 

});
<&#47;script>
/code

In appery.io I already try this, in two ways:
1- using Appery.io image component with ON PAGE LOAD EVENTE Run JAVASCRIPT and change the code
$('.story-small img') TO Appery("myImageName")

2- using Appery HTML component

I need help to understand how to use this function in appery.io, Thanks

[Kateryna Grynko]

Hi Helsen,

On Page Load event add Run JavaScript action and paste the following JS code there (it works for all the images, so if you need you can change selector in the first line):

code$('img')&#46;each(function() {
var maxWidth = 40; &#47;&#47; Max width for the image
var maxHeight = 40; &#47;&#47; Max height for the image
var ratio = 0; &#47;&#47; Used for aspect ratio
var width = $(this)&#46;width(); &#47;&#47; Current image width
var height = $(this)&#46;height(); &#47;&#47; Current image height

&#47;&#47; Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth &#47; width; &#47;&#47; get ratio for scaling image
$(this)&#46;css("width", maxWidth); &#47;&#47; Set new width
$(this)&#46;css("height", height ratio); &#47;&#47; Scale height based on ratio
height = height ratio; &#47;&#47; Reset height to match scaled image
width = width * ratio; &#47;&#47; Reset width to match scaled image
}

&#47;&#47; Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight &#47; height; &#47;&#47; get ratio for scaling image
$(this)&#46;css("height", maxHeight); &#47;&#47; Set new height
$(this)&#46;css("width", width ratio); &#47;&#47; Scale width based on ratio
width = width ratio; &#47;&#47; Reset width to match scaled image
}
});/code