template.md

Using a custom template

You might want to render the zoom in your own template. You could reproduce zooms as seen on Facebook or Dropbox Paper. This is possible with the template option.

1. Create a template element
2. Add the template selector or the element to the template option

<template id="zoom-template">
  <div>
    <header>My image zoom template</header>
    <div id="zoom-container"></div>
    <aside>Comment on my image</aside>
  </div>
</template>

<script>
  mediumZoom('[data-zoom]', {
    template: '#zoom-template',
    container: '#zoom-container'
  })
</script>

Using a container within a template is possible.

Examples

• Dropbox Paper
• Facebook