formstone/src/docs/viewer.html

Library of modular front end components.

<h3>Basic</h3>

<!-- START: FIRSTDEMO -->

<style>
  .viewer {
    width: 100%;
    /*height: 300px;*/

    margin: 0 0 20px;
  }

  @media screen and (min-width: 740px) {
    .viewer {
      /*height: 500px;*/
    }
  }
</style>

<div class="demo_container">
  <div class="demo_example">
    <div class="viewer js-viewer" data-viewer-options='{}'>
      <img src="https://spacehold.it/900x1600/1.jpg" alt="">
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class="viewer"&gt;
&Tab;&lt;img src=&quot;thumbnail.jpg&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".viewer").viewer();</code></pre>
  </div>
</div>

<!-- END: FIRSTDEMO -->

<h3>Gallery</h3>

<div class="demo_container">
  <div class="demo_example">
    <div class="viewer js-viewer" data-viewer-options='{}'>
      <img src="https://spacehold.it/1600x900/1.jpg" alt="">
      <img src="https://spacehold.it/900x1600/2.jpg" alt="">
      <img src="https://spacehold.it/1000x1000/3.jpg" alt="">
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class="viewer"&gt;
&Tab;&lt;img src=&quot;thumbnail_1.jpg&quot; alt=&quot;&quot;&gt;
&Tab;&lt;img src=&quot;thumbnail_2.jpg&quot; alt=&quot;&quot;&gt;
&Tab;&lt;img src=&quot;thumbnail_3.jpg&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".viewer").viewer();</code></pre>
  </div>
</div>

<h3>No Theme</h3>

<div class="demo_container">
  <div class="demo_example">
    <div class="viewer js-viewer" data-viewer-options='{"theme":""}'>
      <img src="https://spacehold.it/1600x900/1.jpg" alt="">
      <img src="https://spacehold.it/900x1600/2.jpg" alt="">
      <img src="https://spacehold.it/1000x1000/3.jpg" alt="">
    </div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class="viewer"&gt;
&Tab;&lt;img src=&quot;thumbnail_1.jpg&quot; alt=&quot;&quot;&gt;
&Tab;&lt;img src=&quot;thumbnail_2.jpg&quot; alt=&quot;&quot;&gt;
&Tab;&lt;img src=&quot;thumbnail_3.jpg&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".viewer").viewer({
  theme: "",
});</code></pre>
  </div>
</div>