DMXzone Lightbox Support Product Page

Not a problem

HTML5 Image Enhancer resize problem

Reported 24 Jul 2012 18:23:06
1
has this problem
24 Jul 2012 18:23:06 Francesco Andreani posted:
Hi all, I have this strange issue with the HTML5 Image Enhancer. I use a jquery function to resize a div containing an image. All works fine even if I use my HTML5 Image Enhancer with firefox and Explorer but in Chrome the div has width and height of the image. any Idea? You can see this link with Firefox or Chrome: www.innamoratidifoligno.it/demodb/index__.php
Thank tou!

Replies

Replied 25 Jul 2012 06:02:43
25 Jul 2012 06:02:43 Teodor Kuduschiev replied:
Hello,

Can you please describe the issue a little more detailed?
Replied 25 Jul 2012 14:20:45
25 Jul 2012 14:20:45 Francesco Andreani replied:
Yes Teodor Thank you. now I use a jquery function to convert the image :

function image_resize() {
$(".imgres img".each(function () {
/* Max width for the image */
var maxWidth = 230;
/* Max hieght for the image */
var maxHeight = 233;
/*Used for aspect ratio*/
var ratio = 1;
/*Current image width*/
var width = $(this).width();
/*Current image height */
var height = $(this).height();

/*Check if the current width is larger than the max*/
if (width > maxWidth) {
/*get ratio for scaling image*/
ratio = (maxWidth / width);
/* Set New hieght and width of Image*/
$(this).attr({
width : maxWidth,
height : (height * ratio),
alt : ""
});
/* Reset height to match scaled image */
height = (height * ratio);
/* Reset width to match scaled image */
width = (width * ratio);
/*Check if current height is larger than max*/
if (height > maxHeight) {
/*get ratio for scaling image*/
ratio = (maxHeight / height);
/*Set new height and width*/
$(this).attr({
height : maxHeight,
width : (width * ratio),
alt : "your-alt-text-you-can-remove-this"
});

}
}
});
}

/*
Here is End Image Resize Code
*/

/*
How can we call this Function
*/

/* Start $(document).ready function() */
$(document).ready(function () {
/* Call Function For image Resize (Not for Webkit Browser) */
image_resize();
});
/* End $(document).ready function( */

/* Call Function (for Webkit Browser like safari and Chrome) */
$(window).load(function () {
image_resize();
});
In the bottom of this function you can see how the function itself is called for the 2 different browser families.
Using a normal image all images inside the class imgres are correctly resized Firefox and chrome. Using he HTML5 enhancer, that is more usefull for our site, the image is not resized in chrome but it is in firefox, and in chrome only appears in his original dimension. the two pages www.innamoratidifoligno.it/demodb/index__.php and www.innamoratidifoligno.it/demodb/index.php differs only because the index calla a normal image and the index__ calls the HTML5 Image Enhancer. Thank you for your help I can send to you the entire code of the page.

Reply to this topic