jquery.rotateプラグインとjquery.cycleプラグインを一緒に使用する方法

Question

私はjQueryサイクルプラグインがうまくいく、循環が必要な一連の写真（実際には3シリーズ）があります。

私の問題は、「散らばった」外観を実現するために、ページの読み込み時にさまざまな方向にそれぞれ数度回転させたいということです。 jQuery Rotateもこれをうまくやっています...私の問題は、回転とサイクルが同じページで発生することができないということです。

解決策がサイクルコード自体内で画像を回転させるように見えるが、それは（少なくとも利用可能な時間に）私の限られた能力を超えているように見える。他の誰かがこれを試しましたか？任意のポインタがありますか？

Photoshopでイメージをあらかじめ回転させることはできますが、それは理想的ではありません。js rotateを使うと、サイトの所有者が新しいディレクトリを単にダンプするだけで簡単に写真を更新できます。 Photoshop otohは、それぞれを回転させ、jpgから透明度をサポートする形式（またはさらに悪いことに、適切な背景色を適切な場所に複製する）に変換することを意味します。

私はこのようなjquery.cycle ... htmlの事前ロード第一3枚の画像の標準を使用しています：

<div id="slideshow" class="pics"> 
    <img class="rotate" src="images/image1.jpg" width="100" height="100" /> 
    <img class="rotate" src="images/image2.jpg" width="100" height="100" /> 
    <img class="rotate" src="images/image3.jpg" width="100" height="100" /> 
</div> 

そして、私はサイクルをキックオフ通常のJSがあります。

$(document).ready(function() {  

    var stack = []; 

    var imagesPath = '../images/image'; 
    if(window.location.href.indexOf('\/html\/') == -1) 
     imagesPath = 'images/image'; 

     for (var i = 0; i < 8; i++) { 
     var img = new Image(100,100); 
     img.src = imagesPath + i + '.jpg'; 
     $(img).bind('load', function() { 
      stack.push(this); 
     }); 
    } 

    // start slideshow 
    $('#slideshow').cycle({ 
     timeout: 600, 
     before: onBefore , 
     speed: 2000 
    }); 

    // add images to slideshow 
    function onBefore(curr, next, opts) { 
    if (opts.addSlide) // <-- important! 
      while(stack.length) 
     opts.addSlide(stack.pop()); 
    }; 
}); 

を

JSがjQuery.rotateがあるとこれらの画像の第一回転させる：私はサイクリングが、nothiを無効にした場合

$('.rotate')[0].rotateLeft(5); 

上記の作品をサイクリングがオンのときに発生します。 以下の配列リファレンスを削除すると、表示されているイメージが回転し、スライドショーから削除され、ページ上に残ります。

$('.rotate').rotateLeft(5); 

jvery.rotateはキャンバスを使用しているので、画像上でのみ動作することが理想的です。私が提供できる情報があれば教えてください。あなたの興味に感謝します！

Answer 1

セレクタを変換CSS3を使用してみてください：

-webkit-transform: rotate(-15deg); 

$('.rotate').css({'-webkit-transform' : 'rotate(-5deg)' }); 

Answer 2

jQueryのサイクルは、スライドにそれらを有効にするために、コンテナの直接の子画像にCSSの多くを追加します。スライドに画像を散布したい場合は、各スライドの内容をタグにラップする必要があります。次に、これらの要素が実際にはslideExprオプションを使用してスライドされていることをJQueryサイクルに伝えます。

Htmlの

<div id="slideshow"> 
    <div class="slide"> 
     <img src="1.png" /> 
     <img src="2.png" /> 
     <img src="3.png" /> 
    </div> 

    <div class="slide"> 
     <img src="1.png" /> 
     <img src="2.png" /> 
     <img src="3.png" /> 
    </div> 
</div> 

Javascriptを

$('#slideshow').cycle({ 
    slideExpr: '.slide', 
    timeout: 600 
}); 

これは、jQueryのサイクルは、それがラッパーにスタイルだ適用できるようになります、とjQueryはなく、各スライド内の内容に回転を適用するために回転させますお互いのつま先を踏んで

ここにJQuery Cycle optionsの完全なリストがあります。