<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Add a main stage. -->
<div lj-type="stage" id="mainstage">
<!-- The layer for the zoom menu. By default the zoomed out state is shown. -->
<div lj-type="layer" lj-default-frame="zoomout" lj-layout="canvas">
<!-- The frame showing everything in the zoomed out state -->
<div lj-type="frame" id="zoomout" lj-fit-to="fixed">
<h1>Abitrage Ipsum Momentum</h1>
<h2>Beware of the Little White Rabbit</h2>
<p>
Click on one of the content frames below to get the details. Swipe to switch between them. Use the menu icon in the frames to get back to the main menu.
</p>
</div>
<!-- The zoomed in frame only showing the current content frame, position is set in CSS but scale must be set with lj-scale, as css transform will be overwritten by layerJS -->
<div lj-type="frame" id="zoomin" lj-fit-to="fixed" lj-scale="0.25">
<!-- The stage that handles the transitions between the content frames -->
<div lj-type="stage" id="contentstage">
<!-- The layer for the content frames -->
<div lj-type="layer" id="contentlayer" lj-layout="canvas" lj-native-scroll="false">
<!-- 1st content frame. -->
<!-- Note: swiping left/right in zoomed in state is not working because the iframe will swallow the mouse event. See https://cdn.layerjs.org/examples/zoom-noiframe/index.html for an example w/o iframes-->
<div lj-type="frame" id="frame1" lj-fit-to="responsive" lj-neighbors.r="frame2">
<a class="coverlink" href="#frame1;zoomin;minimenu.hamburger"></a>
<!-- an overlay linking to the zoomed in state, to frame1 in the inner layer and to the hamburger menu in the minimenu layer -->
<iframe width="100%" height="100%" frameborder="0" src="https://techcrunch.com/2017/04/03/apple-gpu-tech/amp/"></iframe>
<!-- We use an external iframe to not clutter this example with content. -->
</div>
<!-- the next content frame -->
<div lj-type="frame" id="frame2" lj-fit-to="responsive" lj-neighbors.r="frame3" lj-neighbors.l="frame1">
<a class="coverlink" href="#frame2;zoomin;minimenu.hamburger"></a>
<iframe width="100%" height="100%" frameborder="0" src="https://www.wired.com/2017/03/yes-spider-man-can-jump-6-meters-onto-moving-ferry-physics-says/?amp=1"></iframe>
</div>
<div lj-type="frame" id="frame3" lj-fit-to="responsive" lj-neighbors.r="frame4" lj-neighbors.l="frame2">
<a class="coverlink" href="#frame3;zoomin;minimenu.hamburger"></a>
<iframe width="100%" height="100%" frameborder="0" src="https://venturebeat.com/2017/04/02/understanding-the-limits-of-deep-learning/amp/"></iframe>
</div>
<div lj-type="frame" id="frame4" lj-fit-to="responsive" lj-neighbors.l="frame3">
<a class="coverlink" href="#frame4;zoomin;minimenu.hamburger"></a>
<iframe width="100%" height="100%" frameborder="0" src="https://techcrunch.com/2017/04/03/statcounter-android-windows/amp/"></iframe>
</div>
</div>
</div>
</div>
</div>
<div lj-type="layer" id="minimenu" lj-default-frame="!none" lj-native-scroll="false">
<!-- the layer for the hamburger menu. It's not shown by default -->
<a href="#zoomout;frame1;minimenu.!none" lj-type="frame" id="hamburger" lj-start-position="top" lj-fit-to="fixed" lj-transition="down">
<!-- the "hamburger" linking to the zoomed out state with the hamburger not shown. -->
☰
</a>
</div>
</div>
