Commentary on web design and other topics by Guy Leech, web fanatic.
I’ve recently been working on the website for a printed web magazine, Scroll Magazine, which is available through the online print-on-demand service MagCloud. Now, MagCloud has a nifty “preview magazine” feature on its site, which I wanted to replicate - the rest of this post is going through the code shenanigans I did to actually replicate it.
The final result can be seen on the Scroll Magazine Buy page, by clicking the preview link below the various purchasing options.
To start with, I checked out how MagCloud works it, which it turns out is fairly standard: they include a few JavaScript files a the top of the page, and then have a link on the page that call one of those JavaScript functions. It may not be best web practise, but it works. So, theoretically, all I had to do was include those same JavaScript files and the link, and all would be rosy.
First up on the list of things to be inserted into the <head> of the document we have:
<link href="http://magcloud.com/css/extra.css" media="screen, projection" rel="stylesheet" type="text/css" />
<script src="http://magcloud.com/js/jquery-1.2.3.min.js" type="text/javascript"></script>
<script src="http://magcloud.com/js/jquery.blockUI.js" type="text/javascript"></script>
<script src="http://magcloud.com/js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="http://magcloud.com/js/jquery.hotkeys.js" type="text/javascript"></script>
<script src="http://magcloud.com/js/jquery.dimensions.js" type="text/javascript"></script>
<script src="http://magcloud.com/js/preview2.js" type="text/javascript"></script>First up, we’re including a CSS file to give the preview its default formatting - this has a chance of interfering with parts of your site, but only if you’re using a very similar structure and naming scheme to the MagCloud site. Nothing major to worry about.
Then we have the JQuery files required to run the preview; if you’re already using these particular JQuery files there’s no need to include them again. If you’re using a more recent version of JQuery it should also work, though no guarantees.
This is where you have to do a bit of hunting around in the MagCloud code; we’re basically copying the link they use to make their preview. So, open up your MagCloud page; I’ll use the Scroll Magazine page for an example. Now, take a look at the source code of the page (Ctrl + U in Firefox), and search for the ‘Show a preview’ link, then copy it into your own code. It should look something like this:
<a class="preview" onclick="return IssuePreviewClick(4058, 36, 'http://api.magcloud.com:80', 'EreVNO4o16LlJwxmgWlFMNKUHsrkvLwWVi-WYDXtyedxgYRRIrzacyZXlkuh5Ulc', 'Scroll Issue 1: <span class="issueTitle">Scroll - Virtual ... Physical</span>', true, 0);" href="#">Show a Preview</a>
There’s a couple of things I changed on this link, which you may or may not feel like doing as well. Firstly, I removed the preview class from it; secondly, I replaced the href="#" with a link to the MagCloud issue page - this means that if someone visits the site with JavaScript disabled, they get redirected to the MagCloud page, which is better than nothing happening at all. I also stripped out some of the random code that would be displayed in the title of the preview window. Thus my final link is:
<a href="http://magcloud.com/browse/Issue/4058" onclick="return IssuePreviewClick(4058, 36, 'http://api.magcloud.com:80', 'EreVNO4o16LlJwxmgWlFMNKUHsrkvLwWVi-WYDXtyedxgYRRIrzacyZXlkuh5Ulc', 'Scroll Issue 1: Virtual ... Physical', true, 0);">Show a Preview</a>
Be aware that you will to update this link every so often - the API key (or long random string of characters) gets changed regularly, and you will have to update the code whenever it does. This is a massive pain, but there’s no way around it until the MagCloud guys change the way it works. I guess you could load your MagCloud page through JavaScript then grab the link, but that’s a lot of hassle too.
Your preview should be working fine now - except for the little images (and possibly CSS styles). Time to fix that up.
When I was working, around this point I found out that the little close button, and blank page image, weren’t loading. This is because the preview is using relative links, so the images will only work for the directory structure of the MagCloud website. There’s four ways to deal with this:
preview2.js file off the MagCloud servers, and then modify the links inside of that.I’ll focus a bit more on that last one; all I did was insert the following HTML into the <head> of my document, along with all the other JS stuff:
<base href="http://magcloud.com/" />
This snippet sets the default URL for all of your links - i.e. a link such as “/images/close.gif” becomes “http://magcloud.com/images/close.gif”. As you may have guessed, this fixes all your image problems.
However, because it does that to all links, it may screw up your navigation, and whatever else. If your navigations is in relative links (“/home”, etc), this method won’t work for you. Luckily, I set up Scroll to use absolute links (i.e. all my links start with “http://scrollmagazine.com”), so nothing gets screwed up.
The other little problem I had was that my stylesheet and the MagCloud stylesheet were conflicting a bit - I had fat borders all over the preview window, which is not what I wanted. I solved this by linking an extra stylesheet, containing some rules to fix up the preview window:
#issuePreviewControl {
color: #000;
background: #000; }
#issuePreviewControl table table {
margin-top: 3em; }And so on and so forth.
There you have it - a rather long read to do something fairly simple. I hope it helps someone - just remember you’ll have to change the API key every so often.
I’ve made sure only to include all of these files when actually on the “Buy” page, reducing bandwidth usage, and reducing the risk of interference on the rest of the site – I suggest you do the same, or you’re going to die.