jQuery proporciona un complemento de galería de volteo simple, hermoso e interactivo que ayuda a los programadores a voltear muchas imágenes en una galería en varias direcciones con la función de reproducción automática. El complemento se implementa mediante el uso de marcas HTML y una simple llamada de función de JavaScript.
Descargue el complemento de la galería Flipping en su carpeta de trabajo e incluya todos los archivos relevantes en la sección principal de su página web de destino.
Enlace de descarga: https://github.com/peachananr/flipping_gallery
Ejemplo 1: En el siguiente programa, la simple llamada de la función flipping_gallery() se muestra para uso básico. Los botones Anterior y Siguiente se proporcionan para manejar imágenes invertidas en movimientos hacia adelante o hacia atrás.
<!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>
Producción :
Ejemplo 2: En el siguiente programa, se implementan varias configuraciones de opciones usando una llamada de función javascript. El programador puede hacer uso de varias opciones según los requisitos de la aplicación. Lea los comentarios para cada valor de opción y utilícelos en consecuencia. El programador puede hacer uso del atributo de título de datos para agregar títulos.
<!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>
Producción:
En el siguiente script, se muestra la configuración de la opción para voltear en la dirección superior. Los programadores también pueden hacer uso de otras opciones para diferentes opciones de volteo.
$(document).ready( function() {
$(".gallery").flipping_gallery({
flipDirection: "top",
autoplay: false
});
});
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA