Jquery Photo Cycle - 確保遠程圖像URL正確居中

我使用jquery photo cycle工具在我的website上顯示公司徽標列表。我從數據庫中隨機選擇5個遠程圖像URL在每個頁面上顯示，並將該元素居中放置在頁面上。Jquery Photo Cycle - 確保遠程圖像URL正確居中

<div align="center"> 
Featured Companies 
<div class="logos" align="center"> 
<?php 
foreach($this->logos as $logo) : 
echo "<a title=\"".$logo->name."\" href=\"./company/listrunners/company/".$logo->id."\"><img src=\"".$logo->image."\"/></a>\n"; 
endforeach; 
?> 
</div> 
</div>

爲標誌的div的CSS

.logo { 
    padding: 0; 
    margin: 0; 
} 

.logo img { 
    position: inherit; 
    padding: 15px; 
    border: 1px solid #ccc; 
    background-color: #eee; 
    top: 0; 
    left: 0; 
    max-width: 200px; 
}

問題是因爲該公司標誌的是差異的大小，照片週期窗口小部件可以根據隨機選擇改變的排列，顯示無論是在中心或者在左邊。如果不知道將顯示的圖像大小，是否有辦法確保所有徽標都顯示在中心？

來源

2009-12-22 emeraldjava

我不完全確定你會怎麼做，但我相信這是可能的。你將無法使用CSS做到這一點，因爲jquery應用內聯樣式，以便覆蓋樣式表

我可以看到插件正在應用{position：'absolute'，top：0，left ：0}到圖像元素。

Malsup還爲插件提供下載中的源代碼，它在那裏設置元素的位置;

$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) { 
     var z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i; 
     $(this).css('z-index', z) 
    });

但是，這apllied所有元素，所以我還沒有完全知道你將如何去圍繞解決不斷變化的每個圖像的位置的問題。

有可能用於覆蓋元素位置的回調函數之前/之後，但可能更好的選擇是calculateTimeout回調函數，該函數允許您爲單個幻燈片/圖像設置超時。

function calculateTimeout(currElement, nextElement, opts, isForward) {}

這不是你的重要部分。它還爲您提供當前/下一個元素，並且在那裏您可以定位元素的位置。

這不是你的問題的真正答案，但希望有一些想法來幫助你。

來源

2009-12-22 13:21:52 screenm0nkey

我從malsup上centering images

這個環節我刪除了ALIGN = '中心' 的div標籤

<div class="slideshow"> 
<?php 
foreach($this->logos as $logo) : 
echo "<div class=\"slide\"><a title=\"".$logo->name."\" href=\"./company/listrunners/company/".$logo->id."\"><img src=\"".$logo->image."\"/></a></div>\n"; 
endforeach; 
?> 
</div>

，然後更新了我的CSS是

.slideshow { margin: 20px auto; padding: 0; } 
.slide { margin: 0; padding: 0 } 
.slideshow, .slide { height: 332px; width: 832px; } 
.slide img { padding: 10px; border: 1px solid #ccc; background-color: #eee; margin: auto; display: block }

來源

2009-12-27 14:22:07 emeraldjava

Jquery Photo Cycle - 確保遠程圖像URL正確居中

回答

相關問題