在IE7和IE8的拱廊Javascript畫廊

Question

我已經實施了拱廊& SmoothDivScroll插件在一起，但在IE7 & IE8圖像變得扭曲[比例不會縮放]略當其方向是縱向（即圖像時加載到#main_image，圖像容器中）。

在Safari和Firefox中，一切都很好。有沒有其他人遇到這個問題？你是如何解決這個問題的？

Answer 1

我發現這是一些CSS給我的問題。 IE8 & IE8顯然不知道如何處理縮放，同時保持比例相同。我給了圖像width & height屬性，並且似乎解決它。

Answer 2

我也有類似的問題太多， 我認爲smoothdivscroll不即很好地工作，因爲，在我的問題， 我已經使用smoothdivscroll和jflow，它完美地工作在火狐，Chrome，Safari瀏覽器，歌劇等 但在即7和8，一切都有點瘋狂。幾小時或幾天試圖解決這個問題，我試圖刪除，並把事情一個接一個，取出滾動DIV之後，一切工作就像在IE瀏覽器:)

的網站，我有這個問題魅力：www.jardinsbelohorizonte.com

何塞莫雷拉

Answer 3

我發現了一個更完整的解決方案，這將迫使width屬性是正確縮放：

首先你需要一個ID添加到大的圖像，要做到這一點修改的代碼中的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'); 

這現在增加了一個ID，圖片，因此我t可以成爲目標。

接下來，在你的索引文件（或任何你已經把發起畫廊中的代碼）你現在改變爲下面的代碼：

// 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屬性中。

一旦確定了比例，現在可以計算圖像的newWidth並確信這是正確縮放的。完成此操作後，只需將CSS值應用於圖像即可完成！希望這可以幫助某人。

喬恩Tivy - 瓊斯

Answer 4

我得到這個修復程序獲得的jQuery庫在IE8 + Windows Vista中工作。

1. 從外部獲取的Galleria代碼：

 

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

負載以這種方式廊：

變種間隔;

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

我已經找到解決很多問題的關鍵是（文件）。就緒（）以外的移動Galleria.loadTheme（）。

先嚐試一下，如果不起作用，請嘗試其他事情。

Answer 6

我剛纔拆開我的整個頁面，並把它重新走到一起找，這是我的選擇

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

一個逗號只要我刪除此，整個事情的工作在IE7。我不知道這對現在是否有幫助，對許多人來說也可能是很明顯的。