JQuery Photo Cycle - Убедитесь, что URL-адреса удаленных изображений расположены по центру

Question

Я использую инструмент jquery photo cycle для отображения списка логотипов компании на моем веб-сайте . Я случайным образом выбираю 5 удаленных 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>

CSS для логотипа div

.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; 
} 

Проблема в том, что логотипы компании имеют разный размер, выравнивание виджета фотоцикла может меняться в зависимости от случайного выбора, отображаться либо в центре, либо слева. Не зная размера изображений, которые будут отображаться, есть ли способ обеспечить отображение всех логотипов в центре?

Answer 1

Я получил эту ссылку от malsup на центрирование изображений

Я удалил тег align = 'center' на 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 }

Answer 2

Я не совсем уверен, как бы вы поступили так, но я уверен, что это возможно. Вы не сможете сделать это с помощью 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)
    });

Но это применимо ко всем элементам, поэтому я до сих пор не совсем уверен, как бы вы решили проблему изменения положения для каждого изображения.

Существуют функции обратного вызова до / после, которые вы могли бы использовать для переопределения расположения элементов, но, возможно, лучшим вариантом является функция обратного вызова CalculayTimeout, которая позволяет установить время ожидания для отдельных слайдов / изображений.

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

Это не важная часть для вас. Он также снабжает вас текущим / следующим элементом, и там вы, возможно, можете нацелить позиционирование элемента.

Это не был действительно ответ на ваш вопрос, но, надеюсь, некоторые идеи помогут вам.