Zine Viewer Web Component

This is a web component for viewing zines. It is a simple component that allows you to view a zine in a modal. It is built with HTML, CSS, and JavaScript.

How it works

The component is built with HTML, CSS, and JavaScript. It is a simple component that allows you to view a zine in a modal. It is built with HTML, CSS, and JavaScript.

What it looks like

You can see more like this in action on the Zines page.

Limitations

This currently only supports one zine at a time. It also expects a certain aspect ratio as this was based off of an 8 page zing from one piece of letter sized paper.

How to use it

Use the zine-web-component element in your HTML.

Add the script to the head of your page.

<script
  type="module"
  src="https://unpkg.com/@joelmturner/zine-viewer-web-component?module"
></script>

Add an element with the img-src and back-img-src attributes for each page of the zine. There are two ways to do this:

Add an element with the pages attribute set to a JSON string of the pages.

const pages =[
    {
      "img-src": "https://res.cloudinary.com/joelmturner/image/upload/v1736665494/zines/pick%20me%20ups/FRONT.jpg",
      "back-img-src": "https://res.cloudinary.com/joelmturner/image/upload/v1736665494/zines/pick%20me%20ups/1.jpg"
    },
    {
      "img-src": "https://res.cloudinary.com/joelmturner/image/upload/v1736665494/zines/pick%20me%20ups/2.jpg",
      "back-img-src": "https://res.cloudinary.com/joelmturner/image/upload/v1736665494/zines/pick%20me%20ups/3.jpg"
    },
    {
      "img-src": "https://res.cloudinary.com/joelmturner/image/upload/v1736665494/zines/pick%20me%20ups/4.jpg",
      "back-img-src": "https://res.cloudinary.com/joelmturner/image/upload/v1736665494/zines/pick%20me%20ups/5.jpg"
    },
    {
      "img-src": "https://res.cloudinary.com/joelmturner/image/upload/v1736665494/zines/pick%20me%20ups/6.jpg",
      "back-img-src": "https://res.cloudinary.com/joelmturner/image/upload/v1736665494/zines/pick%20me%20ups/BACK.jpg"
    }
  ]
document.getElementById('zine-viewer')?.setAttribute('pages', JSON.stringify(pages));

Add multiple elements with the img-src and back-img-src attributes for each page of the zine.

<zine-viewer id="zine-viewer">
  <div
    img-src="https://res.cloudinary.com/joelmturner/image/upload/v1744579528/zines/unicorn%20zine/unicorn_1.jpg"
    back-img-src="https://res.cloudinary.com/joelmturner/image/upload/v1744579528/zines/unicorn%20zine/unicorn_2.jpg"
  >
  </div>
  <div
    img-src="https://res.cloudinary.com/joelmturner/image/upload/v1744579528/zines/unicorn%20zine/unicorn_3.jpg"
    back-img-src="https://res.cloudinary.com/joelmturner/image/upload/v1744579528/zines/unicorn%20zine/unicorn_4.jpg"
  >
  </div>
  <div
    img-src="https://res.cloudinary.com/joelmturner/image/upload/v1744579528/zines/unicorn%20zine/unicorn_5.jpg"
    back-img-src="https://res.cloudinary.com/joelmturner/image/upload/v1744579528/zines/unicorn%20zine/unicorn_6.jpg"
  >
  </div>
  <div
    img-src="https://res.cloudinary.com/joelmturner/image/upload/v1744579528/zines/unicorn%20zine/unicorn_7.jpg"
    back-img-src="https://res.cloudinary.com/joelmturner/image/upload/v1744579528/zines/unicorn%20zine/unicorn_8.jpg"
  >
  </div>
</zine-viewer>