如何自定义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替换默认值来更改图像大小和间距。这里是我的代码（注意width和height属性）：

$('#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>