8

jQueryサイクルのスライドショーを含むページでJavaScriptウィンドウのサイズ変更スクリプトを実行しようとしていますが、うまくいかないように見えるいくつかのバグにぶつかっています。ページの読み込み時に最初の画像のサイズを変更しますが、後続のスライドの新しい高さ/幅の属性を忘れます。jQuery を使用する前後にこれらを再度設定することはできますが、サイズを変更する前に、画像は常にフル サイズで一瞬一瞬表示されます。

jQuery.cycle はスライドを元のサイズにサイズ変更していますか? もしそうなら、どうすればこれを止めることができますか?

$(document).ready(function () {
  $('.slideshow').cycle({
    fx: 'fade',
    speed: 200,
    timeout: 1000,
    pause: 1,
    before: function (currSlideElement, nextSlideElement, options, forwardFlag) {
      resize();
    },
    after: function (currSlideElement, nextSlideElement, options, forwardFlag) {
      resize();
    }
  });

  $('.slideshow').find('img').css("height", "0");
  $('#image').hide().idle(1000).fadeIn();
  resize();
});

$(window).resize(function () {
  resize();
});

function resize() {

  var theheight = window.innerHeight;
  var thewidth = window.innerWidth;

  var imageheight = theheight - 200;

  if (imageheight > 540) {
    imageheight = 540;
  }
  if (imageheight < 300) {
    imageheight = 300;
  }

  var imagewidth = imageheight / 0.6585365;

  $(".slide").css("height", imageheight);
  $(".slide").css("width", imagewidth);
  $(".slide").attr("height", imageheight);
  $(".slide").attr("width", imagewidth);

}
4

5 に答える 5

18

サイクルは、最初に呼び出したときにスライド コンテナー要素の幅と高さを一度格納し、サイズ変更スクリプトが何を行っていても、着信スライドをそれらの寸法に設定するように見えます。

私は最近同じ問題を抱えていました：オプションの組み合わせ

$slideshow.cycle({ 
  containerResize: false,
  slideResize: false,
  fit: 1
});

と

.yourslide { width: yourwidth !important }

私のために働いた。重要なのは適合性でした:1 - ドキュメントが説明する方法では、まさに私が望んでいないもののように見えますが、望ましい効果が得られました。残念ながら説明できません。

于 2011-06-20T20:13:01.530 に答える
2

これは、同様の状況で私のために機能しました：

$(window).resize(function(){
$('.lr-slider').each(function(){
    newWidth = $(this).parent('div').width()
    $(this).width(newWidth)
    $(this).children('div').width(newWidth)
})
})

注意点：

  1. .lr-sliderは、スライドを含むdivです。これは、複数のsldieshowをサポートするためのamdeです。
  2. この場合、.lr-sliderはcssの親要素から幅を継承するため、ウィンドウサイズ変更イベントのjQueryでこれを再作成しています
  3. スライドはすべてdiv要素であり、クラスやIDは含まれていません。クラスを明示的に参照できるように、これを自分で使用するためにもっとトラゲッティングすることをお勧めします。
于 2011-06-16T15:27:34.773 に答える
0

これはあなたのために働きますか？

オプションで、これを追加します。 

cssBefore: {  
    top:  0, 
    left: 0, 
    width: wwidth, 
    height: wheight,  
    zIndex: 1  
}

また、サイズ変更の場合は、サイズ変更で設定される変数をいくつか追加して一致させます。

var wheight, wwidth;
function resize() {
  wheight = Math.Min(window.innerHeight - 200, 540);
  wwidth = Math.Min(window.innerWidth, 300) / 0.6585365;
  $(".slide").width(wwidth).height(wheight);
});

これを呼び出す必要はありませんbefore:。after:ロード時に一度だけ呼び出す必要があり$(window).resize()ます。

于 2010-02-02T12:25:56.353 に答える
0

オプションを使用してサイクルに挿入したものに関係なく（「100％」または「自動」を試しました）、cssを介してこの問題を解決しました

.slideshowContainer {
    width: auto !important;
}

ところで。100% !important は同じトリックを行います。そのため、.slideshowContainer は周囲の要素の 100% の幅を取ります..

于 2012-07-24T10:41:37.203 に答える
0

ありがとうニック、それは正しい方向への一歩だった. 私はそれを以下で動作させることができました。奇妙なことに、animIn: height/width が cssBefore とは異なる値に設定されていないと機能しません: それに関するアイデアはありますか?

 $('.slideshow').cycle({ 
    fx: 'custom', 
    speed: 200,
    timeout : 1000,
    pause:  1,
    cssBefore: {  
       left: 0,  
       top:  0,  
       width: imagewidth,  
       height: imageheight,  
       opacity: 0, 
       zIndex: 1 
   }, 
   animOut: {  
       opacity: 0  
   }, 
   animIn: {  
       left: 0,  
       top:  0,  
       width: imagewidth +1,  
       height: imageheight +1,  
       opacity: 1, 
       zIndex: 1  
   }, 
   cssAfter: {  
       zIndex: 0 
   }
});
于 2010-02-02T14:45:56.697 に答える