sp-magic.de/bower_components/flip/demo/flip-with-swipebox/index.html

56 lines
2.5 KiB
HTML
Raw Normal View History

2016-11-22 22:53:50 +00:00
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.3.0.2/css/swipebox.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="front">
<h2>Flip with Swipebox</h2>
<section>
<a class="thumb" rel="gallery-1" href="http://swipebox.csag.co/images/image-1.jpg" title="Fog">
<img src="http://swipebox.csag.co/images/image-1.jpg" alt="image">
</a>
<a class="thumb" rel="gallery-1" href="http://swipebox.csag.co/images/image-2.jpg" title="City">
<img src="http://swipebox.csag.co/images/image-2.jpg" alt="image">
</a>
<a class="thumb" rel="gallery-1" href="http://swipebox.csag.co/images/image-3.jpg" title="Street">
<img src="http://swipebox.csag.co/images/image-3.jpg" alt="image">
</a>
<a class="thumb" rel="gallery-1" href="http://swipebox.csag.co/images/image-4.jpg" title="Mustache Guy">
<img src="http://swipebox.csag.co/images/image-4.jpg" alt="image">
</a>
</section>
<p>When a <a href="http://brutaldesign.github.io/swipebox/">Swipebox</a> is used on
a card animated with Flip, the Swipebox fails, as can be seen in this demo when
we use version 1.0.1 of Flip. If we apply the patch the issue is fixed.</p>
<p>Click on the thumbnails. A Swipebox <i>should</i> open.</p>
</div>
<div class="back">
<h2>Flip with Swipebox</h2>
<p>The problem is caused by Flip disabling the bubbling of click
events on any links that are contained inside the element to be flipped,
as can be seen in lines 80-82 of the
<a href="https://github.com/nnattawat/flip/blob/v1.0.1/src/flip.js">source code</a>.</p>
<p>This code was written to prevent the card from flipping when buttons and
links on the card are pressed. However, preventing event bubling is
<a href="https://css-tricks.com/dangers-stopping-event-propagation/">dangerous</a>.</p>
<p>The better solution is to ignore those events that you are not interested in.</p>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.3.0.2/js/jquery.swipebox.min.js"></script>
<script src="../../dist/jquery.flip.min.js"></script>
<script>
$(document).ready(function() {
$('.card a').swipebox();
$('.card').flip();
});
</script>
</body>
</html>