JCoverFlipのサイズをカスタマイズするには？

Question

私は最近、私のウェブサイトにJCoverflipを実装しようとし始めていると私は現在、Current Implementation

は、しかし、私は私ではなく、これらの小さいのスクリーンショットを使用することができますので、カバーのサイズをカスタマイズできるようにしたい、このリンクに表示されているものを持っていますカバー。私は彼らのウェブサイト上のいくつかのカスタマイズ文書を提供されています：Customization Optionsしかし、私はイメージやコンテナのサイズやスタイルを使用する方法がわかりません。提供され、使用される

現在のCSSスタイルは以下の通りです：私は付属のマニュアルを使用する方法が混乱しているよう

 .ui-jcoverflip { 
    position: relative; 
    } 

    .ui-jcoverflip--item { 
    position: absolute; 
    display: block; 
    } 

    /* Basic sample CSS */ 
    #flip { 
    height: 200px; 
    width: 630px; 
    margin-bottom: 50px; 
    } 

    #flip .ui-jcoverflip--title { 
    position: absolute; 
    bottom: -30px; 
    width: 100%; 
    text-align: center; 
    color: #555; 
    } 

    #flip img { 
    display: block; 
    border: 0; 
    outline: none; 
    } 

    #flip a { 
    outline: none; 
    } 


    #coverflowwrapper { 
    height: 300px; 
    width: 630px; 
    overflow: hidden; 
    position: relative; 
    margin:0 auto; 
    } 

    .ui-jcoverflip--item { 
    cursor: pointer; 
    } 

    #scrollbar { 
    position: absolute; 
    left: 20px; 
    right: 20px; 
    display:block; 

    } 

誰かが助けてくださいもらえますか？

ご協力いただき誠にありがとうございます。

Answer 1

jCoverflipのbeforeCss, afterCss and currentCssを使用してデフォルト値を無効にすることで、イメージのサイズと間隔を変更できます。ここに私のコードは、（幅と高さの属性に注目してください）です。

$('#flip').jcoverflip({ 
     time: 300, // fade time 
     beforeCss: function(el, container, offset){ 
      return [ 
       $.jcoverflip.animationElement(el, { left: (container.width()/2 - 280 - 190 *offset)+'px', bottom: '20px' }, { }), 
       $.jcoverflip.animationElement(el.find('img'), { opacity: 0.7, width: '150px', height: '84px' }, {}) 
      ]; 
     }, 
     afterCss: function(el, container, offset){ 
      return [ 
       $.jcoverflip.animationElement(el, { left: (container.width()/2 + 180 + 190 *offset)+'px', bottom: '20px' }, { }), 
       $.jcoverflip.animationElement(el.find('img'), { opacity: 0.7, width: '150px', height: '84' }, {}) 
      ]; 
     }, 
     currentCss: function(el, container){ 
      return [ 
       $.jcoverflip.animationElement(el, { left: (container.width()/2 - 100)+'px', bottom: '-10px' }, { }), 
       $.jcoverflip.animationElement(el.find('img'), { opacity: 1.0, width: '250px', height: '141px' }, { }) 

      ]; 
     } 
    }); 

、ここでは私のhtmlです：

 <div id="flip"> 
      <div class="flip_item"> 
       <img src="img/1.jpg" /> 
       <p class="caption">Product 3</p> 
       <div class="info"> 
        <div class="descr">Vius, quacins id urna et augue facilisis dictum. </div> 
       </div> 
      </div> 
      <div class="flip_item"> 
       <img src="img/2.jpg" /> 
       <p class="caption">Product 5</p> 
       <div class="info"> 
        <div class="descr">Nullad urna et augue facilisis dictum. </div> 
       </div> 
      </div> 
     </div>