Graphic News HTML5 iGraphics

Graphic News is now producing iGraphics in HTML5 for viewing on multiple platforms, including web browsers, iOS and Android devices where Flash is no longer supported. As each graphic is made up of several javascript files and multiple images, we recommend that for ease of use, they are placed on your page in an iframe, for example to be loaded from a Graphic News server using the cut-and-paste embed code provided when you download the graphic.

Our iframe code typically looks something like the following and can be pasted into your page in the same way as a YouTube video for example.

<iframe src='http://apps.graphicnews.com/links/gn_swf/iframe.php?ct=xx12345xxx600xxx800xxx' width='800' height='600' frameborder='0' scrolling='no'></iframe>

If you wish to edit or translate the iGraphic, it is also supplied as a W.zip file containing the required html, xml, javascript and image files. You can then either place the iGraphic in your page using an iframe or cut and paste the code from the supplied html page GN12345.html into your own page. 

To cut and paste the code, first copy the <script> code from the <head> section of GN12345.html into the <head> section of your page:
<script type="text/javascript" charset="utf-8" src="GN12345_edgePreload.js"></script>

Then copy the <div> section into the <body> of your page:
<div id="stage" class="GraphicNews12345"></div>

All the captions are contained within the xml file or files that accompany the iGraphic, meaning no technical expertise is required to make your changes. Simply open the xml file in a text editor and change any of the captions, but:

Do NOT change any of the tags e.g. <tag> as this identifies which bit of text to put where in the iGraphic.
Do NOT edit any of the following:
<![CDATA[ which is found before a caption or ]]> which comes at the end of a caption.

Any captions enclosed by <![CDATA[ Caption text here]]> will respect html tags (although they aren't required), so you can make bold text, force line breaks, etc if you wish.

When previewing your changes in a browser, you will find that live data, which is automatically updated, will not display. To see the live data, the iGraphic page must be served from a web server.
See http://www.graphicnews.com/info/info.php?q=350 for details of how to turn your Mac into a web server.