Galerie Galleria Javascript dans IE7 & IE8

Question

J'ai implémenté les plug-ins SmoothDivScroll de Galleria & ensemble mais dans IE7 & IE8 l'image est déformée [le rapport n'est pas maintenu dans la mise à l'échelle] légèrement quand son orientation est portrait (c.-à-d. chargé dans #main_image, le conteneur d'image).

Dans Safari et Firefox, tout va bien. Est-ce que quelqu'un d'autre rencontre ce problème? Comment as-tu réparé ça?

Answer 1

J'ai trouvé que c'était du CSS qui me posait des problèmes. IE7 & IE8 ne sait apparemment pas comment gérer la mise à l'échelle tout en conservant le même ratio. J'ai donné l'image width & height propriétés, et cela a semblé le réparer.

Answer 2

i eu un problème similaire aussi, je pense que smoothdivscroll ne fonctionne pas bien avec-à-dire, parce que, dans mon problème, je ont utilisé smoothdivscroll et JFlow, il a parfaitement fonctionné sur Firefox, Chrome, Safari, Opera, etc. mais par ex. 7 et 8, tout était un peu fou. heures et des jours à essayer de résoudre le problème, j'ai essayé d'enlever et de mettre les choses un par un, après avoir enlevé la div de défilement, tout a fonctionné comme un charme sur-à-dire :)

Le site que j'ai eu ce problème: www.jardinsbelohorizonte.com

José Moreira

Answer 3

Je trouve une solution plus complète qui forcera une propriété largeur est réduite correctement:

Premièrement, vous devez ajouter un identifiant à la grande image pour faire modifier la ligne de code suivante dans la fonction OnPageLoad dans le fichier jquery.galleria.js:

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

ajouter à afin qu'il ressemble maintenant à ce qui suit:

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

Cela ajoute maintenant un identifiant à l'image donc je t peut être ciblé.

Ensuite, dans votre fichier d'index (ou si jamais vous avez placé le code qui initie la galerie) vous modifiez maintenant le code ci-dessous:

// 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); 

La newHeight variable est la hauteur que vous souhaitez le grand image à afficher à. Ensuite, vous devez cibler l'image pour obtenir sa hauteur et sa largeur AVANT qu'elle ne soit redimensionnée, ces valeurs sont respectivement stockées dans imgInitHeight et imgInitWidth. Maintenant, vu que vous connaissez les valeurs newHeight et imgInitHeight, il est possible de calculer le rapport par lequel l'image doit être mise à l'échelle pour qu'elle atteigne ses nouvelles dimensions, ceci est stocké dans la propriété imgScaleRatio. Une fois le rapport déterminé, vous pouvez maintenant calculer la nouvelle largeur de l'image et vous assurer que celle-ci est correctement mise à l'échelle. Une fois cela fait, appliquez simplement les valeurs de css à l'image et vous êtes fait! J'espère que cela aide quelqu'un.

Jon Tivy-Jones

Answer 4

J'ai eu ce correctif pour obtenir Galerie jQuery travaillant sur IE8 + Windows Vista.

1. Obtenir le code galleria en dehors de:

 

jQuery(document).ready(function(){  
    //your code here  
}); 

2. Gallery charge de cette manière:

intervalle var ;

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

La clé que j'ai trouvé pour résoudre de nombreux problèmes est de se déplacer Galleria.loadTheme() en dehors de (document) .ready(). Essayez ceci en premier, et mélangez d'autres choses si cela ne fonctionne pas.

Answer 6

Je viens de prendre ma part page entière et le remettre ensemble pour trouver qu'il était une virgule dans mes options

// Initialize Galleria 
$('#galleria').galleria({ 
width:764, 
transition: 'fade', 
autoplay: 8000, 
idleTime: 1000000, <-----THIS COMMA HERE (remove this) 
}); 

Dès que je l'ai enlevé cela, la chose a travaillé sur IE7. Je ne sais pas si cela est utile à qui que ce soit maintenant et c'est probablement quelque chose de tout à fait évident pour beaucoup.