Галерея Javascript в IE7 и IE8 - PullRequest
Новая
       42

Галерея Javascript в IE7 и IE8

1 голос
/ 08 февраля 2010

Я реализовал плагины Galleria & SmoothDivScroll вместе, но в IE7 и IE8 изображение искажается [соотношение не сохраняется при масштабировании], когда его ориентация портретная (т.е. когда изображение загружается в #main_image, изображение контейнер).

В Safari и Firefox все хорошо. Кто-нибудь еще сталкивается с этой проблемой? Как вы это исправили?

Ответы [ 6 ]

3 голосов
/ 18 февраля 2010

Я обнаружил, что некоторые проблемы с CSS вызывают у меня проблемы. IE7 и IE8, очевидно, не знают, как обрабатывать масштабирование, сохраняя соотношение. Я присвоил изображению свойства width & height, и это, похоже, исправило его.

2 голосов
/ 21 февраля 2012

Я только что разобрал всю свою страницу и собрал ее вместе, чтобы найти, что это была одна запятая в моих вариантах 

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

Как только я удалил это, все это работало на IE7. Я не знаю, может ли это сейчас кому-нибудь помочь, и, вероятно, для многих это тоже что-то совершенно очевидное.

1 голос
/ 25 октября 2010

Ключ, который я нашел для решения многих проблем, - это переместить Galleria.loadTheme () за пределы (document) .ready ().

Попробуйте сначала, и связывайтесь с другими вещами, если это не сработает.

0 голосов
/ 07 августа 2010

Я получил это исправление для работы jQuery Gallery на IE8 + Windows Vista.

  1. Получить код галереи снаружи: 

jQuery(document).ready(function(){    
  //your code here    
});
  1. Загрузить галерею следующим образом:

интервал переменных; 

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);
  }
0 голосов
/ 08 июня 2010

Я нашел более полное решение, которое заставит свойство width правильно масштабироваться:

Сначала вам нужно добавить идентификатор для большого изображения, чтобы сделать это, измените следующую строку кода в функции onPageLoad в файле jquery.galleria.js: 

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

добавьте к нему, чтобы оно теперь выглядело следующим образом: 

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

Теперь это добавляет идентификатор к изображению, чтобы оно могло быть нацелено.

Далее, в вашем индексном файле (или где бы вы ни разместили код, который инициирует галерею) вы теперь измените код, как показано ниже: 

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

Переменная newHeight - это высота, на которой вы хотите, чтобы большое изображение отображалось. Затем вам нужно нацелить изображение, чтобы получить его высоту и ширину, ДО того как оно будет изменено, эти значения сохраняются в imgInitHeight и imgInitWidth соответственно. Теперь, когда вы знаете значения newHeight и imgInitHeight, можно рассчитать коэффициент, по которому необходимо масштабировать изображение, чтобы оно достигло новых размеров, это сохраняется в свойстве imgScaleRatio.

После определения отношения вы можете вычислить новую ширину изображения и быть уверенным, что оно масштабируется правильно. Как только это будет сделано, просто примените значения CSS к изображению, и все готово! Надеюсь, это кому-нибудь поможет.

Джон Тиви-Джонс

0 голосов
/ 08 февраля 2010

У меня тоже была похожая проблема, я думаю, что smoothdivscroll плохо работает с т. е. потому что, в моей проблеме, я использовал smoothdivscroll и jflow, он отлично работал на Firefox, Chrome, Safari, Opera и т. д. но на то есть 7 и 8, все работало немного сумасшедшим. часами и днями пытаясь решить проблему, я пытался убрать и положить вещи по одному, после удаления прокрутки div, все работало как талисман на т.е.

Сайт, с которым у меня возникла эта проблема: www.jardinsbelohorizonte.com

Хосе Морейра

...