Example Code
To include a Zmags thumbnail, simply copy one of the following into your site's HTML, at the place where you would like it to appear. Be sure to fill in the ID and desired size first!
Example 1 - Publication
<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(154, 200);
thumb.draw();
</script>
Example 2 - Schedule
<script type="text/javascript" src="http://viewer.zmags.com/js/thumb.js"></script>
<script type="text/javascript">
var thumb = new Thumb(null, "myThumb");
thumb.setScheduleID("schedule_ID_here");
thumb.setSize(154, 200);
thumb.draw();
</script>
The Publication ID can be found by clicking on the name of your publication in the "All Publications" list of the Zmags Publicator. The Schedule ID can be found in the 'Schedule' list, off to the right of your schedule's name.
Thumb(int magid, string name);
Tells the function which publication to display in the thumbnail component
var thumb = new Thumb(290796, "myThumb");
Parameters:
{Integer} Magid
Type numeric Identifier of the publication, or choose null if you intend to use a schedule ID instead.
{String} Name
A unique idenifier if more than one thumbnail needs to go on the same page
setScheduleID(string id)
Sets the ID of the schedule whose thumbnail is to be displayed.
thumb.setScheduleID("schedule_ID_here");
Parameters:
{String} id
The 8-digit Schedule ID number, enclosed in quotation marks.
setBackgroundColor(string color)
Sets the background color of the component
thumb.setBackgroundColor("#ffffff");
Parameters:
{String} color
Sets the background color to display in the component
setLaunchURL(string url)
Sets a different URL to open instead of the publication once the reader has clicked the component.
thumb.setLaunchURL("http://www.domain.com");
Parameters:
{String} URL
The designated URL to direct the user to once they have clicked the component
setMagID(int id)
Sets the publication ID to display in the area.
thumb.setMagID(5);
Parameters:
{Integer} id
The ID number of the publication to display in the component
setPageID(int page)
Sets a page of the publication to display in the area.
thumb.setPageID(5);
Parameters:
{Integer} page
The number of the page to display in the component
setLaunchTarget(string target)
Sets the target frame or window to load the publication
thumb.setLaunchTarget("_top");
Parameters:
{String} target
The frame or element to launch the publication in.
setSize(int width, int height)
Sets the size of the component on the page in pixels
thumb.setSize(150,200);
Parameters:
{Integer} width
The width of the displayed area in pixels.
{Integer} height
The height of the displayed area in pixels.
setInternalWidth(int width)
Sets the size of the internal width of the thumbnail in the area
thumb.setInternalWidth(180);
Parameters:
{Integer} width
The width of the displayed area in pixels.
setCenterPage(boolean CenterPage)
Sets the thumbnail to center on a an area of the html page
thumb.setCenterPage(true);
Parameters:
{boolean} CenterPage
Either True or False
setSWFTransparency(boolean)
Sets sets the transparency of the thumbnail SWF on the page
thumb.setSWFTransparency(true);
Parameters:
{boolean}
Either true or false
draw()
Draws the thumbnail component on the page
thumb.draw();