Open In App

jQuery | Flipping Gallery Plugin

Last Updated : 28 May, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

jQuery provides a simple, beautiful, and interactive flipping gallery plugin which helps programmers to flip many images in a gallery in various directions with the autoplay feature. The plugin is implemented by using HTML markups and simple javascript function call.

Please download the Flipping gallery plugin in your working folder and include all the relevant files in the head section of your landing web page.
Download link: https://github.com/peachananr/flipping_gallery

Example 1: In the following program, the simple call of flipping_gallery() function is shown for basic usage. Previous and Next buttons are provided for handling of flipping images in forward or backward movements.




<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Flipping Gallery Plugin </title>
          
    <link href=
          rel='stylesheet' type='text/css'>
    <link href=
'http://fonts.googleapis.com/css?family=Noto+Serif:400, 
                     700, 400italic, 700italic'
          rel='stylesheet' type='text/css'>
                rel='stylesheet'
                type='text/css'>
    <link href='flipping_gallery.css' 
          rel='stylesheet' type='text/css'>
      
    <script type="text/javascript" 
            src="http://code.jquery.com/jquery-1.9.1.js">
     </script>
    <script type="text/javascript" 
            src="jquery.flipping_gallery.js">
      </script>
  <style>
    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;
    }
      
    
    {
      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;
    }
  
    </style>
    <script>
      $(document).ready( function() {
        $(".gallery").flipping_gallery();
          
        $(".next").click(function() {
          $(".gallery").flipForward();
          return false;
        });
        $(".prev").click(function() {
          $(".gallery").flipBackward();
          return false;
        });
      });
          
    </script>
</head>
<body>
    <h3 style="color:green">
           GeeksForGeeks - jQuery Flipping gallery
     </h3>             
  <div class="wrapper">            
      <div class="page-container">     
        <div class="gallery">
          <a href="#" data-caption="">
          <img src="images/geeksimage1.png" border="2"></a>
          <a href="#" data-caption="">
          <img src="images/geeksimage2.png" border="2"></a>
          <a href="#" data-caption="">
          <img src="images/geeksimage3.png" border="2"></a>
          <a href="#" data-caption="">
          <img src="images/gfg2.jpg" border="2"></a>
          <a href="#" data-caption="">
          <img src="images/gfg6.png" border="2"></a>          
          <a href="#" data-caption="">
          <img src="images/background.jpg" border="2"></a>
          <a href="#" data-caption="">
          <img src="images/background2.jpg" border="2"></a>
          <a href="#" data-caption="">
          <img src="images/background3.jpg" border="2"></a>         
        </div>      
  
        <div class="navigation">
          <a href="#" class="btn prev">Previous</a>
          <a href="#" class="btn next">Next</a>
        </div>
      </div>
     
  </div>
</body>
</html>


Output :

Example 2: In the following program, various options setting are implemented using javascript function call.The programmer can make use of various options depending on the application’s requirement. Please read the comments for each option values and use accordingly. Programmer can make use of data-caption attribute to add captions.




<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Flipping Gallery Plugin </title>
          
    <link href=
          rel='stylesheet'
          type='text/css'>
    <link href=
'http://fonts.googleapis.com/css?family=Noto+Serif:400,
                    700, 400italic, 700italic'
          rel='stylesheet' type='text/css'>
          rel='stylesheet' type='text/css'>
    <link href='flipping_gallery.css' 
          rel='stylesheet' type='text/css'>
      
    <script type="text/javascript" 
            src="http://code.jquery.com/jquery-1.9.1.js">
    </script>
    <script type="text/javascript" src="jquery.flipping_gallery.js">
    </script>
  <style>
    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;
    }
      
    
    {
      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;
    }
    </style>
    <script>
      $(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;
        });
      });
          
    </script>
</head>
<body>
    <h3 style="color:green">
           GeeksForGeeks - jQuery Flipping gallery
     </h3>             
  <div class="wrapper">            
      <div class="page-container">     
        <div class="gallery">
          <a href="#" data-caption="GeeksForGeeks Logo">
          <img  src="images/geeksimage1.png" border="2"></a>
  
          <a href="#" data-caption="Learning computer science!">
          <img  src="images/geeksimage2.png" border="2"></a>
  
          <a href="#" data-caption="jQuery is fun.">
          <img src="images/geeksimage3.png" border="2"></a>
  
          <a href="#" data-caption="Geeks week contest">
          <img src="images/gfg2.jpg" border="2"></a>
  
          <a href="#" data-caption="WebTechnology classes">
          <img src="images/gfg6.png" border="2"></a>
  
          <a href="#" data-caption="Going thr links and hyperlinks">
          <img src="images/background.jpg" border="2"></a>
  
          <a href="#" data-caption="HTML fundamentals">
          <img src="images/background2.jpg" border="2"></a>
  
          <a href="#" data-caption="CSS tutorials">
          <img src="images/background3.jpg" border="2"></a>         
        </div>      
  
        <div class="navigation">
          <a href="#" class="btn prev">Previous</a>
          <a href="#" class="btn next">Next</a>
        </div>
      </div>
  </div>
</body>
</html>


Output:

In the following script, the option setting for flipping in top direction is shown. The programmers can similarly make use of other options as well for different flipping options.




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


Output:



Previous Article
Next Article

Similar Reads

JavaScript Gallery Plugin
In this article, we will learn how to implement an image gallery feature using JavaScript Gallery plugin. This plugin is very light-weight and responsive in nature which helps developers for managing photo galleries. Note: Please download the JavaScript Gallery plugin in the working folder and include the required files in the head section of your
2 min read
How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
With the advent of new frameworks in web technologies, it has become quite easy to design and implement feature-rich and responsive web pages. Here, we are going to design a responsive image gallery using HTML, CSS, jQuery, and Bootstrap. Features or Functionalities to implement: Responsive imagesResponsive Grid SystemImage viewer Prerequisites: Ba
3 min read
Create a Photo Gallery with Thumbnail using jQuery
In this article, we are going to learn to create a custom photo gallery with thumbnails using HTML, CSS, and JQuery. We will create the thumbnails for all images and when the user clicks on any thumbnail, it should render as a large image. [caption width="800"] [/caption] By the end of this article, users will be able to create the custom photo gal
3 min read
How to Create a Tab Image Gallery ?
To create a tab image gallery you need to use HTML, CSS, and JavaScript. HTML will make the structure of the body, and CSS will make it looks good. This kind of tab image gallery looks attractive on a website. By using JavaScript you can easily change the displayed pictures from the gallery. Creating Structure: In the HTML section, we will create a
2 min read
How to add filter with Portfolio Gallery using HTML, CSS and JavaScript ?
The portfolio gallery is useful when your website contains different types of content or so many contents. With the help of a portfolio gallery, you can easily display all the contents on your front page to the user. But if user wants some specific contents then we need to attach filters on the portfolio. In this article, we will add filters using
8 min read
How to Create Image Lightbox Gallery using HTML CSS and JavaScript ?
A lightbox gallery is basically used to view the gallery images in detail specifically. You can code the JavaScript to do so but also we can use some downloaded JS and CSS. In this article, we will download the lightbox and attach the JS and CSS files into our code. For our own design satisfaction, we can also use the CSS code as we want. We will d
3 min read
Google AMP amp-lightbox-gallery
The amp-lightbox-gallery component is used to give a lightbox experience for other amp components like amp-carousel, amp-img. Presently only images are supported by amp-lightbox-gallery. Required Script: Importing the amp-lightbox-gallery component into the header. C/C++ Code &lt;script async custom-element=&quot;amp-lightbox-gallery&quot; src=
2 min read
Animated sliding page gallery using framer-motion and React.js
The following approach covers how to create an animated sliding page gallery using framer-motion and ReactJS. Prerequisites: Knowledge of JavaScript (ES6)Knowledge of HTML and CSS.Basic knowledge of ReactJS.Creating React Application And Installing Module: Step 1: Create a React application using the following command: $ npx create-react-app page-g
5 min read
Pure CSS Photo Gallery Layout
To create a Pure CSS Gallery Layout, we can use a grid system. A grid is a set of classes that helps us to divide the width of the screen or display into smaller units and make the website look responsive on various devices. Pure.CSS also comes up with such a grid system. Example 1: In this example, the gallery container is set to display as a grid
3 min read
Animated sliding image gallery using framer and ReactJS
Animated sliding image gallery using Framer and React JS will have some image and show one by one by one with a sliding animation from right to left. Prerequisites:Node.js and NPM React JSReact JS HooksApproach:To design an animated sliding image gallery using Framer in React we will be using the Page and Frame components for showing transitions. T
2 min read