<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>jQuery Flipping Gallery Plugin </
title
>
<
link
href
=
rel
=
'stylesheet'
type
=
'text/css'
>
<
link
href=
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"
</
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
>