jQuery Flipping Gallery Plugin
Last Updated :
30 Jul, 2024
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.
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Flipping Gallery Plugin </title>
<link href=
'http://fonts.googleapis.com/css?family=Open+Sans:300, 400, 700'
rel='stylesheet' type='text/css'>
<link href=
'http://fonts.googleapis.com/css?family=Noto+Serif:400,
700, 400italic, 700italic'
rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico'
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;
}
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;
}
</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.
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Flipping Gallery Plugin </title>
<link href=
'http://fonts.googleapis.com/css?family=Open+Sans:300, 400, 700'
rel='stylesheet'
type='text/css'>
<link href=
'http://fonts.googleapis.com/css?family=Noto+Serif:400,
700, 400italic, 700italic'
rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico'
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;
}
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;
}
</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.
JavaScript
$(document).ready( function() {
$(".gallery").flipping_gallery({
flipDirection: "top",
autoplay: false
});
});
Output:
Similar Reads
jQuery Page Piling Plugin jQuery pagePiling.js plug-in is a rich feature available for programmers for piling more than one layout section, one over the other, and accessing each page by URL or mouse scrolling or side bullets navigation. This feature provides all type of smooth vertical, horizontal, and side navigations to t
5 min read
jQuery | Flickerplate Plugin jQuery provides Flickerplate plugin that helps our programmers to create sliders for websites that can cycle through a list of background images along with dot navigation feature and animated arrows. The plugin consists of many more libraries that are responsible for touch detections and events such
5 min read
jQuery Multiscroll Plugin jQuery provides multiscroll.js plugin which helps programmers to create split web pages along with divided multiple vertical scrolling panels.Note: Please download the jQuery multiscroll plugin to your working folder and include the required files in the head section of your code as shown below. Dow
3 min read
jQuery RowGrid Plugin jQuery provides a very simple, user-friendly and responsive rowGrid plugin that helps programmers to display images in a straight row. It is very lightweighted and supports infinite scrolling feature. Real examples of rowGrid are Google+ images or Google image search that appears in a straight row g
4 min read
jQuery Alertify Plugin jQuery framework provides alertify.js plugin that provides pre-designed customizable notification system along with interactive browser dialogs. This extensible and themeable plugin is very useful for developers providing an optimized version of alert messages with stacking up to feature. This small
5 min read
jQuery Image ProgressBars Plugin In this article, we will learn how to implement image ProgressBar feature using the jQuery Image ProgressBar plugin. Note: Please download the jQuery Image ProgressBar plugin in the working folder and include the required files in the head section of your HTML code. <link href=â€progressbar.css†r
2 min read
jQuery DrawSVG Plugin SVG or Scalar Vector Graphics is Extended Markup Language-based graphics supporting 2 dimensional animations of images enhancing interactiveness. The specifications of SVG are open standards by World Wide Web Consortium defined in XML text files. These files can be changed or created with any drawin
4 min read
jQuery Tagsort Plugin jQuery provides Tagsort plugin that is used for displaying tags or filter elements based on different tags in a DOM. The plugin takes data-attributes of HTML page structure and dynamically creates user-friendly tags used for filtering elements. The filtration of elements are done in many ways that a
9 min read
jQuery Logos Distort Plugin The jQuery provides LogosDistort plugin which helps in creating or animating a parallax environment for 3D scenes in the user browser. It uses full-page matrix3D perspective logos distortions for transforming base on mouse movement. You have to download the required files in the working folder so th
4 min read
jQuery Filer Plugin jQuery provides a quick jQuery Filer uploader plugin for easy implementation of uploading the files. It provides features like instant uploading of files, file append, file removal, multiple selections, drag and drop support along with other file validations.Download the required files to include it
2 min read