Плагин jQuery Cycle, из-за которого контент не центрируется, как это исправить?

Я пытаюсь использовать плагин jQuery «Cycle» (http://jquery.malsup.com/cycle/) для поворота отзывов, расположенных в <span>s ... однако плагин приводит к тому, что мой контент не центрируется. Вчера утром кто-то здесь указал, что <span> элементы абсолютно позиционируются плагином: $slides.css({position: 'absolute', top:0, left:0}).hide()

Я не знаю JS, и я все еще работаю над своим HTML / CSS, поэтому я надеялся, что кто-то здесь знает, как исправить это и может мне помочь. Если не да ладно: /

Я пробовал добавить left:50%, и хотя он центрируется, слайд сломан, и все мои <span> появляются сразу.

[Редактировать]

Вот HTML и CSS:

<div class="slideshow">
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Hi</span>
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />

.slideshow {
width:940px;
height:64px;
text-align:center;
background-image:url(../images/quotes.png);
}

В одиночку все работает по плану. Затем добавляю плагин jQuery / Cycle:

// set position and zIndex on all the slides
    $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
        var z;
        if (opts.backwards)
            z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
        else
            z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
        $(this).css('z-index', z)
    });

Вот что все испортило. Как есть, <span> отображаются по одному и постепенно появляются и исчезают, как и предполагалось, за исключением того, что текст больше не центрируется из-за абсолютного позиционирования. Так что я изменил left:0 на left:50% - да ла! Текст решенной проблемы центрирован, за исключением того, что СЕЙЧАС все промежутки отображаются одновременно, и нет постепенного появления / исчезновения.


javascript jquery css xhtml jquery-cycle
person Matt Untsaiyi    schedule 02.10.2010    source источник
comment
Я предлагаю вам опубликовать больше кода, чтобы мы могли видеть, что происходит.   -  person Khoi    schedule 02.10.2010
comment
Я отправил больше, как просили. Подскажите пожалуйста, как это исправить :).   -  person Matt Untsaiyi    schedule 02.10.2010

Ответы (1)


arrow_upward
0
arrow_downward

Без кода это нелегко вызвать, но я предполагаю, что отзывы находятся в каком-то блочном элементе. Если вы примените position:relative к этому элементу, абсолютно позиционированные <span> будут содержаться внутри. На самом деле вам не следует применять какие-либо стили позиционирования к самим промежуткам - лучше оставьте это плагину.

надеюсь, это поможет

ИЗМЕНИТЬ

Хорошо, попробуйте это:

.slideshow {
    width:940px;
    height:64px;
    background-image:url(../images/quotes.png);
    position:relative;
    }

.slideshow span {
    display:block;
    }

Возможно, вам придется вручную установить ширину <spans>s, чтобы она соответствовала ширине div.slideshow

person Stuart Burrows    schedule 02.10.2010
comment
Относительное положение не помогает, спасибо. Я добавил фактические источники ... может быть, вы можете посмотреть, что нужно исправить. - person Matt Untsaiyi; 02.10.2010
comment
Гений! Это сработало, мне пришлось установить ширину / высоту, чтобы она была по центру, но это сработало! Спасибо :) - person Matt Untsaiyi; 02.10.2010