LNT's Blog

Quick Tip: Create a Realistic Paper Texture in 5 Minutes

<div class="post_taxonomy">
</div>
<h1 class="post_title">
Tutorial Details</h1>
</div>
</div>
</div>
<div class="tut_bottom">
<div class="tutorial_details">

<ul>
<li><strong>Program:</strong> Adobe Photoshop</li>
<li><strong>Difficulty:</strong> Beginner</li>
<li><strong>Estimated Completion Time:</strong> 5 Minutes</li>
</ul>
</div>
<div class="tutorial_details">

<h5>
Download Source Files</h5>
<ul>
<li id="logged-out-top-link">Source files for this tutorial are available to Premium members. <br />Get a <a href="http://tutsplus.com/amember/signup.php">Premium Membership</a></li>
</ul>
</div>
<div class="article_social_media">

</div>
<div class="facebook_send_btn">

</div>
<div class="facebook_btn">

<h3>
Final Product <span>What You'll Be Creating</span></h3>
<div class="final_image_inner">

<a href="http://d2f8dzk2mhcqts.cloudfront.net/0457_Create_a_Realistic_Paper_Texture/final-2-large.jpg" rel="external" target="blank" title="Click for Large Image"><img alt="" src="http://d2f8dzk2mhcqts.cloudfront.net/0457_Create_a_Realistic_Paper_Texture/final-2.jpg" /></a>
        </div>
</div>
In this quick tip tutorial, we will learn how to create a realistic
 paper texture from scratch in just 5 minutes. To do this we will use 
some simple filters and effects. Let’s get started!<br />

<hr />

<h2>
Step 1</h2>
Create new file 1280 x 1024 px. Create a rectangular selection in the
 center of the image, hit Q to enter quick mask mode. Go to Filter > 
Pixelate > Crystallize, use small cell size and click OK. Hit Q again
 to return to normal mode. Hit Cmd+shift+alt+N to create a new layer. 
Press D then Cmd+Delete to fill selection with white. To remove 
selection press Cmd+D.<br />

<h2>
Step 2</h2>
Activate the burn tool with exposure 20%. Paint the paper until it 
looks dark and dirty. Go to Filter > Texture > Texturizer, use 
Texture: Canvas and click OK.<br />

<h2>
Step 3</h2>
Double click the paper layer to open the Layer Styles dialog and 
activate the Drop Shadow effect. Don’t worry with the settings, just 
click OK. This shadow is very flat and unrealistic, but we’ll fix it.<br />

<h2>
Step 4</h2>
From the Layers panel, right click Drop Shadow and choose Create Layer. This step will separate the Drop Shadow from the paper.<br />

<h2>
Step 5</h2>
Select the shadow layer, hit Cmd+T to transform it. Right click it 
and choose Warp. Move the handles until the shadow looks irregular, just
 like a real one.<br />

<h2>
Step 6</h2>
Activate the Gradient Tool, in the option bar and choose Linear and 
Mode: Difference. Create a random gradient, from top to bottom, bottom 
to top, left right, and right to left. Just go crazy!<br />

<h2>
Step 7</h2>
Go to Filter > Stylize > Emboss. Hit Cmd+L and move the white and black sliders to the middle.<br />

<h2>
Step 8</h2>
Hit Cmd+alt+G. Change blending mode to Overlay.<br />

<h2>
Conclusion</h2>
That’s it! You can turn this into a thin paper by lowering its opacity. Below is the final paper on a wood texture. Click <a href="http://d2f8dzk2mhcqts.cloudfront.net/0457_Create_a_Realistic_Paper_Texture/final-1-large.jpg">here</a> or click on the image to see it in full size.<br />

<div class="tutorial_image">
<a href="http://d2f8dzk2mhcqts.cloudfront.net/0457_Create_a_Realistic_Paper_Texture/final-1-large.jpg"><img alt="tutorial quicktip draw paper texture in 5 minutes" border="0" height="480" src="http://d2f8dzk2mhcqts.cloudfront.net/0457_Create_a_Realistic_Paper_Texture/final-1.jpg" style="display: inline;" width="600" /></a></div>
The best thing about this technique is that the result is always different. Below are some alternative examples.<br />

Quick Tip: Create a Realistic Paper Texture in 5 Minutes

Tutorial Details Program: Adobe Photoshop Difficulty: Beginner Estimated Completion Time: 5 Minutes Download Source Files Source files for …

Đọc thêm »

25 May 2012

7 Black and White Photoshop Conversion Techniques

<h5>
Tutorial Details</h5>
<ul>
<li><b>Requirements:</b> Photoshop CS/Elements</li>
<li><b>Difficulty:</b> Intermediate</li>
</ul>
</div>
<div class="article_social_media">

</div>
<div class="facebook_send_btn">

</div>
<div class="facebook_btn">

<h3>
Final Product <span>What You'll Be Creating</span></h3>
<div class="final_image_inner">

<img alt="" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/1.jpg" />
        </div>
</div>
<i>Twice a month we revisit some of our reader favorite posts from 
throughout the history of Phototuts+. This tutorial was first published 
in October, 2009.</i><br />

A quick glance through any photography or fashion magazine, or at the
 photos on social websites like Flickr, confirms that black and white 
photography is as popular as ever. With the coming of digital though, 
one important thing has changed. In the days of film photography, you 
shot on black and white film. Now, with digital cameras, you take photos
 in colour and then convert them to black and white.<br />

In this article we run through the most commonly used black and white
 conversion methods, outlining the pros and cons of each. Instructions 
are provided for Photoshop CS and if the technique’s available, 
Photoshop Elements.<br />

Converting to black and white digitally has a number of advantages. 
With film, the black and white conversion essentially happened at the 
time of shooting. If you wanted to change the nature of the black and 
white conversion, you could only do it by placing a coloured filter on 
the lens (a red filter, for instance, makes blue skies much darker).<br />

Now, by starting with a colour photo and converting it to black and 
white in Photoshop, you have complete control over the conversion. 
Darkening a blue sky is easy, once you know how, and you can decide 
exactly how dark you want it to be.<br />

The best cameras for black and white photography are digital SLRs. 
For the best possible conversion, start by shooting in RAW. Then, in 
your RAW conversion software, output the photo as a 16 bit Tiff file. 16
 bit files have a lot more information to work with than 8 bit files, 
which makes for a better conversion with smoother tonal graduations. <br />

Most digital SLRs (and some compacts) have a black and white mode. 
The camera is making the conversion for you, and the results are usually
 poor, giving flat, washed out photos. Avoid this mode, and use the 
following techniques instead.<br />

<hr />

<h2>
<span>1.</span> Black and White Conversions</h2>
Photoshop and Photoshop Elements offer both destructive and 
non-destructive black and white conversion techniques. Destructive 
methods are ones that can’t be re-adjusted afterwards.  Once you’ve made
 the conversion, the only way to change it is to undo the conversion and
 start again.<br />

Non-destructive methods use Photoshop’s adjustment layers. The 
changes that you make to your photo are stored in a layer, and the 
original photo remains unchanged underneath. Then, when you’re done, you
 flatten the image and it’s as this stage that Photoshop makes all the 
changes to the photo permanent. You can edit the conversion at any time 
before flattening the image by clicking on the adjustment layer’s icon 
(circled).<br />

<br />
<div class="tutorial_image">
<img alt="black and white conversion photoshop" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/2.jpg" style="display: inline;" /></div>
Non-destructive photo editing is always better than destructive 
editing. The destructive methods are included here for completeness.<br />

These instructions are for Photoshop CS 3 and Photoshop Elements 6.0. Other versions will be similar.<br />

<hr />

<h2>
<span>2.</span> Convert to Greyscale (Destructive)</h2>
The simplest black and white conversion method, converting to grayscale discards all the colour information in the photo.<br />

Photoshop CS 3: <br />

<ol>
<li>Image > Mode > Grayscale</li>
<li>Click ‘Discard’</li>
</ol>
Photoshop Elements:<br />

<ol>
<li>Image > Mode > Grayscale</li>
<li>Click ‘OK’</li>
</ol>
Pros: Quick and easy.<br />

Cons: You have no control over the conversion.<br />

<h2>
<span>3.</span> Use the Hue/Saturation Tool (Non-destructive)</h2>
This method gives exactly the same result as converting to grayscale.
 The only advantage is that it’s available as an adjustment layer, and 
can be used as part of a non-destructive editing process.<br />

Photoshop CS 3 and Photoshop Elemennts:<br />

<ol>
<li>Layer > New Adjustment Layer > Hue/Saturation</li>
<li>Click ‘OK’</li>
<li>Move the saturation slider all the way to the left (-100) and press ‘OK’</li>
</ol>
Pros: Quick and easy and and can be applied as an adjustment layer in both Photoshop CS 3 and Elements 6.<br />

Cons: You have no control over the conversion.<br />

<h2>
<span>4.</span> LAB Color Method (Destructive)</h2>
This technique converts your photo from RGB mode to Lab mode, which 
records the brightness and colour values separately, then discards the 
colour information leaving a black and white image. It’s not available 
in Photoshop Elements.<br />

Photoshop CS 3:<br />

<ol>
<li>Image > Mode > Lab Color</li>
<li>Go to the Channels window if it’s already open (if not go to Window > Channel) and select the Lightness channel</li>
<li>Image > Mode > Grayscale</li>
<li>Click ‘OK’</li>
</ol>
Pros:  Gives a better black and white conversion than the convert to grayscale and hue/saturation methods.<br />

Cons: Destructive editing process that doesn’t give you much control. <br />

<h2>
<span>5.</span> Gradient Map (Non-destructive)</h2>
The gradient map tool maps a black and white gradient to the 
brightness values of your photo. Dark areas become black or dark grey 
and highlights white or light grey.<br />

Photoshop CS and Photoshop Elements<br />

<ol>
<li>Press ‘D’ to reset the foreground and background colours to black and white.</li>
<br />
<div class="tutorial_image">
<img alt="black and white conversion photoshop" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/6.jpg" style="display: inline;" /></div>
<li>Layer > New Adjustment Layer > Gradient Map</li>
<li>Click ‘OK’</li>
</ol>
Pros: Quick and easy non-destructive black and white conversion<br />

Cons: No control over the conversion<br />

<h2>
<span>6.</span> Channel Mixer (Non-destructive)</h2>
The Channel mixer is the first black and white conversion tool listed
 here that begins to use the full potential of the information contained
 in the colour photo. Colour photos have three colour channels; red, 
green and blue. These primary colours combine to make the millions of 
colours in your photo.<br />

The Channel mixer conversion method lets you adjust the ratios 
between the red, geen and blue channels. Lightening the value of a 
channel lightens colours close to it on the colour wheel and darkens the
 colours that are opposite it. Increase the value of the red channel for
 instance, and you’ll make the red tones in your photo lighter, and the 
blue ones darker. This has the effect of lightening skin tones and 
darkening blue skies.<br />
<div class="tutorial_image">

<ins style="border: none; display: inline-table; height: 250px; margin: 0; padding: 0; position: relative; visibility: visible; width: 300px;"><ins id="aswift_0_anchor" style="border: none; display: block; height: 250px; margin: 0; padding: 0; position: relative; visibility: visible; width: 300px;"></ins></ins></div>
The Channel mixer is the digital equivalent of black and white 
photographers using colour filters. Setting the brightness of the red 
channel to 100% gives the same effect as using a red filter on the lens 
with black and white film. It’s not available in Photoshop Elements.<br />

Photoshop CS:<br />

<ol>
<li> Layer > New Adjustment Layer > Channel Mixer</li>
<li>Tick the monochrome box.</li>
<li>Move the Red, Green and Blue sliders to the left and right to 
lighten and darken different tones in the photo. The total of the three 
sliders should be 100% at all times.</li>
<li>Click ‘OK’ when you’re done.</li>
</ol>
Examples:<br />

Original photo:<br />

<br />
<div class="tutorial_image">
<img alt="black and white conversion photoshop" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/8.jpg" style="display: inline;" /></div>
Red 80%, Green 10%, Blue 10%. The setting of 80% red has darkened the blue sky and lightened the red balloon:<br />

<br />
<div class="tutorial_image">
<img alt="black and white conversion photoshop" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/9.jpg" style="display: inline;" /></div>
Red 20%, Green 40%, Blue 40%. The setting of 20% red has lightened the blue sky and darkened the red balloon:<br />

<br />
<div class="tutorial_image">
<img alt="black and white conversion photoshop" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/10.jpg" style="display: inline;" /></div>
Pros: Gives you a high degree of control over the black and white conversion. <br />

Cons: Not as flexible as the next two techniques. Not available in Photoshop Elements.<br />

<hr />

<h2>
<span>7.</span> Photoshop Elements: Convert to Black and White Tool (Destructive)</h2>
This method is a simplified version of Photoshop’s Channel Mixer 
adjustment layer.  It’s only available in Photoshop Elements and isn’t 
available as an adjustment layer (so it’s destructive editing). Having 
said that, if you can live with the small previews, it’s a very flexible
 black and white conversion technique.<br />

Photoshop Elements:<br />

<ol>
<li>Enhance > Convert to Black and White</li>
<li>Move the colour sliders to the left and right to lighten and darken 
the corresponding tones. Use the Contrast slider to compensate for 
changes in contrast. You can also select a preset style from the menu on
 the left. Click ‘OK’ when you’re done.</li>
</ol>
Pros: Flexible black and white conversion using the colour channels.<br />

Cons: Destructive editing method and small image previews make it hard to assess the changes.<br />

<h2>
<span>8.</span> Twin Hue/Saturation Method (Non-destructive)</h2>
This technique uses two Hue/Saturation adjustment layers. The top 
layer is a straight monochrome conversion. The bottom layer changes the 
colours of the original photo, which in turn changes the tones in the 
black and white conversion. It gives you a very fine degree of control.<br />

Photoshop CS and Photoshop Elements:<br />

<ol>
<li>Layer > New Adjustment Layer > Hue/Saturation and click ‘OK’</li>
<li>Move the Saturation slider all the way to the left (-100) and click ‘OK’</li>
<li>Activate the background by clicking on it</li>
<li>Layer > New Adjustment Layer > Hue/Saturation and click ‘OK’</li>
<li>Click ‘OK’ </li>
<li>Change the blending mode of the bottom Hue/Saturation layer to ‘Color’ (circled below)</li>
<li>Double click the bottom Hue/Saturation layer’s icon (circled below)</li>
<li>Move the Hue slider left or right and watch the tones change! You can also experiment with the Saturation and Lightness sliders.</li>
<li>Click ‘OK’ when you’re done.</li>
</ol>
<br />
<div class="tutorial_image">
<img alt="black and white conversion photoshop" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/12.jpg" style="display: inline;" /></div>
Examples:<br />

Original photo:<br />

<br />
<div class="tutorial_image">
<img alt="black and white conversion photoshop" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/13.jpg" style="display: inline;" /></div>
Hue +81, Saturation +22:<br />

<br />
<div class="tutorial_image">
<img alt="black and white conversion photoshop" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/14.jpg" style="display: inline;" /></div>
Hue +68, Saturation +56:<br />

<br />
<div class="tutorial_image">
<img alt="black and white conversion photoshop" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/15.jpg" style="display: inline;" /></div>
Pros: Extremely fine degree of control over the monochrome conversion.<br />

Cons: None, except that it doesn’t give you the same amout of control as the next technique.<br />

<hr />

<h2>
<span>9.</span> and White Adjustment Layer Method (Non-destructive)</h2>
Available in Photoshop CS 3 onwards, the black and white adjustment 
layer gives you all the control of the channel mixer and twin 
hue/saturation techniques via six colour sliders. But the most exciting 
feature is it’s ‘targeted adjustment tool’. With this tool you can 
stroke tones in your photo to make them lighter or darker. It’s an 
intuitive and precise conversion technique.<br />

Photshop CS 3:<br />

<ol>
<li>Layer > New Adjustment Layer > Black and White</li>
<li>Click ‘OK’. The Black and White toolbox appears:</li>
<br />
<div class="tutorial_image">
<img alt="black and white conversion photoshop" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/16.jpg" style="display: inline;" /></div>
<li>Move the six colour sliders right or left to brighten or darken the 
respective tones in the photo. You can also choose from from the presets
 in the drop down menu at the top.</li>
<li>Move the cursor over the photo and hold the left mouse button down. 
The cursor changes, indicating that the targeted adjustment tool is 
activated. With the mouse button held down, move the mouse to the right 
to lighten the tones under the cursor, or left to darken them.</li>
<li>Click ‘OK’ when you’re done.</li>
</ol>
Examples:<br />

Original photo:<br />

<br />
<div class="tutorial_image">
<img alt="black and white conversion photoshop" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/17.jpg" style="display: inline;" /></div>
Reds 70, Yellows 60, Greens 40, Cyans 60, Blues 20, Magentas 80:<br />

<br />
<div class="tutorial_image">
<img alt="black and white conversion photoshop" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/18.jpg" style="display: inline;" /></div>
Reds 27, Yellows 244, Greens 40, Cyans 101, Blues 146, Magentas -144:<br />

<br />
<div class="tutorial_image">
<img alt="black and white conversion photoshop" src="http://d2f29brjr0xbt3.cloudfront.net/035_bwconversion/19.jpg" style="display: inline;" /></div>
Pros: The most flexible black and white conversion method available.<br />

Cons: Only available in Photoshop CS 3 or 4.<br />

<hr />

<h2>
<span>10.</span> Conclusion</h2>
It’s worth taking the time to experiment with these different methods
 when deciding how to approach black and white conversion. Some may work
 better for you than others, but always remember to keep an original 
copy of the image if using a destructive method!<br />

Have fun, and please feel free to share your own technique in the comments.

7 Black and White Photoshop Conversion Techniques

Tutorial Details Requirements: Photoshop CS/Elements Difficulty: Intermediate Final Product What You'll Be Creating …

Đọc thêm »

25 May 2012

How to Create a Simple News Ticker

<a href="http://net.tutsplus.com/tutorials/javascript-ajax/build-a-simple-jquery-news-ticker/#comments" title="Comment on How to Create a Simple News Ticker"></a>In this tutorial we’ll be looking at how we can transform some 
semantic and accessible underlying HTML into an attractive and 
functional news ticker that smoothly scrolls its contents. Some news 
tickers are horizontal and some are vertical; the one that we’re going 
to create today will be vertical. </div>
</div>
</div>
</div>
<div class="tut_bottom">

</div>
<div class="facebook_send_btn">

</div>
</div>
</div>
<br />

<a href="http://d2o0t5hpnwv4c1.cloudfront.net/413_newsTicker/demo.zip"><img src="http://net.tutsplus.com/wp-content/themes/nettuts/site_images/button_src_nm.jpg" style="display: inline;" /></a></div>
<div class="tutorial_image">
<br />
<a href="http://d2o0t5hpnwv4c1.cloudfront.net/413_newsTicker/demo/simpleTicker.html"><img src="http://net.tutsplus.com/wp-content/themes/nettuts/site_images/button_demo_nm.jpg" style="display: inline;" /></a>
</div>
The context of the example is a news scroller so we’ll be working with 
plain text, but we should be able to put whatever we wanted into the 
underlying mark-up; images, or links, or whatever. We’ll be using jQuery
 as the underlying JS library, and a little HTML and CSS. Let’s make a 
start.<br /><br />
<br />

The Underlying HTML<br />
</h3>
In a new page in your text editor add the following code:
<br />

<div class="dp-highlighter">
<div class="bar">
<div class="tools">
<a href="http://net.tutsplus.com/tutorials/javascript-ajax/build-a-simple-jquery-news-ticker/#">view plain</a><a href="http://net.tutsplus.com/tutorials/javascript-ajax/build-a-simple-jquery-news-ticker/#">copy to clipboard</a><a href="http://net.tutsplus.com/tutorials/javascript-ajax/build-a-simple-jquery-news-ticker/#">print</a><a href="http://net.tutsplus.com/tutorials/javascript-ajax/build-a-simple-jquery-news-ticker/#">?</a></div>
</div>
<ol class="dp-xml" start="1">
<li class="alt"><span><span>    </span></span></li>
<li class=""><span>    <span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">http-equiv</span><span>=</span><span class="attribute-value">"Content-Type"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"text/html; charset=utf-8"</span><span class="tag">></span><span>  </span></span></li>
<li class="alt"><span><span class="tag"><</span><span class="tag-name">link</span><span> </span><span class="attribute">rel</span><span>=</span><span class="attribute-value">"stylesheet"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text/css"</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"simpleTicker.css"</span><span class="tag">></span><span>  </span></span></li>
<li class=""><span>    </span></li>
<li class="alt"><span>    </span></li>
<li class=""><span><span class="tag"><</span><span class="tag-name">dl</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"ticker"</span><span class="tag">></span><span>  </span></span></li>
<li class="alt"><span><span class="tag"><</span><span class="tag-name">dt</span><span class="tag">></span><span>This is a news title!</span><span class="tag"></</span><span class="tag-name">dt</span><span class="tag">></span><span>  </span></span></li>
<li class=""><span><span class="tag"><</span><span class="tag-name">dd</span><span class="tag">></span><span>This is a snippet of the news. It could be the whole news item or it could link to another page containing...</span><span class="tag"></</span><span class="tag-name">dd</span><span class="tag">></span><span>  </span></span></li>
<li class="alt"><span><span class="tag"><</span><span class="tag-name">dt</span><span class="tag">></span><span>News Heading 2</span><span class="tag"></</span><span class="tag-name">dt</span><span class="tag">></span><span>  </span></span></li>
<li class=""><span><span class="tag"><</span><span class="tag-name">dd</span><span class="tag">></span><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><span class="tag"></</span><span class="tag-name">dd</span><span class="tag">></span><span>  </span></span></li>
<li class="alt"><span><span class="tag"><</span><span class="tag-name">dt</span><span class="tag">></span><span>News Heading 3</span><span class="tag"></</span><span class="tag-name">dt</span><span class="tag">></span><span>  </span></span></li>
<li class=""><span><span class="tag"><</span><span class="tag-name">dd</span><span class="tag">></span><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><span class="tag"></</span><span class="tag-name">dd</span><span class="tag">></span><span>  </span></span></li>
<li class="alt"><span><span class="tag"><</span><span class="tag-name">dt</span><span class="tag">></span><span>News Heading 4</span><span class="tag"></</span><span class="tag-name">dt</span><span class="tag">></span><span>  </span></span></li>
<li class=""><span><span class="tag"><</span><span class="tag-name">dd</span><span class="tag">></span><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><span class="tag"></</span><span class="tag-name">dd</span><span class="tag">></span><span>  </span></span></li>
<li class="alt"><span><span class="tag"><</span><span class="tag-name">dt</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"heading"</span><span class="tag">></span><span>This item is long!</span><span class="tag"></</span><span class="tag-name">dt</span><span class="tag">></span><span>  </span></span></li>
<li class=""><span><span class="tag"><</span><span class="tag-name">dd</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"text"</span><span class="tag">></span><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><span class="tag"></</span><span class="tag-name">dd</span><span class="tag">></span><span>  </span></span></li>
<li class="alt"><span><span class="tag"></</span><span class="tag-name">dl</span><span class="tag">></span><span>  </span></span></li>
<li class=""><span>  </span></li>
<li class="alt"><span>    <span class="tag"><</span><span class="tag-name">script</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text/javascript"</span><span> </span><span class="attribute">src</span><span>=</span><span class="attribute-value">"jquery-1.3.2.js"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">script</span><span class="tag">></span><span>  </span></span></li>
<li class=""><span>    <span class="tag"><</span><span class="tag-name">script</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text/javascript"</span><span class="tag">></span><span>  </span></span></li>
<li class="alt"><span>  </span></li>
<li class=""><span>    <span class="tag"></</span><span class="tag-name">script</span><span class="tag">></span><span>  </span></span></li>
<li class="alt"><span>    </span></li>
</ol>
</div>
Save this as simpleTicker.html in a directory containing jQuery 1.3.2. 
As well as the usual page furniture – the DOCTYPE, META content-type, 
title, etc – we have a custom style sheet that we’ll create in just a 
moment and we link to jQuery at the end of the body (for performance 
reasons).
<br />

<img alt="Example" src="http://d2o0t5hpnwv4c1.cloudfront.net/413_newsTicker/img/simpleTicker1.png" style="display: inline;" />
</div>
On the page is the content that we’ll progressively enhance into the 
news ticker; it’s made up of a simple definition-list element, which 
feels appropriate for our purposes. Although only inline content can be 
placed in each <dt> element, block-level content can be put in the
 <dd> elements.
<br />

The code is minimal and highly accessible; browsers, mobile devices and 
screen-readers should all have no difficulty interpreting and rendering 
it. With no styling however, it does look pretty shocking:
<br />

<h3>

Providing Default Styling<br />
</h3>
Let’s add some basic styling; even with JavaScript switched off, no one 
wants to see the list as it is at the moment. In a new file in your text
 editor add the following code:
<br />

<img alt="Example" src="http://d2o0t5hpnwv4c1.cloudfront.net/413_newsTicker/img/simpleTicker2.png" style="display: inline;" />
</div>
Some of the styles are purely presentational; anything that sets a 
background-color, border or font is totally arbitrary and is used to 
make the example a little more attractive. The widget should now look 
like this:
<br />

However minimal we choose to make it, it’s a big improvement on the 
default rendering; it would quite happily fit into a sidebar or column 
now; it’s an acceptable fallback from the finished widget and a great 
foundation from which to progressively enhance.
<br />

<h3>

Progressively Enhancing the Ticker<br />
</h3>
Now we can move on to the fun part – adding the JavaScript that will 
turn this from a simple list into an automatic ticker; in the empty 
<script> element at the bottom of the page add the following code:
<br />

The underlying definition list contains both definition term and 
definition description elements, all of which could potentially be of 
varying sizes. To make things a little easier in our script we next wrap
 each <dt> and <dd> pair in a containing <div> 
element; this allows us to group the different elements logically and 
smooth out the animations. It also means that we can use whatever 
margins and padding on the *lt;dt> and
<br />
 elements without needing to take these into consideration in our animation calculations.
<div class="tutorial_image">

<ins style="border: none; display: inline-table; height: 250px; margin: 0; padding: 0; position: relative; visibility: visible; width: 300px;"><ins id="aswift_0_anchor" style="border: none; display: block; height: 250px; margin: 0; padding: 0; position: relative; visibility: visible; width: 300px;"></ins></ins></div>
To do this we select all of the children from our cached selector and 
use the jQuery filter method to discard all of the <dd> elements. 
Then for each remaining <dt> we create a new container <div>
 and append both the <dt> and the <dd> to the new container.
 We have to add the <dd> that follows the current <dt> 
first, because once the <dt> has been appended to the container it
 won’t have a <dd> after it. We therefore need to use the prepend 
method on the <dt> once the <dd> has been appended.
<br />

Once all of the <dt> and  <dd> pairs have been wrapped in  
<div> elements we then change the ticker’s overflow CSS property 
to hidden so that the scrollbar is removed. This is part of the 
accessibility strategy and ensures that only visitors with JavaScript 
enabled get to see the enhanced ticker.
<br />

Next we define our animator function, which is where we’ll set the 
animation which causes the ticker to begin scrolling and then keep 
scrolling indefinitely. This is a regular JavaScript function which 
accepts a single parameter; when we call this function we’ll pass in the
 first container element within the ticker.
<br />

The first thing we do within this function is work out the distance that
 the selected element has to travel and the duration of the animation. 
The distance part is easy; it’s just the height of the current container
 element.<br />
The duration is a little more complex; it’s the total distance to travel
 minus the distance already traveled, divided by a baseline speed that 
I’ve arbitrarily set at 0.025. The height will already be an integer but
 the css method will return a string representing the margin-top of the 
element being animated so we need to use JavaScript’s parseInt() 
function to convert it to a number. It will also be a negative number so
 we use the Math.abs() JavaScript function to convert it from a negative
 to an absolute (positive) number.
<br />

The baseline speed that we divide the remaining distance to travel by is
 pretty slow in my opinion; I’ve seen tickers before (built with Java) 
and they’ve been approximately the same speed and I didn’t get motion 
sickness or suffer any ill effects. If you feel that the animation is 
too fast (or even too slow) feel free to change this figure. It needs to
 be a really small number though; anything in the range of 0.01 to 0.09 
is probably going to be ok.
<br />

Once we have these figures we can then create the animation using 
jQuery’s animate method. The first parameter for this method is the 
actual animation itself; we want the first of the container elements in 
the ticker to be moved upwards until it is completely hidden in the 
overflow, but we also want to drag the rest of the container elements up
 by the same distance as well so we use adjust the marginTop of the 
element.
<br />

The second argument of the animate method is the duration which we 
worked out a moment ago. The third argument is the easing method; custom
 jQuery animations automatically get two types of easing – swing and 
linear. Swing causes the animation to speed up and slow down, while 
linear makes it sooth and continuous, so this is the option for us in 
this situation.
<br />

The final argument is an anonymous callback function that will be 
executed when the animation ends. Within this function we move the 
element that has just been animated to the end of the set of containers,
 reset its marginTop back to 0, and then recursively call the animator 
function again, passing in the new first-child of the ticker.
<br />

Finally, we need to call the animator function once to start off the 
whole process. When we view this page in a browser, the ticker should 
smoothly scroll through each of the elements in the list repeatedly:
<br />

<h3>

Starting and Stopping<br />
</h3>
<div class="tutorial_image">

<img alt="Example" src="http://d2o0t5hpnwv4c1.cloudfront.net/413_newsTicker/img/simpleTicker3.png" style="display: inline;" />
</div>
Now we need to think about what we want to happen when a visitor 
mouses-over a news item; personally I think the default behavior should 
be that it pauses on mouse-over and then restarts again on mouse out. We
 can easily add this behavior with a couple of jQuery event handlers; 
add the following code just before the final brace/curly brace combo:
<br />

<h3>
Fixing IE</h3>
We have one problem left to solve, and fortunately it’s an easy one. 
Running the page as it is in IE (tested in version 8) throws an error as
 soon as it is loaded. The error is caused because the very first time 
the animator function runs the first container <div> will have its
 margin-top set to auto by the browser. Other browsers will interpret 
the margin-top as 0. Which browser is correct is debatable, although 
I’ll let you draw your own conclusion about the fact that IE is the only
 browser that causes the problem. All we need to do to fix it is 
explicitly set the margin-top of the container elements. We can do this 
by adding the following line of code to the style sheet:
<br />

<img alt="Example" src="http://d2o0t5hpnwv4c1.cloudfront.net/413_newsTicker/img/simpleTicker4.png" style="display: inline;" />
</div>
<h3>
Summary</h3>
This now brings us to the end of the tutorial, we should now have a 
simple but effective news ticker that can be put to use in a variety of 
ways. When using text, like in this example, defining the headings and 
associated content sections within a definition list makes sense from a 
semantics perspective, and it’s easy to add any additional elements we 
may need as we go.
<br />

<ul class="webroundup">
<li>Follow us on <a href="http://www.twitter.com/nettuts">Twitter</a>, or subscribe to the <a href="http://feeds.feedburner.com/nettuts" title="NETTUTS RSS Feed">Nettuts+ RSS Feed</a> for more daily web development tuts and articles.</li>
</ul>

How to Create a Simple News Ticker

In this tutorial we’ll be looking at how we can transform some semantic and accessible underlying HTML into an attractive and functional news ticker that smoo…

Đọc thêm »

25 May 2012

Making a Page Flip Magazine with turn.js

<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxRRJJz4yjFMW1iMbI_RqyKmIfaI2A-6jazUUusN-HqRUybs0_d0XK0GalkGJprs8hBJbxOmcCscBrgRGbJfLvAqqxBn9BZa_SwfM9jXY4cL02WLmsuBkHvaHfOt3SsFzQzRU0of7LNjCL/s1600/thumb.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxRRJJz4yjFMW1iMbI_RqyKmIfaI2A-6jazUUusN-HqRUybs0_d0XK0GalkGJprs8hBJbxOmcCscBrgRGbJfLvAqqxBn9BZa_SwfM9jXY4cL02WLmsuBkHvaHfOt3SsFzQzRU0of7LNjCL/s640/thumb.jpg" width="640" /></a></div>
<br />
<a href="http://demo.tutorialzine.com/2012/03/instagram-magazine-php-jquery/">Demo</a>  <br />
<a href="http://demo.tutorialzine.com/2012/03/instagram-magazine-php-jquery/instagram-magazine.zip">Download </a><br />
<br />
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.<br />

In this tutorial we are going to use PHP and the <a href="http://www.turnjs.com/" target="_blank">turn.js plugin</a>,
 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 <a href="http://instagram.com/" target="_blank">Instagram</a> every hour, and use them as pages.<br />

<h3>
HTML</h3>
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:<br />

<h4>
index.php</h4>
<div class="syntaxhighlighter  " id="highlighter_522735">
<div class="lines">
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>01</code></td><td class="content"><code class="plain"><!DOCTYPE html></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>02</code></td><td class="content"><code class="plain"><</code><code class="keyword">html</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">    </code><code class="plain"><</code><code class="keyword">head</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">meta</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code> <code class="plain">/></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">title</code><code class="plain">>Making an Instagram Magazine | Tutorialzine Demo</</code><code class="keyword">title</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>06</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">        </code><code class="comments"></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">link</code> <code class="color1">rel</code><code class="plain">=</code><code class="string">"stylesheet"</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"assets/css/styles.css"</code> <code class="plain">/></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>09</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">        </code><code class="comments"></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">    </code><code class="plain"></</code><code class="keyword">head</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>14</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">    </code><code class="plain"><</code><code class="keyword">body</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>16</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"magazine"</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"centerStart"</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>18</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">        </code><code class="comments"></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>20</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">        </code><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>22</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">        </code><code class="comments"></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/jquery-1.7.1.min.js">http://code.jquery.com/jquery-1.7.1.min.js</a>"</code><code class="plain">></</code><code class="keyword">script</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>25</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"assets/js/turn.js"</code><code class="plain">></</code><code class="keyword">script</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"assets/js/script.js"</code><code class="plain">></</code><code class="keyword">script</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>27</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>28</code></td><td class="content"><code class="spaces">    </code><code class="plain"></</code><code class="keyword">body</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>29</code></td><td class="content"><code class="plain"></</code><code class="keyword">html</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
</div>
</div>
We include <em>styles.css</em> 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 <em>#magazine</em> div. PHP will have the job of generating the pages of our magazine, which will be used by turn.js.<br />

As an example, here is the markup of the first three pages of the magazine:<br />

<h4>
Generated code</h4>
<div class="syntaxhighlighter  " id="highlighter_813472">
<div class="lines">
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>01</code></td><td class="content"><code class="plain"><</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"page1"</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"page"</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">    </code><code class="plain"><</code><code class="keyword">div</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"img1"</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>03</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">        </code><code class="comments"></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>06</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">span</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"pageNum right"</code><code class="plain">>1 // 32</</code><code class="keyword">span</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">img</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"assets/img/cover.jpg"</code> <code class="color1">alt</code><code class="plain">=</code><code class="string">"Cover"</code> <code class="plain">/></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">    </code><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>10</code></td><td class="content"><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>11</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>12</code></td><td class="content"><code class="plain"><</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"page2"</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"page"</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">    </code><code class="plain"><</code><code class="keyword">div</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"img2"</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">span</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"pageNum left"</code><code class="plain">>2 // 32</</code><code class="keyword">span</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">img</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://distilleryimage7.instagram.com/...">http://distilleryimage7.instagram.com/...</a>"</code> <code class="color1">alt</code><code class="plain">=</code><code class="string">"Little tulips"</code> <code class="plain">/></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">    </code><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>17</code></td><td class="content"><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>18</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>19</code></td><td class="content"><code class="plain"><</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"page3"</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"page"</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">    </code><code class="plain"><</code><code class="keyword">div</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"img3"</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">span</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"pageNum right"</code><code class="plain">>3 // 32</</code><code class="keyword">span</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">img</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://distilleryimage2.instagram.com/...">http://distilleryimage2.instagram.com/...</a>"</code> <code class="color1">alt</code><code class="plain">=</code><code class="string">"My style"</code> <code class="plain">/></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">    </code><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>24</code></td><td class="content"><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
</div>
</div>
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!<br />

<div class="wp-caption alignnone" id="attachment_1898" style="width: 630px;">
<a href="http://demo.tutorialzine.com/2012/03/instagram-magazine-php-jquery/"><img alt="Page Flip Magazine with CSS3 and jQuery" class="size-full wp-image-1898" height="460" src="http://cdn.tutorialzine.com/wp-content/uploads/2012/03/instagram-page-flip-magazine-jquery-php.jpg" title="Page Flip Magazine with CSS3 and jQuery" width="620" /></a><div class="wp-caption-text">
Page Flip Magazine with CSS3 and jQuery</div>
</div>
<h3>
PHP</h3>
PHP will have the task of communicating with Instagram’s API, caching the results, and generating the markup you saw above.<br />

The first step is to register at the <a href="http://instagram.com/developer/" target="_blank">Instagram developer</a> website. After you obtain your <strong>client_id</strong> key, place it in <em><strong>index.php</strong></em> as the value of <code>$instagramClientID</code>.
 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.<br />

<blockquote class="note">
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. <a href="http://instagr.am/developer/auth/" target="_blank">Consult the docs</a> for further information.</blockquote>
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.<br />

<h4>
Popular images JSON response</h4>
<div class="syntaxhighlighter  " id="highlighter_703412">
<div class="lines">
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>01</code></td><td class="content"><code class="plain">{    </code><code class="string">"meta"</code><code class="plain">: {</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">        </code><code class="string">"code"</code><code class="plain">: 200</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">    </code><code class="plain">},</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">    </code><code class="string">"data"</code><code class="plain">: [{</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">        </code><code class="string">"tags"</code><code class="plain">: [</code><code class="string">"beautiful"</code><code class="plain">, </code><code class="string">"sky"</code><code class="plain">],</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">        </code><code class="string">"location"</code><code class="plain">: </code><code class="string">"null"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">        </code><code class="string">"comments"</code><code class="plain">: {</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">            </code><code class="string">"count"</code><code class="plain">: 31,</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">            </code><code class="string">"data"</code><code class="plain">: [...]</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">        </code><code class="plain">},</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">        </code><code class="string">"filter"</code><code class="plain">: </code><code class="string">"Normal"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">        </code><code class="string">"created_time"</code><code class="plain">: </code><code class="string">"1331910134"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">        </code><code class="string">"link"</code><code class="plain">: </code><code class="string">"http:\/\/instagr.am\/p\/IPNNknqs84\/"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">        </code><code class="string">"likes"</code><code class="plain">: {</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">            </code><code class="string">"count"</code><code class="plain">: 391,</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">            </code><code class="string">"data"</code><code class="plain">: [..]</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">        </code><code class="plain">},</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">        </code><code class="string">"images"</code><code class="plain">: {</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">            </code><code class="string">"low_resolution"</code><code class="plain">: {</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">                </code><code class="string">"url"</code><code class="plain">: </code><code class="string">"http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_6.jpg"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">                </code><code class="string">"width"</code><code class="plain">: 306,</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">                </code><code class="string">"height"</code><code class="plain">: 306</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">            </code><code class="plain">},</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">            </code><code class="string">"thumbnail"</code><code class="plain">: {</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>25</code></td><td class="content"><code class="spaces">                </code><code class="string">"url"</code><code class="plain">: </code><code class="string">"http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_5.jpg"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">                </code><code class="string">"width"</code><code class="plain">: 150,</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>27</code></td><td class="content"><code class="spaces">                </code><code class="string">"height"</code><code class="plain">: 150</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>28</code></td><td class="content"><code class="spaces">            </code><code class="plain">},</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>29</code></td><td class="content"><code class="spaces">            </code><code class="string">"standard_resolution"</code><code class="plain">: {</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>30</code></td><td class="content"><code class="spaces">                </code><code class="string">"url"</code><code class="plain">: </code><code class="string">"http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_7.jpg"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>31</code></td><td class="content"><code class="spaces">                </code><code class="string">"width"</code><code class="plain">: 612,</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>32</code></td><td class="content"><code class="spaces">                </code><code class="string">"height"</code><code class="plain">: 612</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>33</code></td><td class="content"><code class="spaces">            </code><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>34</code></td><td class="content"><code class="spaces">        </code><code class="plain">},</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>35</code></td><td class="content"><code class="spaces">        </code><code class="string">"caption"</code><code class="plain">: {</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>36</code></td><td class="content"><code class="spaces">            </code><code class="string">"created_time"</code><code class="plain">: </code><code class="string">"1331910148"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>37</code></td><td class="content"><code class="spaces">            </code><code class="string">"text"</code><code class="plain">: </code><code class="string">"Goodnight.\ue056"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>38</code></td><td class="content"><code class="spaces">            </code><code class="string">"from"</code><code class="plain">: {</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>39</code></td><td class="content"><code class="spaces">                </code><code class="string">"username"</code><code class="plain">: </code><code class="string">"jent99"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>40</code></td><td class="content"><code class="spaces">                </code><code class="string">"profile_picture"</code><code class="plain">: </code><code class="string">"http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>41</code></td><td class="content"><code class="spaces">                </code><code class="string">"id"</code><code class="plain">: </code><code class="string">"6227738"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>42</code></td><td class="content"><code class="spaces">                </code><code class="string">"full_name"</code><code class="plain">: </code><code class="string">"jent99"</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>43</code></td><td class="content"><code class="spaces">            </code><code class="plain">},</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>44</code></td><td class="content"><code class="spaces">            </code><code class="string">"id"</code><code class="plain">: </code><code class="string">"148395540733414783"</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>45</code></td><td class="content"><code class="spaces">        </code><code class="plain">},</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>46</code></td><td class="content"><code class="spaces">        </code><code class="string">"type"</code><code class="plain">: </code><code class="string">"image"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>47</code></td><td class="content"><code class="spaces">        </code><code class="string">"id"</code><code class="plain">: </code><code class="string">"148395420004568888_6227738"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>48</code></td><td class="content"><code class="spaces">        </code><code class="string">"user"</code><code class="plain">: {</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>49</code></td><td class="content"><code class="spaces">            </code><code class="string">"username"</code><code class="plain">: </code><code class="string">"jent99"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>50</code></td><td class="content"><code class="spaces">            </code><code class="string">"website"</code><code class="plain">: </code><code class="string">""</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>51</code></td><td class="content"><code class="spaces">            </code><code class="string">"bio"</code><code class="plain">: </code><code class="string">"Mostly nature pics.\ue32b\ue32b\ue32b Hope you like them.\ue056\ue32a     \ue334gi\ue334                    "</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>52</code></td><td class="content"><code class="spaces">            </code><code class="string">"profile_picture"</code><code class="plain">: </code><code class="string">"http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>53</code></td><td class="content"><code class="spaces">            </code><code class="string">"full_name"</code><code class="plain">: </code><code class="string">"jent99"</code><code class="plain">,</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>54</code></td><td class="content"><code class="spaces">            </code><code class="string">"id"</code><code class="plain">: </code><code class="string">"6227738"</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>55</code></td><td class="content"><code class="spaces">        </code><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>56</code></td><td class="content"><code class="spaces">    </code><code class="plain">}, {</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>57</code></td><td class="content"><code class="spaces">        </code><code class="comments">/* More photos here*/</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>58</code></td><td class="content"><code class="spaces">    </code><code class="plain">}]</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>59</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
</div>
</div>
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.<br />

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.<br />

<h4>
index.php</h4>
<div class="syntaxhighlighter  " id="highlighter_348828">
<div class="lines">
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>01</code></td><td class="content"><code class="comments">// You can obtain this client ID from the Instagram API page</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>02</code></td><td class="content"><code class="variable">$instagramClientID</code> <code class="plain">= </code><code class="string">'-- place your client id key here --'</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>03</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>04</code></td><td class="content"><code class="variable">$api</code> <code class="plain">= </code><code class="string">'<a href="https://api.instagram.com/v1/media/popular?client_id=">https://api.instagram.com/v1/media/popular?client_id=</a>'</code><code class="plain">.</code><code class="variable">$instagramClientID</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>05</code></td><td class="content"><code class="variable">$cache</code> <code class="plain">= </code><code class="string">'cache.txt'</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>06</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>07</code></td><td class="content"><code class="keyword">if</code><code class="plain">(</code><code class="functions">file_exists</code><code class="plain">(</code><code class="variable">$cache</code><code class="plain">) && </code><code class="functions">filemtime</code><code class="plain">(</code><code class="variable">$cache</code><code class="plain">) > time() - 60*60){</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">    </code><code class="comments">// If a cache file exists, and it is</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">    </code><code class="comments">// fresher than 1 hour, use it</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">    </code><code class="variable">$images</code> <code class="plain">= unserialize(</code><code class="functions">file_get_contents</code><code class="plain">(</code><code class="variable">$cache</code><code class="plain">));</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>11</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>12</code></td><td class="content"><code class="keyword">else</code><code class="plain">{</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">    </code><code class="comments">// Make an API request and create the cache file</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>14</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">    </code><code class="comments">// Fetch the 32 most popular images on Instagram</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">    </code><code class="variable">$response</code> <code class="plain">= </code><code class="functions">file_get_contents</code><code class="plain">(</code><code class="variable">$api</code><code class="plain">);</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>17</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">    </code><code class="variable">$images</code> <code class="plain">= </code><code class="keyword">array</code><code class="plain">();</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>19</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">    </code><code class="comments">// Decode the response and build an array</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">    </code><code class="keyword">foreach</code><code class="plain">(json_decode(</code><code class="variable">$response</code><code class="plain">)->data </code><code class="keyword">as</code> <code class="variable">$item</code><code class="plain">){</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>22</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">        </code><code class="variable">$title</code> <code class="plain">= </code><code class="string">''</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>24</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>25</code></td><td class="content"><code class="spaces">        </code><code class="keyword">if</code><code class="plain">(</code><code class="variable">$item</code><code class="plain">->caption){</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">            </code><code class="variable">$title</code> <code class="plain">= mb_substr(</code><code class="variable">$item</code><code class="plain">->caption->text,0,70,</code><code class="string">"utf8"</code><code class="plain">);</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>27</code></td><td class="content"><code class="spaces">        </code><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>28</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>29</code></td><td class="content"><code class="spaces">        </code><code class="variable">$src</code> <code class="plain">= </code><code class="variable">$item</code><code class="plain">->images->standard_resolution->url;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>30</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>31</code></td><td class="content"><code class="spaces">        </code><code class="variable">$images</code><code class="plain">[] = </code><code class="keyword">array</code><code class="plain">(</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>32</code></td><td class="content"><code class="spaces">            </code><code class="string">"title"</code> <code class="plain">=> htmlspecialchars(</code><code class="variable">$title</code><code class="plain">),</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>33</code></td><td class="content"><code class="spaces">            </code><code class="string">"src"</code> <code class="plain">=> htmlspecialchars(</code><code class="variable">$src</code><code class="plain">)</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>34</code></td><td class="content"><code class="spaces">        </code><code class="plain">);</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>35</code></td><td class="content"><code class="spaces">    </code><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>36</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>37</code></td><td class="content"><code class="spaces">    </code><code class="comments">// Remove the last item, so we still have</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>38</code></td><td class="content"><code class="spaces">    </code><code class="comments">// 32 items when when the cover is added</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>39</code></td><td class="content"><code class="spaces">    </code><code class="functions">array_pop</code><code class="plain">(</code><code class="variable">$images</code><code class="plain">);</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>40</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>41</code></td><td class="content"><code class="spaces">    </code><code class="comments">// Push the cover in the beginning of the array</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>42</code></td><td class="content"><code class="spaces">    </code><code class="functions">array_unshift</code><code class="plain">(</code><code class="variable">$images</code><code class="plain">,</code><code class="keyword">array</code><code class="plain">(</code><code class="string">"title"</code><code class="plain">=></code><code class="string">"Cover"</code><code class="plain">, </code><code class="string">"src"</code><code class="plain">=></code><code class="string">"assets/img/cover.jpg"</code><code class="plain">));</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>43</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>44</code></td><td class="content"><code class="spaces">    </code><code class="comments">// Update the cache file</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>45</code></td><td class="content"><code class="spaces">    </code><code class="functions">file_put_contents</code><code class="plain">(</code><code class="variable">$cache</code><code class="plain">,serialize(</code><code class="variable">$images</code><code class="plain">));</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>46</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>47</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>48</code></td><td class="content"><code class="plain"># Generate the markup</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>49</code></td><td class="content"><code class="variable">$totalPages</code> <code class="plain">= </code><code class="functions">count</code><code class="plain">(</code><code class="variable">$images</code><code class="plain">);</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>50</code></td><td class="content"><code class="keyword">foreach</code><code class="plain">(</code><code class="variable">$images</code> <code class="keyword">as</code> <code class="variable">$i</code><code class="plain">=></code><code class="variable">$image</code><code class="plain">){</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>51</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>52</code></td><td class="content"><code class="spaces">    </code><code class="plain">?></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>53</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>54</code></td><td class="content"><code class="spaces">    </code><code class="plain"><div id=</code><code class="string">"page<?php echo $i+1?>"</code> <code class="keyword">class</code><code class="plain">=</code><code class="string">"page"</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>55</code></td><td class="content"><code class="spaces">        </code><code class="plain"><div </code><code class="keyword">class</code><code class="plain">=</code><code class="string">"img<?php echo $i+1?>"</code><code class="plain">></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>56</code></td><td class="content"><code class="spaces">            </code><code class="plain"><span </code><code class="keyword">class</code><code class="plain">=</code><code class="string">"pageNum <?php echo ($i+1)%2? 'right' : 'left'?>"</code><code class="plain">><?php </code><code class="functions">echo</code> <code class="variable">$i</code><code class="plain">+1?> </code><code class="comments">// <?php echo $totalPages?></span></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>57</code></td><td class="content"><code class="spaces">            </code><code class="plain"><img src=</code><code class="string">"<?php echo $image['src']?>"</code> <code class="plain">alt=</code><code class="string">"<?php echo $image['title']?>"</code> <code class="plain">/></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>58</code></td><td class="content"><code class="spaces">        </code><code class="plain"></div></code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>59</code></td><td class="content"><code class="spaces">    </code><code class="plain"></div></code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>60</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>61</code></td><td class="content"><code class="spaces">    </code><code class="plain"><?php</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>62</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>63</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
</div>
</div>
Caching is straightforward: we are using a temporary file – <em>cache.txt</em>
 – to store a serialized representation of the image array. If the cache
 file is non-existing or is older than an hour, we issue a new API 
request.<br />

Notice the calls to <em><strong>array_pop</strong></em> and <em><strong>array_unshift</strong></em>. These are necessary as to make room for the custom cover image that is stored in <span style="text-decoration: underline;"><em>assets/img</em></span>.
 The magazine works best if we have an even number of pages, otherwise 
we would be unable to turn the last one, which would feel unnatural.<br />

We are now ready for the plugin!<br />

<h3>
jQuery</h3>
Using turn.js is really simple. As we already have the markup of the 
magazine, we just need to call the turn() method. While we are at it, we
 will also listen for presses on the arrow keys, which will trigger page
 transitions.<br />

<h4>
assets/js/script.js</h4>
<div class="syntaxhighlighter  " id="highlighter_601648">
<div class="lines">
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>01</code></td><td class="content"><code class="plain">$(</code><code class="keyword">function</code><code class="plain">(){</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>02</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">    </code><code class="keyword">var</code> <code class="plain">mag = $(</code><code class="string">'#magazine'</code><code class="plain">);</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>04</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">    </code><code class="comments">// initiazlie turn.js on the #magazine div</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">    </code><code class="plain">mag.turn();</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>07</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">    </code><code class="comments">// turn.js defines its own events. We are listening</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">    </code><code class="comments">// for the turned event so we can center the magazine</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">    </code><code class="plain">mag.bind(</code><code class="string">'turned'</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">(e, page, pageObj) {</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>11</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">        </code><code class="keyword">if</code><code class="plain">(page == 1 && $(</code><code class="keyword">this</code><code class="plain">).data(</code><code class="string">'done'</code><code class="plain">)){</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">            </code><code class="plain">mag.addClass(</code><code class="string">'centerStart'</code><code class="plain">).removeClass(</code><code class="string">'centerEnd'</code><code class="plain">);</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">        </code><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">        </code><code class="keyword">else</code> <code class="keyword">if</code> <code class="plain">(page == 32 && $(</code><code class="keyword">this</code><code class="plain">).data(</code><code class="string">'done'</code><code class="plain">)){</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">            </code><code class="plain">mag.addClass(</code><code class="string">'centerEnd'</code><code class="plain">).removeClass(</code><code class="string">'centerStart'</code><code class="plain">);</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">        </code><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">        </code><code class="keyword">else</code> <code class="plain">{</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">            </code><code class="plain">mag.removeClass(</code><code class="string">'centerStart centerEnd'</code><code class="plain">);</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">        </code><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>21</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">    </code><code class="plain">});</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>23</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">    </code><code class="plain">setTimeout(</code><code class="keyword">function</code><code class="plain">(){</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>25</code></td><td class="content"><code class="spaces">        </code><code class="comments">// Leave some time for the plugin to</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">        </code><code class="comments">// initialize, then show the magazine</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>27</code></td><td class="content"><code class="spaces">        </code><code class="plain">mag.fadeTo(500,1);</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>28</code></td><td class="content"><code class="spaces">    </code><code class="plain">},1000);</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>29</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>30</code></td><td class="content"><code class="spaces">    </code><code class="plain">$(window).bind(</code><code class="string">'keydown'</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">(e){</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>31</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>32</code></td><td class="content"><code class="spaces">        </code><code class="comments">// listen for arrow keys</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>33</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>34</code></td><td class="content"><code class="spaces">        </code><code class="keyword">if</code> <code class="plain">(e.keyCode == 37){</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>35</code></td><td class="content"><code class="spaces">            </code><code class="plain">mag.turn(</code><code class="string">'previous'</code><code class="plain">);</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>36</code></td><td class="content"><code class="spaces">        </code><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>37</code></td><td class="content"><code class="spaces">        </code><code class="keyword">else</code> <code class="keyword">if</code> <code class="plain">(e.keyCode==39){</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>38</code></td><td class="content"><code class="spaces">            </code><code class="plain">mag.turn(</code><code class="string">'next'</code><code class="plain">);</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>39</code></td><td class="content"><code class="spaces">        </code><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>40</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>41</code></td><td class="content"><code class="spaces">    </code><code class="plain">});</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>42</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>43</code></td><td class="content"><code class="plain">});</code></td></tr>
</tbody></table>
</div>
</div>
</div>
You can read more about what events the plugin emits and how to use them, in the <a href="https://github.com/blasten/turn.js/wiki/Reference" target="_blank">turn.js reference</a>.<br />

Now let’s make it pretty!<br />

<h3>
CSS</h3>
We need to set explicit dimensions of the magazine and style the pages and page numbers. turn.js will handle the rest.<br />

<h4>
assets/css/styles.css</h4>
<div class="syntaxhighlighter  " id="highlighter_93691">
<div class="lines">
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>01</code></td><td class="content"><code class="plain">#magazine{</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">    </code><code class="keyword">width</code><code class="plain">:</code><code class="value">1040px</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">    </code><code class="keyword">height</code><code class="plain">:</code><code class="value">520px</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin</code><code class="plain">:</code><code class="value">0</code> <code class="value">auto</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">    </code><code class="keyword">position</code><code class="plain">:</code><code class="value">relative</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">    </code><code class="keyword">left</code><code class="plain">:</code><code class="value">0</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>07</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">    </code><code class="plain">opacity:</code><code class="value">0</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>09</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">    </code><code class="plain">-moz-transition:</code><code class="value">0.3</code><code class="plain">s </code><code class="value">left</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-transition:</code><code class="value">0.3</code><code class="plain">s </code><code class="value">left</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">    </code><code class="plain">transition:</code><code class="value">0.3</code><code class="plain">s </code><code class="value">left</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>13</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>14</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>15</code></td><td class="content"><code class="plain">#magazine .page{</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">    </code><code class="keyword">width</code><code class="plain">:</code><code class="value">520px</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">    </code><code class="keyword">height</code><code class="plain">:</code><code class="value">520px</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">    </code><code class="keyword">background-color</code><code class="plain">:</code><code class="value">#ccc</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">    </code><code class="keyword">overflow</code><code class="plain">:</code><code class="value">hidden</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>20</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>21</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>22</code></td><td class="content"><code class="comments">/* Center the magazine when the cover is shown */</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>23</code></td><td class="content"><code class="plain">#magazine.centerStart{</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">    </code><code class="keyword">left</code><code class="plain">:</code><code class="value">-260px</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>25</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>26</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>27</code></td><td class="content"><code class="comments">/* Center the magazine when the last page is shown */</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>28</code></td><td class="content"><code class="plain">#magazine.centerEnd{</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>29</code></td><td class="content"><code class="spaces">    </code><code class="keyword">left</code><code class="plain">:</code><code class="value">260px</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>30</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>31</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>32</code></td><td class="content"><code class="plain">.page img{</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>33</code></td><td class="content"><code class="spaces">    </code><code class="keyword">height</code><code class="plain">:</code><code class="value">520px</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>34</code></td><td class="content"><code class="spaces">    </code><code class="keyword">width</code><code class="plain">:</code><code class="value">520px</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>35</code></td><td class="content"><code class="spaces">    </code><code class="keyword">display</code><code class="plain">:</code><code class="value">block</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>36</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>37</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>38</code></td><td class="content"><code class="comments">/* Show a dark shadow when the cover is shown */</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>39</code></td><td class="content"><code class="plain">.centerStart .turn-page-wrapper:first-child{</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>40</code></td><td class="content"><code class="spaces">    </code><code class="plain">box-shadow:</code><code class="value">0</code> <code class="value">0</code> <code class="value">10px</code> <code class="value">#040404</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>41</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>42</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>43</code></td><td class="content"><code class="comments">/* Page Numbers */</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>44</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>45</code></td><td class="content"><code class="plain">span.pageNum{</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>46</code></td><td class="content"><code class="spaces">    </code><code class="keyword">background-color</code><code class="plain">: rgba(</code><code class="value">0</code><code class="plain">, </code><code class="value">0</code><code class="plain">, </code><code class="value">0</code><code class="plain">, </code><code class="value">0.3</code><code class="plain">);</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>47</code></td><td class="content"><code class="spaces">    </code><code class="keyword">bottom</code><code class="plain">: </code><code class="value">25px</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>48</code></td><td class="content"><code class="spaces">    </code><code class="plain">box-shadow: </code><code class="value">0</code> <code class="value">0</code> <code class="value">3px</code> <code class="plain">rgba(</code><code class="value">0</code><code class="plain">, </code><code class="value">0</code><code class="plain">, </code><code class="value">0</code><code class="plain">, </code><code class="value">0.25</code><code class="plain">);</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>49</code></td><td class="content"><code class="spaces">    </code><code class="keyword">color</code><code class="plain">: </code><code class="value">#FFFFFF</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>50</code></td><td class="content"><code class="spaces">    </code><code class="keyword">font-size</code><code class="plain">: </code><code class="value">11px</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>51</code></td><td class="content"><code class="spaces">    </code><code class="keyword">height</code><code class="plain">: </code><code class="value">24px</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>52</code></td><td class="content"><code class="spaces">    </code><code class="keyword">line-height</code><code class="plain">: </code><code class="value">22px</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>53</code></td><td class="content"><code class="spaces">    </code><code class="plain">opacity: </code><code class="value">0.9</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>54</code></td><td class="content"><code class="spaces">    </code><code class="keyword">position</code><code class="plain">: </code><code class="value">absolute</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>55</code></td><td class="content"><code class="spaces">    </code><code class="keyword">text-align</code><code class="plain">: </code><code class="value">center</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>56</code></td><td class="content"><code class="spaces">    </code><code class="keyword">width</code><code class="plain">: </code><code class="value">55px</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>57</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>58</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>59</code></td><td class="content"><code class="plain">span.pageNum.</code><code class="value">left</code><code class="plain">{</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>60</code></td><td class="content"><code class="spaces">    </code><code class="keyword">left</code><code class="plain">:</code><code class="value">0</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>61</code></td><td class="content"><code class="spaces">    </code><code class="keyword">right</code><code class="plain">:</code><code class="value">auto</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>62</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>63</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>64</code></td><td class="content"><code class="plain">span.pageNum.</code><code class="value">right</code><code class="plain">{</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>65</code></td><td class="content"><code class="spaces">    </code><code class="keyword">left</code><code class="plain">:</code><code class="value">auto</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>66</code></td><td class="content"><code class="spaces">    </code><code class="keyword">right</code><code class="plain">:</code><code class="value">0</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>67</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>68</code></td><td class="content"> </td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>69</code></td><td class="content"><code class="comments">/* Hide the page number on the cover */</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>70</code></td><td class="content"><code class="plain">#page</code><code class="value">1</code> <code class="plain">.pageNum{</code></td></tr>
</tbody></table>
</div>
<div class="line alt1">
<table><tbody>
<tr><td class="number"><code>71</code></td><td class="content"><code class="spaces">    </code><code class="keyword">display</code><code class="plain">:</code><code class="value">none</code><code class="plain">;</code></td></tr>
</tbody></table>
</div>
<div class="line alt2">
<table><tbody>
<tr><td class="number"><code>72</code></td><td class="content"><code class="plain">}</code></td></tr>
</tbody></table>
</div>
</div>
</div>
With this our magazine is complete!<br />

<h3>
We’re done!</h3>
This example works in all recent browsers – Firefox, Chrome, Safari, 
Opera and even IE. It is even usable on iOS and Android. You can use 
this effect as part of photo galleries, templates or even real 
magazines. However you will have to create a fallback version for older 
browsers, which don’t have what it takes to display it properly.<br />

</div>

Making a Page Flip Magazine with turn.js

Demo Download 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 t…

Đọc thêm »

24 May 2012

Load more posts