How To place a teaser Tiny Mag Thumbnail or Minimag Rotator on a website

In Zmags Publicator you find a variety of teasers to present your Zmag: TinyMags, magazine thumbnails, and the rotator / page carousel.

TinyMag
- Review documentation
- View examples
This dynamic script leafs through the first few pages of your Zmag publication at regular intervals. It uses the first six pages by default.
 

<script type="text/javascript" src="http://viewer.zmags.com/js/tinyCatalog.js"></script>
<script type="text/javascript">
   var mag = new TinyCatalog(legacy_id_here, "Demo Publication");
   mag.setBackgroundColor("#FFFFFF");
   mag.setSize(260, 167);

   // Uncomment below lines to link to a url.
   // mag.setLaunchURL("http://your_URL_here");
   // mag.setTarget("_self");
   mag.draw();
</script>

Thumbnail
- Review documentation
- View examples
Displays a small picture of your Zmag cover on your website. When clicked, the full-size publication is launched.
 

<script type="text/javascript" src="http://viewer.zmags.com/js/thumb.js"></script>
<script type="text/javascript">
   var thumb = new Thumb(legacy_id_here, "myThumb");
   thumb.setSize(155, 200);

   // Uncomment below lines to link to a url.
   // thumb.setFullscreen(false);
   // thumb.setLaunchURL("http://your_URL_here");
   // thumb.setLaunchTarget("_self");
   thumb.draw();
</script>

Minimag Rotator
- Review documentation
- View examples
This is a miniature viewer that displays and links to one or more publications. The magazine pages are shown rotating in a 3D display.
 

<script type="text/javascript" src="http://viewer.zmags.com/js/rotator.js"></script>
<script type="text/javascript">
   var magid = new Array();
   magid[0] = new Array("legacy_id_here", "Demo Publication","comments");

   var rotator = new Rotator(magid, "myRotator");
   rotator.setSize(420,100);
   rotator.setBackgroundColor("#D5D6D8");
   rotator.setNumberOfPages(20);
   rotator.setItemHeight(100);
   rotator.setTransparency(false);
   rotator.setSpeed(1);
   rotator.setSpriteRotation(-15);
   rotator.setTotalRotation(0);
   rotator.draw();
</script>

Instructions for Use

To display any of these teasers on your website, simply copy the code shown above and paste it into your website HTML. Be sure to fill in your publication's "legacy ID", which can be found by clicking on its name in the "All Publications" list in Publicator.

When creating more than one teaser on the same page, be sure that each has a different "instance name". These are marked in bold red text above. If two or more teasers have the same instance name, only one will be displayed.