Flipbox
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Create Fliping Cards
Create a Flibox by specifying the front and the back by setting the
options front and back when instantiating flip. You can use any Markup between the
front and the back selectors and the Flipbox will work.
Front Side
Some quick example text to build on the card title and make up the bulk of the card's content.
Back Side
Some quick example text to build on the card title and make up the bulk of the card's content.
Flip On X-Axis
Back Side
Some quick example text to build on the card title and make up the bulk of the card's content.
Flip On Y-Axis
Trigger On Click
Simple set the flip trigger on 'click' instead
of
'hover'
Click Me!
Back Side
Some quick example text to build on the card title and make up the bulk of the card's content.
Manual Trigger On Click
<!-- Flipbox 1 -->
<div class = "col-lg-4 my-3 text-center">
<div id = "flipBox1" class = "wdpkFlipbox">
<!-- Flipbox 1 Front -->
<div id = "front" class = "card py-3">
<div class = "card-body text-center">
<h5 class = "card-title">Front Side</h5>
<p class = "card-text">Some quick example text to build on the card
title and make up
the bulk of the card's content.</p>
</div>
</div>
<!-- /Flipbox 1 Front -->
<!-- Flipbox 1 Back -->
<div id = "back" class = "card bg-primary py-3">
<div class = "card-body text-center">
<h5 class = "card-title text-white ">Back Side</h5>
<p class = "card-text text-white">Some quick example text to build on
the card
title and make up
the bulk of the card's content.</p>
</div>
</div>
<!-- /Flipbox 1 Back -->
</div>
<h5 class = "my-3">Flip On X-Axis</h5>
</div>
<!-- /Flipbox 1 -->
<!-- Flipbox 2 -->
<div class = "col-lg-4 my-3 text-center">
<div id = "flipBox2" class = "wdpkFlipbox">
<!-- Flipbox 2 Front -->
<div id = "front" class = "card">
</div>
<!-- /Flipbox 2 Front -->
<!-- Flipbox 2 Back -->
<div id = "back" class = "card bg-primary py-3">
<div class = "card-body text-center">
<h5 class = "card-title text-white ">Back Side</h5>
<p class = "card-text text-white">Some quick example text to build on
the card
title and make up
the bulk of the card's content.</p>
</div>
</div>
<!-- /Flipbox 2 Back -->
</div>
<h5 class = "my-3">Flip On Y-Axis</h5>
</div>
<!-- /Flipbox 2 -->
<!-- Flipbox 3 -->
<div class = "col-lg-4 my-3 text-center">
<div id = "flipBox3" class = "wdpkFlipbox" style="cursor: pointer;">
<!-- Flipbox 3 Front -->
<div id = "front" class = "card py-3" >
<div class = "card-body text-center">
<h5 class = "card-title">Trigger On Click</h5>
<p class = "card-text mb-3">Simple set the flip trigger on <code>'click'</code> instead of
<code>'hover'</code></p>
<h5 class="text-primary">Click Me!</h5>
</div>
</div>
<!-- /Flipbox 3 Front -->
<!-- Flipbox 3 Back -->
<div id = "back" class = "card bg-primary py-3">
<div class = "card-body text-center">
<h5 class = "card-title text-white ">Back Side</h5>
<p class = "card-text text-white">Some quick example text to build on
the card
title and make up
the bulk of the card's content.</p>
</div>
</div>
<!-- /Flipbox 3 Back -->
</div>
<h5 class = "my-3">Manual Trigger On Click</h5>
</div>
<!-- /Flipbox 3 -->
/* No Changes Made To Default Variables */
jQuery(document).ready(function ()
{
if (jQuery(".wdpkFlipbox").length !== 0)
{
let obj = {
selectorID: 'flipBox1',
axis: 'x',
trigger: 'hover', //'click', 'hover', 'manual' - Event that activates the flip action. Using manual means that you have to activate it via javascript. When this is set to click and the tap event is available (through e.g. jQuery Mobile or jQuery Touch Events), flip will bind to that instead of to click as a regular click will also instantaneously trigger a tap event, but not vice-versa.
reverse: false, // Set to true if you want to reverse the direction of the flip.
speed: 500,
front: '#front', // Selector class or ID for Front of the flipbox
back: '#back', // Selector class or ID for back of the flipbox
};
let obj2 = {
selectorID: 'flipBox2',
axis: 'y',
trigger: 'hover', //'click', 'hover', 'manual' - Event that activates the flip action. Using manual means that you have to activate it via javascript. When this is set to click and the tap event is available (through e.g. jQuery Mobile or jQuery Touch Events), flip will bind to that instead of to click as a regular click will also instantaneously trigger a tap event, but not vice-versa.
reverse: false, // Set to true if you want to reverse the direction of the flip.
speed: 500,
front: '#front', // Selector class or ID for Front of the flipbox
back: '#back', // Selector class or ID for back of the flipbox
};
let obj3 = {
selectorID: 'flipBox3',
axis: 'y',
trigger: 'click', //'click', 'hover', 'manual' - Event that activates the flip action. Using manual means that you have to activate it via javascript. When this is set to click and the tap event is available (through e.g. jQuery Mobile or jQuery Touch Events), flip will bind to that instead of to click as a regular click will also instantaneously trigger a tap event, but not vice-versa.
reverse: false, // Set to true if you want to reverse the direction of the flip.
speed: 500,
front: '#front', // Selector class or ID for Front of the flipbox
back: '#back', // Selector class or ID for back of the flipbox
};
require(["app/shortcodes/wdpkFlip"], function (e)
{
e.publicCall(obj);
e.publicCall(obj2);
e.publicCall(obj3);
});
}
});
