Плагин jQuery Cycle, масштабируемый DIV и containerResize = 1 - PullRequest
Новая
       5

Плагин jQuery Cycle, масштабируемый DIV и containerResize = 1

3 голосов
/ 21 декабря 2011

Я использую плагин jQuery Cycle (полный) на странице, где я использую контейнер DIV (.content-left) шириной 75% и слайд-шоу jQuery Cycle внутри этого контейнера. Изображения внутри этого контейнера должны быть скорректированы автоматически.

Я использую:

JS: 

$('.slides').cycle({
   fx: 'fade',
   containerResize: 1 // default for jquery.cycle.all
});

HTML: 

<div id="content">
   <div class="content-left">
      <div class="slides"> 
          <img src="...">
          <img src="...">
          <!-- etc. -->
      </div>
   </div>
   <div class="content-right">
      some text
   </div>
   <div class="clear"></div>
</div>

CSS: 

#content {
   overflow:hidden;
}

#content .content-left {
   width:75%;
   float:left;
}

#content .content-left img {  /* or: .slides img */
   width:100% !important;
   position:relative;
   left:0px;
   top:0px;
   z-index:-2;
}

#content .content-right {
   width:25%;
   float:right;
}

На странице инициализации высота и ширина моего DIV-файла (.content-left) корректно настраиваются благодаря функции containerResize. Однако, когда я изменяю размер окна браузера, ширина и высота слайдов остаются прежними, а это не то, что я хотел.

containerResize: 0 также не приносит желаемого эффекта (тогда он игнорирует высоту изображений и корректирует высоту обертки до высоты .content-right (и обрезает изображение)).

Когда я использую только изображение без загрузки Cycle, все работает нормально.

Какие-нибудь решения для этого?

Спасибо!

Ответы [ 2 ]

1 голос
/ 04 мая 2012

Набор в JS: 

containerResize: 0,
slideResize:   0,

(правда!), А затем используйте трюк с прозрачным изображением в контейнере div. Смотри здесь для деталей.

0 голосов
/ 27 апреля 2012

Как насчет попытки max-width: 100% !important; на изображениях и удаления !important из width: 100% !important, чтобы при цикле попытки изменить размеры слайдов обратно до исходной ширины определение максимальной ширины будет иметь приоритет.

Если бы вы могли предоставить jsfiddle, это также очень помогло бы.

...