Galleria Javascript Gallery in IE7 & IE8

Question

Hi there

I have implemented the Galleria & SmoothDivScroll plug-ins together but in IE7 & IE8 the image gets distorted [ratio is not kept in scaling] slightly when its orientation is portrait (i.e. when the image gets loaded into #main_image, the image container).

In Safari and Firefox, everything is fine. Does anyone else encounter this problem? How did you fix this?

Answer 1

i had a similar problem too, i think smoothdivscroll doesn't work well with ie, because, in my problem, i have used smoothdivscroll and jflow, it worked perfectly on firefox, chrome, safari, opera, etc but on ie 7 and 8, everything was running a little crazy. hours and days trying to solve the problem, i tried to remove and put things one by one, after removing the scroll div, everything worked like a charm on ie :)

The site that i had that problem: www.jardinsbelohorizonte.com

José Moreira

Answer 2

I found that it was some CSS giving me problems. IE7 & IE8 apparently does not know how to handle scaling while keeping the ratio the same. I gave the image width & height properties, and that seemed to fix it.

Answer 3

I found a more complete solution that will force a width property that is scaled correctly:

Firstly you need to add an id to the large image, to do this alter the following line of code in the onPageLoad function in the jquery.galleria.js file:

var _img   = $(new Image()).attr('src',_src).addClass('replaced');

add to it so that it now looks like the following:

var _img   = $(new Image()).attr('src',_src).attr('id','mainImg').addClass('replaced');

This now adds an id to the image so it can be targeted.

Next, in your index file (or where ever you have placed the code that initiates the gallery) you now alter the code as below:

// fade in the image & caption
if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
     image.css('display','none').fadeIn(1000);
}
var newHeight = 420;
var mainImage = document.getElementById('mainImg');
var imgInitHeight = mainImage.height;
var imgInitWidth = mainImage.width;
var imgScaleRatio = newHeight/imgInitHeight;
var newWidth = Math.ceil(imgInitWidth*imgScaleRatio);
image.css('height', newHeight);
image.css('width', newWidth);
caption.css('display','none').fadeIn(1000);

The variable newHeight is the height you would like the large image to be displayed at. Next you need to target the image in order to obtain its height and width BEFORE it is resized, these values are stored in imgInitHeight and imgInitWidth respectively. Now, seeing as you know the newHeight and imgInitHeight values it is possible to calculate the ratio by which the image must be scaled for it to reach its new dimensions, this is stored in the imgScaleRatio property.

Once the ratio is determined, you can now calculate the newWidth of the image and be confident that this is scaled correctly. Once this is done simply apply the css values to the image and youre done! Hope this helps someone.

Jon Tivy-Jones

Answer 4

I got this fix for getting jQuery Gallery working on IE8 + Windows Vista.

1. Get the galleria code outside from:

   jQuery(document).ready(function(){

   //your code here

   });

2. Load Gallery in this way:

   var interval;

   Galleria.loadTheme(’/js/galleria.classic.js’);

   interval = setInterval(’loadMyGalleria()’,1000);

   function loadMyGalleria() {

   if ($(’#galleria > div’).size() == 0) { $(’#galleria’).galleria({ image_crop: true, transition: ‘fade’, transition_speed: 1000, data_config: function(img) { return { description: $(img).next(’p').html() }; } }); clearInterval(interval); }

Answer 5

The key I've found to fix many problems is to move Galleria.loadTheme() outside of (document).ready().

Try that first, and mess with other things if that doesn't work.