Позиционирование испортилось, когда цикл Lite начинает идти - PullRequest
Новая
       5

Позиционирование испортилось, когда цикл Lite начинает идти

2 голосов
/ 15 мая 2011

Редактировать: Каким-то образом я знал, что после двух дней возни с этим я понял это сразу после того, как разместил это здесь. Для дальнейшего использования авто не работает по какой-то причине по высоте и ширине. Определите его вручную в плагине цикла, используйте функцию поиска, чтобы найти максимум, если вы используете изображения разных размеров. Кажется, это работает, но если у кого-то есть решение, чтобы вернуть «авто» обратно, я бы с удовольствием. Извините, что потратил на это место!

Код рабочего цикла: 

$('.fadeit').cycle({ 
    fx:     'fade',
   *width:   240,
   *height:  320,
    speed:   300, 
    timeout: 3000, 
    next:   '.fadeit', 
    pause:   1 ,
    slideExpr: 'img.andy'
});


Это проблема, которую я видел у других людей, и однажды я уже ее решал. К сожалению, он снова заработал, даже после использования исправления, которое, казалось, работало раньше (позиционируйте абсолютное значение и плавайте влево или вправо). Когда моя страница начинает загружаться, текст появляется рядом с изображением, как и предполагалось. Как только цикл запускается, текст перемещается под (как кажется, его z-индекс ниже) слайд-шоу, поэтому он скрыт. Кажется, не имеет значения, какой конфиг css я использую, но я предполагаю, что это должно быть проблемой. Я слышал, что плагин полного цикла работает, но я могу редактировать только часть тела, а цикл-лайт - это то, что предварительно включено в голову. Я также не могу внести изменения в «Это какой-то текст», поскольку я не всегда пишу это. Это идет в библиотеку, но я не могу поставить ее туда, пока она не будет работать в небольших масштабах.

Мой код: 

<div height="320" width="240" style="position:relative; float:left; padding:5px;" id="thisisit" class="fadeit">
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-1.jpg" style="position:relative; display:none; float:left; padding:5px;" class="andy" /> 
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-2.jpg" style="position:relative; display:none; float:left; padding:5px;" class="andy" />  
<img alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-3.jpg"  style="position:relative; visibility:visible; float:left; padding:5px;" class="andy"/> 
<script language="javascript" type="text/javascript"> 

window.onload=function() { 
var aclass = '.' + 'andy';
$(aclass).css('display','inline');

$('.fadeit').cycle({ 
    fx:     'fade', 
    speed:   300, 
    timeout: 3000, 
    next:   '.fadeit', 
    pause:   1 ,
    slideExpr: 'img.andy'
}); };

</script>
</div>
This is some text.

1 Ответ

2 голосов
/ 20 мая 2011

width: 'auto' здесь не работает, потому что цикл-Lite берет каждый дочерний элемент .fadeit и помещает его в абсолютное позиционирование, таким образом, удаляя их из потока и давая .fadeit эффективную автоматическую ширину 0. (Я не понимаюЯ не знаю, почему ваше предыдущее исправление, похоже, сработало: поплавки и абсолютное позиционирование не смешиваются.)

Я заметил, что <div class="fadeit"> имеет height и width атрибуты, которыене являются законными для <div>.Однако, если вы замените их на эти размеры в атрибуте style (style="width: 240px; height: 320px; ..."), ваш оригинальный JS (без жестко заданных ширины и высоты) будет работать.Я не знаю, лучше ли в вашем случае жесткое кодирование их в HTML / CSS, чем в JS, но на основании предоставленного вами примера кода, я предполагаю, что это может быть именно так?

Я также заметил много посторонних CSS в вашем примере кода (например, position: relative на .fadeit, когда Cycle-Lite сделает это за вас, избыточные плавающие элементы на дочерних изображениях и т. Д.).Вот мой предложенный код: 

<div style="float: left; padding: 5px; height: 320px; width: 240px;" id="thisisit" class="fadeit">
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-1.jpg" style="display: none;" class="andy" /> 
<img height="320" width="240" alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-2.jpg" style="display: none;" class="andy" />  
<img alt="" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-3.jpg" class="andy"/> 
<script language="javascript" type="text/javascript"> 

window.onload=function() { 
var aclass = '.' + 'andy';
$(aclass).css('padding':'5px');

$('.fadeit').cycle({ 
    fx:     'fade', 
    speed:   300, 
    timeout: 3000, 
    next:   '.fadeit', 
    pause:   1 ,
    slideExpr: 'img.andy'
}); };

</script>
</div>
This is some text.

Извините, вероятно, это не тот ответ, на который вы надеялись!

...