jQuery |翻转图库插件

jQuery 提供了一个简单、美观和交互式的翻转画廊插件，它可以帮助程序员使用自动播放功能在不同方向翻转画廊中的许多图像。该插件是通过使用 HTML 标记和简单的 javascript函数调用来实现的。

请在您的工作文件夹中下载翻转画廊插件，并将所有相关文件包含在您的登陆网页的头部部分。
下载链接： https : //github.com/peachananr/flipping_gallery

示例 1：在以下程序中，显示了简单调用flipping_gallery()函数的基本用法。提供上一个和下一个按钮用于处理向前或向后移动的翻转图像。

    
    jQuery Flipping Gallery Plugin 
          
    
    
    
    
      
    
     
    
      
  
    html
    {
      height: 90%;
    }
    body
    {
      padding: 0;
      text-align: center;
      font-family: 'open sans';
      position: relative;
      margin: 0;
      height: 80%;
    }
      
    .wrapper
    {
        height: auto !important;
        height: 60%;
        margin: 0 auto; 
        overflow: hidden;
    }
      
    a 
    {
      text-decoration: none;
    }
             
     .btn
     {
      display: inline-block;
      border: 4px solid black;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      background: green;
      display: inline-block;
      line-height: 100%;
      padding: 0.6em;
      text-decoration: none;
      color: #0d2633;
      width: 100px;
      line-height: 100%;
      font-size: 14px;
      font-family: open sans;
      font-weight: bold;
      border: none;
      margin-left: 10px;
    }
        
    .btns {
      width: 200px;
      margin: 20px auto;
      
    }
         
    .page-container {
      max-width: 700px;      
      margin: auto;
      position: relative;
    }
        
    .gallery {
      height: 300px;
      width: 500px;     
      margin: 150px auto 100px;
    } 
      
    img
    {
     border : 1px solid black;
    }
  
    
    
      $(document).ready( function() {
        $(".gallery").flipping_gallery();
          
        $(".next").click(function() {
          $(".gallery").flipForward();
          return false;
        });
        $(".prev").click(function() {
          $(".gallery").flipBackward();
          return false;
        });
      });
          
    


    
           GeeksForGeeks - jQuery Flipping gallery
                  
              
           
        
          
          
          
          
          
          
          
          
          
                    
          
          
          
          
          
                   
              
  
        
          Previous
          Next
        
      
     
  

输出 ：

例2：在下面的程序中，各种选项的设置是通过javascript函数调用实现的。程序员可以根据应用的需要使用各种选项。请阅读每个选项值的注释并相应地使用。程序员可以利用data-caption属性来添加字幕。

    
    jQuery Flipping Gallery Plugin 
          
    
    
    
    
      
    
    
    
    
  
    html
    {
      height: 90%;
    }
    body
    {
      padding: 0;
      text-align: center;
      font-family: 'open sans';
      position: relative;
      margin: 0;
      height: 80%;
    }
      
    .wrapper
    {
        height: auto !important;
        height: 60%;
        margin: 0 auto; 
        overflow: hidden;
    }
      
    a 
    {
      text-decoration: none;
    }
             
     .btn
     {
      display: inline-block;
      border: 4px solid black;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      background: green;
      display: inline-block;
      line-height: 100%;
      padding: 0.6em;
      text-decoration: none;
      color: #0d2633;
      width: 100px;
      line-height: 100%;
      font-size: 14px;
      font-family: open sans;
      font-weight: bold;
      border: none;
      margin-left: 10px;
    }
        
    .btns {
      width: 200px;
      margin: 20px auto;
      
    }
         
    .page-container {
      max-width: 700px;      
      margin: auto;
      position: relative;
    }
        
    .gallery {
      height: 310px;
      width: 500px;     
      margin: 150px auto 100px;
    } 
      
    img
    {
     border : 1px solid black;
    }
     .navigation {
      margin-bottom: 150px;
    }
    
    
      $(document).ready( function() {
        $(".gallery").flipping_gallery({
/* The options for the flipping direction are "forward", or
 "backward". Default value is forward.*/
           direction: "forward", 
  
// Default selector is set for generation of the gallery.
           selector: "> a", 
  
/* Spacing between each photo in pixels in the gallery. 
    Default value is 10.*/
           spacing: 20, 
  
// Limit the number of photos in the viewport.
           showMaximum: 5, 
  
// Set the scrolling behavior. Default value is true.
           enableScroll: true,
  
 /* Direction to flip picture. Options are "left", 
"right", "top", "bottom". Default value is bottom.*/
           flipDirection: "left", 
  
// Autoplay time interval. Default value is false.
           autoplay: 1200 
        });
          
        $(".next").click(function() {
          $(".gallery").flipForward();
          return false;
        });
        $(".prev").click(function() {
          $(".gallery").flipBackward();
          return false;
        });
      });
          
    


    
           GeeksForGeeks - jQuery Flipping gallery
                  
              
           
        
          
          
  
          
          
  
          
          
  
          
          
  
          
          
  
          
          
  
          
          
  
          
                   
              
  
        
          Previous
          Next
        
      
  

输出：

在下面的脚本中，显示了在顶部方向翻转的选项设置。程序员也可以类似地利用其他选项以及不同的翻转选项。

$(document).ready( function() {
    $(".gallery").flipping_gallery({
         flipDirection: "top",
         autoplay: false
    });
});

输出：