0

http://malsup.com/jquery/cycle/basic.htmlからわずかに変更されたコードを使用して、ホームページで jquery サイクル プラグイン (スライド ショー) を使用しています。

ディスプレイに合わせて画像を拡大縮小したい (ほとんどの場合、モバイルの場合、方向変更の処理もクールですが、何でも) jquery または css を使用してこれを行うことを望んでいましたが、統合できませんでした。これについての助けをいただければ幸いです。

私は、slideResize と containerResize をゼロと 1 のすべての可能な組み合わせに変更しようとしましたが、CSS で両方を試してみました。また、「幅:100% !重要; 高さ:100% !重要;」および他の多くの順列と 2 つの組み合わせ。さらに、さまざまな画面サイズに合わせて @media クエリのサイズを変更しようとしましたが、Firefox、モバイル サファリ、Android ICS ブラウザでは機能しません。すべてがスケーリングされないか、一部のデバイスではスケーリングされますが、短いランダムな瞬間を除いて画像が表示されないか、画像を保持する div の高さがすべて失われ、画像が他の要素の上に浮かびます (absolute のスタイル ;p)

これらのjqueryの例をスライドショーで動作させようとしましたが、それらも取得できません(スライドが他のdivスペースに重なるか、モバイルで水平スクロールを作成します): jsfiddle dot net/nottrobin/9Pbdz/ & stackoverflow /questions/16140278/jquery-image-resize-when-window-is-resized &太陽のある別のもの(今は見つかりません)も完全に機能しました... jqueryサイクルでは機能しなかったことを除いて私が使用しているプラ​​グインコード...どんな助けも大歓迎です。

jqueryスクリプトへのリンクは次のとおりです（サーバーにコピーして縮小しました）：

http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js

ここに私のjQueryコードがあります:

    $(document).ready(function() {

    $('.slideshow1').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
        delay: -4000 
    });
        $('.sls0').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
        delay: -4000 
    });
        $('.sls1').cycle({
        fx: 'turnDown', // choose your transition type, ex: fade, scrollUp, shuffle, etc..
        delay: -2000 
    });
            $('.sls2').cycle({
        fx: 'shuffle', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        easing: 'easeOutBack', 
        delay: -2000 
    });
            $('.sls3').cycle({
    fx:    'curtainX', 
    sync:  false, 
        delay: -2000 
    });
                $('.sls4').cycle({
    fx:     'scrollDown', 
    easing: 'easeOutBounce', 
    delay:  -2000  
    });


                $('.sls5').cycle({
    fx:     'toss,fadeZoom,fade,blindX,cover,scrollUp,scrollDown,shuffle,turnDown,turnRight,turnLeft,scrollLeft,scrollRight,scrollHorz', 
timeout:700,
slideResize:   1,
containerResize: 1,
delay:  -2000  
});
});

HTML コード:

     <div id="logo">

            <center><div id="cycle_slide" class="sls5" style="">


             <img src="./slides/ring1.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;">

<img src="./slides/ring2.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;"> 

<img src="./slides/amps1.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;">


            <img src="./slides/guitars1.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;">
                        <img src="./slides/hand1.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;"> 


<img src="./slides/gold-bars.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;"> 
        </div></center> 

      </div>
      <div id="contentarea">
           This is example content for testing etc....
      </div>
4

1 に答える 1

0

さて、私が自分の質問をして答えたのはこれが2回目です。

別の問題を解決しようとしているときにいくつかの解決策を見つけました (その問題に注目してください!)。

これらのスライダーはすべて MIT (または duel MIT L/GPL) ライセンスを取得しており、表示サイズに適応します (モバイル フレンドリー)。

swipejs.com

photoswipe.com

www.idangero.us/sliders/swiper/

sequencejs.com

これが他の誰かにも役立つことを願っています。

于 2013-08-12T08:27:19.270 に答える