PDJ Brandbox

Zoomer 

<div class="demo-page-zoomer">

    <h4>Single image</h4>
    <a href="#" data-zoomer="https://picsum.photos/2000/2000">
        Open single image
    </a>

    <h4>Gallery (one link)</h4>
    <a href="#" data-zoomer="gallery" data-zoomer-gallery="demo-gallery-1">
        Open gallery
    </a>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            new Zoomer({
                'name': 'demo-gallery-1',
                'items': [{
                        'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=400&amp;w=500&amp;hash=4E254D2964FDDD4D12E42FC032EB8F15',
                        'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.jpg',
                        'title': 'DDJ-SP1',
                    },
                    {
                        'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-angle.png?h=400&amp;w=500&amp;hash=046DD37AD384473762672F5553C1A823',
                        'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-angle.jpg',
                        'title': 'DDJ-SP1',
                    },
                    {
                        'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-side.png?h=400&amp;w=500&amp;hash=E511BA1EB20FAF9E6A348DAEE13B3135',
                        'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-side.jpg',
                        'title': 'DDJ-SP1',
                    },
                    {
                        'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-front.png?h=400&amp;w=500&amp;hash=F5F0BADDBA4FFEF5E7168D1C31246F8F',
                        'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-front.jpg',
                        'title': 'DDJ-SP1',
                    },
                    {
                        'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-perspective.png?h=400&amp;w=500&amp;hash=9127D631BD40CE9D2118A81BB05AAE0C',
                        'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-perspective.jpg',
                        'title': 'DDJ-SP1',
                    },
                ],
            });
        });
    </script>

    <h4>Gallery (multiple triggers)</h4>
    <ul class="demo-page-zoomer-list">
        <li>
            <a href="#" data-zoomer="gallery" data-zoomer-gallery="demo-gallery-2" data-zoomer-item="1">
                <img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=400&amp;w=500&amp;hash=4E254D2964FDDD4D12E42FC032EB8F15" alt="DDJ-SP1">
            </a>
        </li>
        <li>
            <a href="#" data-zoomer="gallery" data-zoomer-gallery="demo-gallery-2" data-zoomer-item="2">
                <img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-angle.png?h=400&amp;w=500&amp;hash=046DD37AD384473762672F5553C1A823" alt="DDJ-SP1">
            </a>
        </li>
        <li>
            <a href="#" data-zoomer="gallery" data-zoomer-gallery="demo-gallery-2" data-zoomer-item="3">
                <img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-side.png?h=400&amp;w=500&amp;hash=E511BA1EB20FAF9E6A348DAEE13B3135" alt="DDJ-SP1">
            </a>
        </li>
        <li>
            <a href="#" data-zoomer="gallery" data-zoomer-gallery="demo-gallery-2" data-zoomer-item="4">
                <img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-front.png?h=400&amp;w=500&amp;hash=F5F0BADDBA4FFEF5E7168D1C31246F8F" alt="DDJ-SP1">
            </a>
        </li>
        <li>
            <a href="#" data-zoomer="gallery" data-zoomer-gallery="demo-gallery-2" data-zoomer-item="5">
                <img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-perspective.png?h=400&amp;w=500&amp;hash=9127D631BD40CE9D2118A81BB05AAE0C" alt="DDJ-SP1">
            </a>
        </li>
    </ul>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            new Zoomer({
                'name': 'demo-gallery-2',
                'items': [{
                        'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=400&amp;w=500&amp;hash=4E254D2964FDDD4D12E42FC032EB8F15',
                        'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.jpg',
                        'title': 'DDJ-SP1',
                    },
                    {
                        'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-angle.png?h=400&amp;w=500&amp;hash=046DD37AD384473762672F5553C1A823',
                        'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-angle.jpg',
                        'title': 'DDJ-SP1',
                    },
                    {
                        'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-side.png?h=400&amp;w=500&amp;hash=E511BA1EB20FAF9E6A348DAEE13B3135',
                        'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-side.jpg',
                        'title': 'DDJ-SP1',
                    },
                    {
                        'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-front.png?h=400&amp;w=500&amp;hash=F5F0BADDBA4FFEF5E7168D1C31246F8F',
                        'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-front.jpg',
                        'title': 'DDJ-SP1',
                    },
                    {
                        'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-perspective.png?h=400&amp;w=500&amp;hash=9127D631BD40CE9D2118A81BB05AAE0C',
                        'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-perspective.jpg',
                        'title': 'DDJ-SP1',
                    },
                ],
            });
        });
    </script>

</div>

<style>
    /* ignore this demo page css */
    .demo-page-zoomer {
        padding: 40px;
    }

    .demo-page-zoomer ul {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .demo-page-zoomer ul li {
        flex: 0 0 150px;
        border: 1px solid #efefef;
        padding: 20px;
    }

    .demo-page-zoomer ul li img {
        display: block;
        width: 100%;
        margin: 0;
    }
</style>

<!-- IN PROGRESS: Generate this with JS:
<div class="zoomer">
  <div class="zoomer__inner">

    <div class="zoomer-header">
      <div class="zoomer-header__inner">
        <div class="zoomer-header__scale zoomer-scale">
          <button class="zoomer-scale__out">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.75 8a.75.75 0 0 1 .75-.75h11a.75.75 0 0 1 0 1.5h-11A.75.75 0 0 1 1.75 8" clip-rule="evenodd"/></svg>
          </button>
          <input type="range" min="0" max="100" value="0" class="zoomer-scale__range">
          <button class="zoomer-scale__in">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 1.75a.75.75 0 0 1 .75.75v4.75h4.75a.75.75 0 0 1 0 1.5H8.75v4.75a.75.75 0 0 1-1.5 0V8.75H2.5a.75.75 0 0 1 0-1.5h4.75V2.5A.75.75 0 0 1 8 1.75" clip-rule="evenodd"/></svg>
          </button>
        </div>
        <button class="zoomer-header__download">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8.53 11.78a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.22 1.22V1.75a.75.75 0 0 1 1.5 0v7.69l1.22-1.22a.75.75 0 1 1 1.06 1.06zM1.75 13.5a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5z" clip-rule="evenodd"/></svg>
        </button>
        <button class="zoomer-header__close">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3.47 3.47a.75.75 0 0 1 1.06 0L8 6.94l3.47-3.47a.75.75 0 1 1 1.06 1.06L9.06 8l3.47 3.47a.75.75 0 1 1-1.06 1.06L8 9.06l-3.47 3.47a.75.75 0 0 1-1.06-1.06L6.94 8 3.47 4.53a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/></svg>
        </button>
      </div>
    </div>

    <div class="zoomer-visual zoomer-visual--visible">
      <div class="zoomer-visual__inner">
        <img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.jpg" alt="">
      </div>
    </div>

    <div class="zoomer-thumbs">
      <div class="zoomer-thumbs__inner">
        <div class="zoomer-thumbs__slider">
          <ul>
            <li><a href="#" class="zoomer-thumbs__link zoomer-thumbs__link--active"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
          </ul>
        </div>
        <div class="zoomer-thumbs__nav">
          <button class="zoomer-thumbs__prev">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10.53 2.97a.75.75 0 0 1 0 1.06L6.56 8l3.97 3.97a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 0" clip-rule="evenodd"/></svg>
          </button>
          <button class="zoomer-thumbs__next">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.47 13.03a.75.75 0 0 1 0-1.06L9.44 8 5.47 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0" clip-rule="evenodd"/></svg>
          </button>
        </div>
      </div>
    </div>

  </div>
</div>
-->
 
<div class="demo-page-zoomer">

  <h4>Single image</h4>
  <a href="#" data-zoomer="https://picsum.photos/2000/2000">
    Open single image
  </a>

  <h4>Gallery (one link)</h4>
  <a href="#" data-zoomer="gallery" data-zoomer-gallery="demo-gallery-1">
    Open gallery
  </a>

  <script>
  document.addEventListener('DOMContentLoaded', () => {
    new Zoomer({
      'name': 'demo-gallery-1',
      'items': [
        {
          'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=400&amp;w=500&amp;hash=4E254D2964FDDD4D12E42FC032EB8F15',
          'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.jpg',
          'title': 'DDJ-SP1',
        },
        {
          'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-angle.png?h=400&amp;w=500&amp;hash=046DD37AD384473762672F5553C1A823',
          'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-angle.jpg',
          'title': 'DDJ-SP1',
        },
        {
          'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-side.png?h=400&amp;w=500&amp;hash=E511BA1EB20FAF9E6A348DAEE13B3135',
          'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-side.jpg',
          'title': 'DDJ-SP1',
        },
        {
          'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-front.png?h=400&amp;w=500&amp;hash=F5F0BADDBA4FFEF5E7168D1C31246F8F',
          'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-front.jpg',
          'title': 'DDJ-SP1',
        },
        {
          'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-perspective.png?h=400&amp;w=500&amp;hash=9127D631BD40CE9D2118A81BB05AAE0C',
          'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-perspective.jpg',
          'title': 'DDJ-SP1',
        },
      ],
    });
  });
  </script>

  <h4>Gallery (multiple triggers)</h4>
  <ul class="demo-page-zoomer-list">
    <li>
      <a href="#" data-zoomer="gallery" data-zoomer-gallery="demo-gallery-2" data-zoomer-item="1">
        <img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=400&amp;w=500&amp;hash=4E254D2964FDDD4D12E42FC032EB8F15" alt="DDJ-SP1">
      </a>
    </li>
    <li>
      <a href="#" data-zoomer="gallery" data-zoomer-gallery="demo-gallery-2" data-zoomer-item="2">
        <img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-angle.png?h=400&amp;w=500&amp;hash=046DD37AD384473762672F5553C1A823" alt="DDJ-SP1">
      </a>
    </li>
    <li>
      <a href="#" data-zoomer="gallery" data-zoomer-gallery="demo-gallery-2" data-zoomer-item="3">
        <img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-side.png?h=400&amp;w=500&amp;hash=E511BA1EB20FAF9E6A348DAEE13B3135" alt="DDJ-SP1">
      </a>
    </li>
    <li>
      <a href="#" data-zoomer="gallery" data-zoomer-gallery="demo-gallery-2" data-zoomer-item="4">
        <img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-front.png?h=400&amp;w=500&amp;hash=F5F0BADDBA4FFEF5E7168D1C31246F8F" alt="DDJ-SP1">
      </a>
    </li>
    <li>
      <a href="#" data-zoomer="gallery" data-zoomer-gallery="demo-gallery-2" data-zoomer-item="5">
        <img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-perspective.png?h=400&amp;w=500&amp;hash=9127D631BD40CE9D2118A81BB05AAE0C" alt="DDJ-SP1">
      </a>
    </li>
  </ul>

  <script>
  document.addEventListener('DOMContentLoaded', () => {
    new Zoomer({
      'name': 'demo-gallery-2',
      'items': [
        {
          'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=400&amp;w=500&amp;hash=4E254D2964FDDD4D12E42FC032EB8F15',
          'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.jpg',
          'title': 'DDJ-SP1',
        },
        {
          'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-angle.png?h=400&amp;w=500&amp;hash=046DD37AD384473762672F5553C1A823',
          'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-angle.jpg',
          'title': 'DDJ-SP1',
        },
        {
          'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-side.png?h=400&amp;w=500&amp;hash=E511BA1EB20FAF9E6A348DAEE13B3135',
          'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-side.jpg',
          'title': 'DDJ-SP1',
        },
        {
          'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-front.png?h=400&amp;w=500&amp;hash=F5F0BADDBA4FFEF5E7168D1C31246F8F',
          'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-front.jpg',
          'title': 'DDJ-SP1',
        },
        {
          'thumb': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-perspective.png?h=400&amp;w=500&amp;hash=9127D631BD40CE9D2118A81BB05AAE0C',
          'large': 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-perspective.jpg',
          'title': 'DDJ-SP1',
        },
      ],
    });
  });
  </script>

</div>




















<style>
/* ignore this demo page css */
.demo-page-zoomer { padding: 40px; }
.demo-page-zoomer ul { display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.demo-page-zoomer ul li { flex: 0 0 150px; border: 1px solid #efefef; padding: 20px; }
.demo-page-zoomer ul li img { display: block; width: 100%; margin: 0; }
</style>










<!-- IN PROGRESS: Generate this with JS:
<div class="zoomer">
  <div class="zoomer__inner">

    <div class="zoomer-header">
      <div class="zoomer-header__inner">
        <div class="zoomer-header__scale zoomer-scale">
          <button class="zoomer-scale__out">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.75 8a.75.75 0 0 1 .75-.75h11a.75.75 0 0 1 0 1.5h-11A.75.75 0 0 1 1.75 8" clip-rule="evenodd"/></svg>
          </button>
          <input type="range" min="0" max="100" value="0" class="zoomer-scale__range">
          <button class="zoomer-scale__in">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 1.75a.75.75 0 0 1 .75.75v4.75h4.75a.75.75 0 0 1 0 1.5H8.75v4.75a.75.75 0 0 1-1.5 0V8.75H2.5a.75.75 0 0 1 0-1.5h4.75V2.5A.75.75 0 0 1 8 1.75" clip-rule="evenodd"/></svg>
          </button>
        </div>
        <button class="zoomer-header__download">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8.53 11.78a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.22 1.22V1.75a.75.75 0 0 1 1.5 0v7.69l1.22-1.22a.75.75 0 1 1 1.06 1.06zM1.75 13.5a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5z" clip-rule="evenodd"/></svg>
        </button>
        <button class="zoomer-header__close">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3.47 3.47a.75.75 0 0 1 1.06 0L8 6.94l3.47-3.47a.75.75 0 1 1 1.06 1.06L9.06 8l3.47 3.47a.75.75 0 1 1-1.06 1.06L8 9.06l-3.47 3.47a.75.75 0 0 1-1.06-1.06L6.94 8 3.47 4.53a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/></svg>
        </button>
      </div>
    </div>

    <div class="zoomer-visual zoomer-visual--visible">
      <div class="zoomer-visual__inner">
        <img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.jpg" alt="">
      </div>
    </div>

    <div class="zoomer-thumbs">
      <div class="zoomer-thumbs__inner">
        <div class="zoomer-thumbs__slider">
          <ul>
            <li><a href="#" class="zoomer-thumbs__link zoomer-thumbs__link--active"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
            <li><a href="#" class="zoomer-thumbs__link"><img src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985" alt=""></a></li>
          </ul>
        </div>
        <div class="zoomer-thumbs__nav">
          <button class="zoomer-thumbs__prev">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10.53 2.97a.75.75 0 0 1 0 1.06L6.56 8l3.97 3.97a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 0" clip-rule="evenodd"/></svg>
          </button>
          <button class="zoomer-thumbs__next">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.47 13.03a.75.75 0 0 1 0-1.06L9.44 8 5.47 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0" clip-rule="evenodd"/></svg>
          </button>
        </div>
      </div>
    </div>

  </div>
</div>
-->
 
/* No context defined. */
  • Content: 
    // import ZoomerScaler from "./ZoomerScaler";

const Zoomer = function(settings = {}) {
  const defaults = {
    downloadButton: true,
  };

  this.settings = {
    ...defaults,
    ...settings,
  };

  this.init();
};

Zoomer.prototype.init = function() {
  console.log('Zoomer init', this.settings);
  this.getTriggers();
};

Zoomer.prototype.getTriggers = function() {
  // document.querySelectorAll('data-zoomer')
};

Zoomer.prototype.open = function() {
  this.generateElements();

  if (!this.el.wrapper) {
    return;
  }

  this.el.wrapper.classList.add('zoomer--visible');
};

Zoomer.prototype.close = function() {
  if (!this.el.wrapper) {
    return;
  }

  this.el.wrapper.classList.remove('zoomer--visible');
};

Zoomer.prototype.download = function() {
  console.log('Zoomer.download()');
};

Zoomer.prototype.generateElements = function() {
  this.el = {};

  this.el.wrapper = document.createElement('div');
  this.el.wrapper.classList.add('zoomer');

  this.el.inner = document.createElement('div');
  this.el.inner.classList.add('zoomer__inner');

  this._generateHeader(this.el.inner);
  this._generateVisual(this.el.inner);
  this._generateThumbs(this.el.inner);

  this.el.wrapper.appendChild(this.el.inner);
  document.body.appendChild(this.el.wrapper);
};

Zoomer.prototype._generateHeader = function(wrapperEl) {
  if (!this.el) {
    return;
  }

  this.el.header = {};

  this.scaler = new ZoomerScaler();

  this.el.download = document.createElement('button');
  this.el.download.classList.add('zoomer-header__download');
  this.el.download.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8.53 11.78a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.22 1.22V1.75a.75.75 0 0 1 1.5 0v7.69l1.22-1.22a.75.75 0 1 1 1.06 1.06zM1.75 13.5a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5z" clip-rule="evenodd"/></svg>';
  this.el.download.addEventListener('click', () => this.download());

  this.el.close = document.createElement('button');
  this.el.close.classList.add('zoomer-header__close');
  this.el.close.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3.47 3.47a.75.75 0 0 1 1.06 0L8 6.94l3.47-3.47a.75.75 0 1 1 1.06 1.06L9.06 8l3.47 3.47a.75.75 0 1 1-1.06 1.06L8 9.06l-3.47 3.47a.75.75 0 0 1-1.06-1.06L6.94 8 3.47 4.53a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/></svg>';
  this.el.close.addEventListener('click', () => this.close());

  this.el.header.inner = document.createElement('div');
  this.el.header.inner.classList.add('zoomer-header__inner');
  this.el.header.inner.appendChild(this.scaler.getElement());
  this.el.header.inner.appendChild(this.el.download);
  this.el.header.inner.appendChild(this.el.close);

  this.el.header.wrapper = document.createElement('div');
  this.el.header.wrapper.classList.add('zoomer-header');
  this.el.header.wrapper.appendChild(this.el.header.inner);

  if (wrapperEl) {
    wrapperEl.appendChild(this.el.header.wrapper);
  }
};

Zoomer.prototype._generateVisual = function(wrapperEl) {
  this.el.visual = {};

  this.el.visual.wrapper = document.createElement('div');
  this.el.visual.wrapper.classList.add('zoomer-visual');
  this.el.visual.inner = document.createElement('div');
  this.el.visual.inner.classList.add('zoomer-visual__inner');
  this.el.visual.wrapper.appendChild(this.el.visual.inner);

  if (wrapperEl) {
    wrapperEl.appendChild(this.el.visual.wrapper);
  }
};

Zoomer.prototype._generateThumbs = function(wrapperEl) {
  if (!this.el) {
    return;
  }

  this.el.thumbs = {};

  this.el.thumbs.wrapper = document.createElement('div');
  this.el.thumbs.wrapper.classList.add('zoomer-thumbs');
  this.el.thumbs.inner = document.createElement('div');
  this.el.thumbs.inner.classList.add('zoomer-thumbs__inner');

  this.el.thumbs.sliderList = document.createElement('ul');

  [].forEach(thumb => {
    const img = document.createElement('img');
    img.src = 'https://www.pioneerdj.com/-/media/pioneerdj/images/products/controller/ddj-sp1/black/ddj-sp1-main.png?h=169&amp;w=169&amp;hash=CECB43C44DBFF80A95520A355E07E985';
    img.alt = '';

    const link = document.createElement('button');
    link.classList.add('zoomer-thumbs__link');
    // link.classList.add('zoomer-thumbs__link--active');
    link.appendChild(img);

    const li = document.createElement('li');
    li.appendChild(link);

    this.el.thumbs.sliderList.appendChild(li);
  });

  this.el.thumbs.slider = document.createElement('div');
  this.el.thumbs.slider.classList.add('zoomer-thumbs__slider');
  this.el.thumbs.slider.appendChild(this.el.thumbs.sliderList);
  this.el.thumbs.inner.appendChild(this.el.thumbs.slider);

  this.el.thumbs.prev = document.createElement('button');
  this.el.thumbs.prev.classList.add('zoomer-thumbs__prev');
  this.el.thumbs.prev.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10.53 2.97a.75.75 0 0 1 0 1.06L6.56 8l3.97 3.97a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 0" clip-rule="evenodd"/></svg>';
  this.el.thumbs.prev.addEventListener('click', () => console.log('Zoomer thumbs move left'));

  this.el.thumbs.next = document.createElement('button');
  this.el.thumbs.next.classList.add('zoomer-thumbs__next');
  this.el.thumbs.next.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.47 13.03a.75.75 0 0 1 0-1.06L9.44 8 5.47 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0" clip-rule="evenodd"/></svg>';
  this.el.thumbs.next.addEventListener('click', () => console.log('Zoomer thumbs move right'));

  this.el.thumbs.nav = document.createElement('div');
  this.el.thumbs.nav.classList.add('zoomer-thumbs__nav');
  this.el.thumbs.nav.appendChild(this.el.thumbs.prev);
  this.el.thumbs.nav.appendChild(this.el.thumbs.next);
  this.el.thumbs.inner.appendChild(this.el.thumbs.nav);

  if (wrapperEl) {
    wrapperEl.appendChild(this.el.thumbs.wrapper);
  }
};

window.Zoomer = Zoomer;
  • URL: /components/raw/zoomer/Zoomer.js
  • Filesystem Path: ../src/04_organisms/zoomer/Zoomer.js
  • Size: 6.3 KB
  • Content: 
    const ZoomerScaler = function(settings = {}) {
  this.defaultSettings = {
    startValue: 50,
    clickSteps: 25,
    scaleOutIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.75 8a.75.75 0 0 1 .75-.75h11a.75.75 0 0 1 0 1.5h-11A.75.75 0 0 1 1.75 8" clip-rule="evenodd"/></svg>',
    scaleInIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 1.75a.75.75 0 0 1 .75.75v4.75h4.75a.75.75 0 0 1 0 1.5H8.75v4.75a.75.75 0 0 1-1.5 0V8.75H2.5a.75.75 0 0 1 0-1.5h4.75V2.5A.75.75 0 0 1 8 1.75" clip-rule="evenodd"/></svg>',
  };

  this.settings = {
    ...this.defaultSettings,
    ...settings,
  };

  this.el = {};
  this.init();
};

ZoomerScaler.prototype.init = function() {
  console.log('ZoomerScaler init', this);

  this.validateSettings();
  this.generateElement();
};

ZoomerScaler.prototype.validateSettings = function() {
  this.settings.startValue = parseInt(this.settings.startValue);
  this.settings.startValue = (this.settings.startValue < 0 || this.settings.startValue > 100) ? this.defaultSettings.startValue : this.settings.startValue;

  this.settings.clickSteps = parseInt(this.settings.clickSteps);
  this.settings.clickSteps = (this.settings.clickSteps < .1 || this.settings.clickSteps > 50) ? this.defaultSettings.clickSteps : this.settings.clickSteps;

  if (typeof this.settings.scaleOutIcon !== typeof '') {
    this.settings.scaleOutIcon = '-';
  }

  if (typeof this.settings.scaleInIcon !== typeof '') {
    this.settings.scaleInIcon = '+';
  }
};

ZoomerScaler.prototype.generateElement = function() {
  this.el.range = document.createElement('input');
  this.el.range.type = 'range';
  this.el.range.min = 0;
  this.el.range.max = 100;
  this.el.range.value = this.settings.startValue;
  this.el.range.classList.add('zoomer-scale__range');

  this.el.scaleOutBtn = document.createElement('button');
  this.el.scaleOutBtn.classList.add('zoomer-scale__out');
  this.el.scaleOutBtn.innerHTML = this.settings.scaleOutIcon;
  this.el.scaleOutBtn.addEventListener('click', () => this.scaleOut());

  this.el.scaleInBtn = document.createElement('button');
  this.el.scaleInBtn.classList.add('zoomer-scale__out');
  this.el.scaleInBtn.innerHTML = this.settings.scaleInIcon;
  this.el.scaleInBtn.addEventListener('click', () => this.scaleIn());

  this.el.wrapper = document.createElement('div');
  this.el.wrapper.classList.add('zoomer-scale');
  this.el.wrapper.appendChild(this.el.scaleOutBtn);
  this.el.wrapper.appendChild(this.el.range);
  this.el.wrapper.appendChild(this.el.scaleInBtn);
};

ZoomerScaler.prototype.scaleOut = function() {
  if (!(this.el && this.el.range)) {
    throw new Error('ZoomerScaler can not scale out');
  }

  this.scaleTo(this.el.range.value - this.settings.clickSteps);
};

ZoomerScaler.prototype.scaleIn = function() {
  if (!(this.el && this.el.range)) {
    throw new Error('ZoomerScaler can not scale in');
  }

  this.scaleTo(this.el.range.value + this.settings.clickSteps);
};

ZoomerScaler.prototype.scaleTo = function() {
  if (!(this.el && this.el.range)) {
    throw new Error('ZoomerScaler can not scale');
  }

  console.log('scale to', this.el.range.value);
};

ZoomerScaler.prototype.getElement = function() {
  if (!(this.el && this.el.wrapper)) {
    throw new Error('ZoomerScaler can not get wrapper');
  }

  return this.el.wrapper;
};

// window.ZoomerScaler = ZoomerScaler;
// export default ZoomerScaler;
  • URL: /components/raw/zoomer/ZoomerScaler.js
  • Filesystem Path: ../src/04_organisms/zoomer/ZoomerScaler.js
  • Size: 3.6 KB
  • Content: 
    .zoomer-header {
  background-color: var(--zoomer--border-color, white);
  padding-bottom: var(--zoomer--border-size);

  &__inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap--20);

    margin: 0 auto;
    padding: var(--gap--2);
    max-width: var(--zoomer--header-width);

    & > * {
      flex: 0 1 auto;
    }
  }

  &__download,
  &__close {
    color: var(--color--action);
    transition: opacity var(--zoomer--transition-speed) var(--zoomer--transition-ease);

    &:hover {
      opacity: .5;
    }
  }

  &__close {
    margin-left: auto;
  }

  svg {
    display: block;
    width: var(--zoomer--icon-size);
    height: var(--zoomer--icon-size);
  }
}
  • URL: /components/raw/zoomer/zoomer-header.scss
  • Filesystem Path: ../src/04_organisms/zoomer/zoomer-header.scss
  • Size: 718 Bytes
  • Content: 
    @mixin zoomerScaleRangeStyle {
  width: var(--zoomer--scale-size);
  height: var(--zoomer--scale-size);

  border-radius: 50%;
  background: var(--color--action);

  box-shadow: none;
  border: none;
  pointer-events: auto;
  appearance: none;
}

.zoomer-scale {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap--4);

  height: var(--zoomer--scale-size);

  &__range,
  input[type=range] {
    appearance: none;

    display: block;
    width: var(--zoomer--scale-width, 150px);
    height: 4px;

    margin: 0;
    padding: 0;

    background-color: #dfdfdf;

    border: none;
    border-radius: 0;

    accent-color: var(--color--action);

    // ⚠️ dont use comma's
    &::-webkit-slider-thumb { @include zoomerScaleRangeStyle(); }
    &::-moz-range-thumb { @include zoomerScaleRangeStyle(); }
    &::-ms-thumb { @include zoomerScaleRangeStyle(); }
  }

  &__in,
  &__out {
    color: var(--color--neutrals-10);
    transition: color var(--zoomer--transition-speed) var(--zoomer--transition-ease);

    &:hover {
      color: var(--color--neutrals-5);
    }
  }
}
  • URL: /components/raw/zoomer/zoomer-scale.scss
  • Filesystem Path: ../src/04_organisms/zoomer/zoomer-scale.scss
  • Size: 1.1 KB
  • Content: 
    .zoomer-thumbs {
  position: absolute;
  right: var(--gap--2);
  bottom: var(--gap--2);
  left: var(--gap--2);
  z-index: 1;

  &__inner {
    position: relative;
    max-width: var(--zoomer--thumbs-width);
    margin: 0 auto;

    background-color: var(--zoomer--bg-color);
    border: 1px solid var(--color--neutrals-2);
  }

  &__slider {
    display: block;
    width: 100%;
    overflow: hidden;

    ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      margin: 0 !important;
      padding: 0;

      list-style: none;

      li {
        flex: 0 0 20%;
      }
    }
  }

  &__link {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: var(--gap--4);

    border-bottom: 5px solid transparent;
    transition: border-bottom var(--zoomer--transition-speed) var(--zoomer--transition-ease);

    img {
      width: 100px;
      transform: translateY(5px);
      transition: transform var(--zoomer--transition-speed) var(--zoomer--transition-ease);
    }

    &:hover,
    &.zoomer-thumbs__link--active {
      border-bottom: 5px solid var(--color--theme, #000);

      img {
        transform: translateY(0);
      }
    }

    &.zoomer-thumbs__link--active {
      cursor: default;
    }
  }

  &__nav {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--gap--4));
  }
}
  • URL: /components/raw/zoomer/zoomer-thumbs.scss
  • Filesystem Path: ../src/04_organisms/zoomer/zoomer-thumbs.scss
  • Size: 1.4 KB
  • Content: 
    .zoomer-visual {
  overflow: hidden;
  background-color: var(--zoomer--bg-color, white);

  opacity: 0;
  transition: opacity var(--zoomer--transition-speed) var(--zoomer--transition-ease);

  &--visible {
    opacity: 1;
  }

  // &__inner {}

  img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;

    display: block;
    width: auto;
    margin: 0;
    cursor: move;
  }
}
  • URL: /components/raw/zoomer/zoomer-visual.scss
  • Filesystem Path: ../src/04_organisms/zoomer/zoomer-visual.scss
  • Size: 399 Bytes
  • Content: 
    :root {
  --zoomer--bg-color: var(--color--neutrals-0);

  --zoomer--border-size: var(--gap--4);
  --zoomer--border-color: #F9F9F9;

  --zoomer--header-width: var(--section--8); // before: 1000px
  --zoomer--thumbs-width: var(--section--8); // before: 1200px

  --zoomer--icon-size: 24px;
  --zoomer--scale-size: 18px;
  --zoomer--scale-width: min(180px, 20vw);

  --zoomer--transition-ease: ease-out;
  --zoomer--transition-speed: 150ms;
}

html.zoomeractive body {
  overflow: hidden !important;
}

.zoomer {
  display: none;
  width: 100vw;
  height: 100dvh;

  margin: 0;
  padding: 0;

  background-color: var(--zoomer--bg-color, white);
  border: var(--zoomer--border-size) solid var(--zoomer--border-color, white);
  overflow: hidden;

  &--visible {
    position: fixed;
    z-index: 99999;

    display: block;
  }

  &__inner {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    flex-direction: column;

    height: 100%;
    background: url(https://www.pioneerdj.com/Content/img/loaders/loading_fff.gif) no-repeat 50% 50% / 100px;

    & > * {
      flex: 0 1 auto;
    }

    .zoomer-header {
      flex: 0 0 auto;
    }

    .zoomer-visual {
      flex: 1 1 100%;
    }
  }
}
  • URL: /components/raw/zoomer/zoomer-wrapper.scss
  • Filesystem Path: ../src/04_organisms/zoomer/zoomer-wrapper.scss
  • Size: 1.2 KB

In progress…