Making a Page Flip Magazine with turn.js

The page flip effect used to be the quintessential Flash animation. On the web, it has powered everything from magazines to presentations, with its popularity declining over time, only to be reinvented on mobile devices as ebook reading apps.

In this tutorial we are going to use PHP and the turn.js plugin, an implementation of the page flip effect with pure CSS3 and jQuery, to build a pretty magazine. We will fetch the most popular images from Instagram every hour, and use them as pages.

HTML

First we need to lay down the foundations of today’s example. We will use a single page design, which combines HTML5 markup and PHP in the same file for greater simplicity. You can see the resulting layout below:

index.php

Making an Instagram Magazine | Tutorialzine Demo
We include styles.css in the head, and our JavaScript files at the bottom. The latter are the jQuery library, the turn.js plugin and script.js, where we will be initializing the plugin and listening for keyboard events. The PHP code that we will be writing in the next section will go in the #magazine div. PHP will have the job of generating the pages of our magazine, which will be used by turn.js.

As an example, here is the markup of the first three pages of the magazine:

Generated code

1 // 32

2 // 32

3 // 32

The divs you see above are direct descendants of the #magazine div. This is the only requirement imposed by turn.js. You don’t need to have any special classes or data attributes for the elements to be interpreted as pages. With this we are ready to move on with the PHP code!

Page Flip Magazine with CSS3 and jQuery


PHP

PHP will have the task of communicating with Instagram’s API, caching the results, and generating the markup you saw above.

The first step is to register at the Instagram developer website. After you obtain your client_id key, place it in index.php as the value of $instagramClientID. We won’t be needing any of the advanced functionality of the API, we will only be requesting the most popular images. This frees us from having to implement OAuth authentication, which would make today’s example significantly more complex.

Note that if you want to modify the magazine and show photos other than the most popular, say your latest images, you will need to implement OAuth and authenticate your app to have access to your photos. Consult the docs for further information.

Here is an example JSON response of the currently popular images on Instagram. I have omitted some of the attributes to make the code easier to read.

Popular images JSON response

{ "meta": { "code": 200 }, "data": [{ "tags": ["beautiful", "sky], "location": "null", "comments": { "count": 31, "data": [...] }, "filter": "Normal", "created_time": "1331910134", "link": "http://instagr.am/p/IPNNknqs84/", "likes": { "count": 391, "data": [..] }, "images": { "low_resolution": { "url": "http://distilleryimage8.instagram.com/03c80dd86f7911e1a87612313804ec91_6.jpg", "width": 306, "height": 306 }, "thumbnail": { "url": "http://distilleryimage8.instagram.com/03c80dd86f7911e1a87612313804ec91_5.jpg", "width": 150, "height": 150 }, "standard_resolution": { "url": "http://distilleryimage8.instagram.com/03c80dd86f7911e1a87612313804ec91_7.jpg", "width": 612, "height": 612 } }, "caption": { "created_time": "1331910148", "text": "Goodnight.ue056", "from": { "username": "jent99", "profile_picture": "http://images.instagram.com/profiles/profile_6227738_75sq_1319878922.jpg", "id": "6227738", "full_name": "jent99" }, "id": "148395540733414783" }, "type": "image", "id": "148395420004568888_6227738", "user": { "username": "jent99", "website": "", "bio": "Mostly nature pics.ue32bue32bue32b Hope you like them.ue056ue32a ue334giue334 ", "profile_picture": "http://images.instagram.com/profiles/profile_6227738_75sq_1319878922.jpg", "full_name": "jent99", "id": "6227738" } }, { /* More photos here*/ }] } The API is limited to returning only 32 pics, but this is plenty for our example. You can see that each photo has three image sizes, but we will only be needing the standard one. There is also various other information that you can use like caption, dimensions, tags, comments, and more.

PHP will cache the results of this API call so we hit Instagram’s servers only once per hour. This will make our application more responsive and limit the number of calls.

index.php

// You can obtain this client ID from the Instagram API page $instagramClientID = -- place your client id key here --; $api =https://api.instagram.com/v1/media/popular?client_id=.$instagramClientID; $cache = cache.txt; if(file_exists($cache) && filemtime($cache) > time() - 60*60){ // If a cache file exists, and it is // fresher than 1 hour, use it $images = unserialize(file_get_contents($cache)); } else{ // Make an API request and create the cache file // Fetch the 32 most popular images on Instagram $response = file_get_contents($api); $images = array(); // Decode the response and build an array foreach(json_decode($response)->data as $item){ $title = ; if($item->caption){ $title = mb_substr($item->caption->text,0,70,"utf8"; } $src = $item->images->standard_resolution->url; $images[] = array( "title" => htmlspecialchars($title), "src" => htmlspecialchars($src) ); } // Remove the last item, so we still have // 32 items when when the cover is added array_pop($images); // Push the cover in the beginning of the array array_unshift($images,array("title"=>"Cover", "src"=>"assets/img/cover.jpg"); // Update the cache file file_put_contents($cache,serialize($images)); } # Generate the markup $totalPages = count($images); foreach($images as $i=>$image){ ?>