jQuery Cycle - 在右側對齊不同尺寸的圖像？

我有一個幻燈片（jQuery循環），我用於網站的背景。問題是我想要對齊右側的照片，並且他們有不同的暗淡度，出於某種原因，寬度最小的人不會對齊到正確的位置......我試圖將img像人一樣放入div中在互聯網上建議和不同的事情，但無濟於事。這可能沒有編輯插件？jQuery Cycle - 在右側對齊不同尺寸的圖像？

HTML：

<p class="slideshow"> 
    <img src="31.jpg" alt="" /> 
    <img src="35.jpg" alt="" /> 
    <img src="36.jpg" alt="" /> 
</p>

CSS：

p.slideshow { 
    position:absolute; 
    top:0; 
    right:0; 
    z-index:-999; 
    overflow:hidden; 
    background: url(images/stripe-bg.png) repeat; 
    margin:0; 
    padding:0; 

    /* without setting the width and height 100% I get the 
     annoying scroll bar on the right if photos are big in height */ 
    /*height:100%; 
    width:100%;*/ 
}

你有任何線索如何個個右對齊？

謝謝，克里斯

來源

2011-06-20 Cris

我還遇到過這個問題，當時我正在嘗試右對齊容器中的某些內容。此解決方案爲我們工作：

$('#sltitles span').each(function() { 
    $(this).css({right: '0'}); 
});

您需要在主插件之前運行它，以便它適用於它似乎所有的內容。我們結束了：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#sltitles span').each(function() { 
     $(this).css({right: '0'}); 
    }); 
    $('#sltitles').cycle({ 
     fx: 'fade' 
    }); 
    }); 
</script>

也許這將幫助別人有同樣的問題。

來源

2011-08-31 15:10:28 Karl

這是一個很酷的解決方案。謝謝！如果我想垂直對齊不同尺寸的幻燈片圖像，我只會在「margin：0 auto」的情況下使用相同的解決方案，對吧？ – Cris

爲什麼添加額外的jQuery來處理客戶端，當你可以用css來做呢？ – squarecandy

我會嘗試浮動一個DIV內的圖像：

<div class="slideshow"> 
<img src="31.jpg" alt="" /> 
<img src="35.jpg" alt="" /> 
<img src="36.jpg" alt="" /> 
</div> 


div.slideshow { 
position:absolute; 
top:0; 
right:0; 
z-index:-999; 
overflow:hidden; 
background: url(images/stripe-bg.png) repeat; 
margin:0; 
padding:0; 

/* width:; 
height:;*/ } 



div.slideshow img { float:right: display:inline}

來源

2011-07-06 22:06:42 areid

浮動的圖像，因爲圖像是絕對由插件定位不循環工作。 – ramono

週期插件使用絕對位置的圖像，也top: 0;和left: 0;，所以你將有編輯插件代碼，因爲不是eplugin選項的一部分。

只需打開插件文件並搜索left:0並將其更改爲right:0即可。

如果更新插件，您只需重新執行一次。

來源

2011-07-06 22:19:28 ramono

謝謝，這就是我最終做的:)，它的工作。 – Cris

不要破解循環插件，有更好的方法，將容易承受升級插件。 – squarecandy

這是一個非常簡單的直接css解決方案，不涉及黑客插件或大量臃腫的額外jQuery代碼。

p.slideshow img { 
    left: auto !important; 
    right: 0 !important; 
}

這也將非圖像幻燈片項目運行良好：

div.cycle-slide { 
    left: auto !important; 
    right: 0 !important; 
}

來源

2013-12-30 02:45:28 squarecandy

jQuery Cycle - 在右側對齊不同尺寸的圖像？

回答

相關問題