Слайдер JQuery взрывается при загрузке страницы - PullRequest
0 голосов
/ 07 ноября 2010

Я пытался выяснить, как остановить этот слайдер на сайте, над которым я работаю: [ссылка опущена] при загрузке страницы, когда весь контент загружается, и выталкивает весь контент вниз.

Я пытался реализовать ответ Джерфа, как в этом сообщении: Скрыть jQuery Accordion при загрузке , но безуспешно кто-нибудь может пролить свет на эту проблему и сказать, что я делаю неправильно.

Слайдер инициируется:

 $('#slider .items').cycle({
  fx: 'blindY',
  timeout: 9599
 });

Как у Иерфа ответ:

<body <?php echo $bodyid;?>>
<script type="text/javascript">jQuery('body').addClass('js');</script>

Я поместил body.js перед стилями слайдера в основной таблице стилей.

  body.js #slider  {margin-bottom:10px; margin-top:-60px}
  body.js #slider  .items {height: 283px; width:990px; position:relative;}
  body.js #slider  .items div {height:212px; width:990px; padding-top: 72px; background: 0px 72px no-repeat url("../images/banners/banner-bg.png"); background-color:transparent !important;}
  body.js #slider  .items div h1 {float: left; font-size:30px; color:#fff; font-weight:bold; margin:20px 0 0 20px;}
  body.js #slider  .items div p {float: left; font-size:20px; color:#C5E9FF; font-weight:bold; margin: 10px 0 0 20px; line-height:23px;}
  body.js #slider  .items div img {float: right; position:relative;}

  body.js #slider  .items .item-1 img {right:-1px; top:-23px; height:233px;}
  body.js #slider  .items .item-1 p, #banner .items .item-1 p {width:530px;}

  body.js #slider  .items .item-2 img {right:50px; top:-71px; height:281px;}
  body.js #slider  .items .item-2 p, #banner .items .item-2 p {width:530px;}

  body.js #slider  .items .item-3 img {right:50px; top:-32px; height:242px;}
  body.js #slider  .items .item-3 p, #banner .items .item-3 p {width:530px;}

  body.js #slider  .items .item-4 img {right:50px; top:-62px; height:272px;}
  body.js #slider  .items .item-4 p, #banner .items .item-4 p {width:550px;}

  body.js #slider  .banner-signup { position:relative; top:-20px; left:-20px; margin:20px 0 0; display:block; float:right; width:100px; height:41px; background: top left no-repeat url(../images/banners/sign-up.png);}
  body.js #slider  .banner-tour { position:relative; top:-20px; left:-20px; margin:20px 15px 0 0; display:block; float:right; width:73px; height:43px; background: top left no-repeat url(../images/banners/tour.png);}

  body.js #slider  .items .item-1 p a.banner-signup { position:relative; top:5px; left:-20px; margin:20px 0 0; display:block; float:right; width:100px; height:41px; background: top left no-repeat url(../images/banners/sign-up.png);}
  body.js #slider  .items .item-1 p a.banner-tour { position:relative; top:5px; left:-20px; margin:20px 15px 0 0; display:block; float:right; width:73px; height:43px; background: top left no-repeat url(../images/banners/tour.png);}

  body.js #slider  .items .item-3 p a.banner-signup { position:relative; top:-27px; left:-43px; margin:20px 0 0; display:block; float:right; width:100px; height:41px; background: top left no-repeat url(../images/banners/sign-up.png);}
  body.js #slider  .items .item-3 p a.banner-tour { position:relative; top:-27px; left:-43px; margin:20px 15px 0 0; display:block; float:right; width:73px; height:43px; background: top left no-repeat url(../images/banners/tour.png);}

Есть ли способ, которым я могу перестать взрывать этот слайдер?

Ответы [ 2 ]

0 голосов
/ 19 декабря 2010

Причиной взрыва ползунка является оператор php include, который я использую около 20 в настоящее время.Я опускаю их, и слайдер загружается отлично.

0 голосов
/ 07 ноября 2010

Я думаю, что вы должны здесь сделать, просто спрятать ползунок с классом .hidden с display:none, пока jQuery.ready(…) не получит триггер, и сделать слайдер видимым после его инициализации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...