Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 131 lines (106 sloc) 4.665 kb
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
7 <title>Multi-Level Backbone Image Gallery</title>
e229e34 @addyosmani removing old files
authored
8 <link rel="stylesheet" href="gallery.css" type="text/css" media="screen" charset="utf-8" />
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
9 <link rel="stylesheet" href="shadows.css" type="text/css" media="screen" charset="utf-8" />
10 <link rel="stylesheet" href="buttons.css" type="text/css" media="screen" charset="utf-8" />
11
12
13
14
15 <script id="indexTmpl" type="text/x-jquery-tmpl">
16 <div class="item drop-shadow round">
17 <div class="item-image">
18 <a href="#subalbum/${cid}"><img src="${attributes.image}" alt="${attributes.title}" /></a>
19 </div>
20 <div class="item-artist">${attributes.artist}</div>
21 <div class="item-title">${attributes.title}</div>
22 <div class="item-years">${attributes.years}</div>
23 </div>
24 </script>
25
26
27 <script id="subindexTmpl" type="text/x-jquery-tmpl">
28 <div class="item drop-shadow round">
29 <div class="item-image subalbum">
30 <a href="#subalbum/${subalbum}/${attributes.pid}"><img src="${attributes.image}" alt="${attributes.title}" alt="No images in this folder"/></a>
31 </div>
32 <div class="item-artist">${attributes.artist}</div>
33 <div class="item-title">${attributes.title}</div>
34 <div class="item-price">$${attributes.price}</div>
35 </div>
36
37 </script>
38
39
40 <script id="itemTmpl" type="text/x-jquery-tmpl">
41 <div class="item-detail">
42 <div class="item-image drop-shadow round"><img src="${attributes.large_image}" alt="${attributes.title}" /></div>
43 <div class="item-info">
44 <div class="item-artist">${attributes.artist}</div>
45 <div class="item-title">${attributes.title}</div>
46 <div class="item-price">$${attributes.price}</div>
47 <br />
48 <div class="item-link"><a href="${attributes.url}" class="button">Buy this item</a></div>
49 <div class="back-link"><a href="#" class="button">&laquo; Back to Albums</a></div>
50 </div>
51 </div>
52 </script>
53
54 </head>
55 <body>
56 <div id="container">
57 <div id="header">
58 <h1>
d0fea65 @addyosmani tidying up graceful deg code
authored
59 <a href="index.php">Multi-Level Backbone Gallery</a>
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
60 </h1>
61 <h3>Created by Addy Osmani for 'Building Single-page Apps With jQuery's Best Friends'</h3>
62 </div>
63
64 <div id="main">
42cf1c6 @addyosmani tidying up CSS for gallery images in degraded mode
authored
65 <div class="jstest">This application is running with JavaScript turned off.</div>
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
66 </div>
67 </div>
68 <script src="LAB.min.js" type="text/javascript"></script>
e229e34 @addyosmani removing old files
authored
69
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
70
d0fea65 @addyosmani tidying up graceful deg code
authored
71 <?
72
73
e229e34 @addyosmani removing old files
authored
74 //PHP fallback to enable graceful degredation
d0fea65 @addyosmani tidying up graceful deg code
authored
75
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
76
e229e34 @addyosmani removing old files
authored
77 //feel free to substitute with a more secure read-in method
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
78 $json = file_get_contents("data/album1.json");
79 $json_a=json_decode($json,true);
80 $folderType = $_GET['view'];
81 $index = $_GET['ind'];
82 $subal = $_GET['subalbum'];
83 $subalbums = array();
84 $i =0; $j =0;
4c9a295 @addyosmani patching index
authored
85 error_reporting(0);
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
86
e229e34 @addyosmani removing old files
authored
87 //expose convenient access to subalbums
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
88 foreach ($json_a as $p => $k){
89 foreach($k["subalbum"] as $sub){
90 $subalbums[$i][$j] = $sub;
91 $j++;
92 }
93 $i++;
94 }
95
e229e34 @addyosmani removing old files
authored
96 //handle 'view' switching
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
97 switch($folderType){
98 case "subalbum":
99 echo "<ul class='gallery'>";
100 foreach($subalbums[$index] as $sub){
d0fea65 @addyosmani tidying up graceful deg code
authored
101 echo "<li class='item drop-shadow round'><a href='" . $sub['large_image'] . "'><img src='" . $sub['image'] . "'></img>" . $sub['title'] . "</a> " . $sub['artist'] ." </li>";
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
102
e229e34 @addyosmani removing old files
authored
103 }
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
104 echo "</ul>";
105 break;
106
107 default:
108 $ind = 0;
109 echo "<ul class='gallery'>";
110 foreach($json_a as $p => $k){
42cf1c6 @addyosmani tidying up CSS for gallery images in degraded mode
authored
111 echo "<li class='item drop-shadow round'><a href='index.php?view=subalbum&ind=$ind'><img src='" . $k['image'] . "'></img>" . $k['title'] . "</a> " . $k['years'] ." </li>";
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
112 $ind++;
113 }
114 echo "</ul>";
115 break;
116 }
117
4c9a295 @addyosmani patching index
authored
118
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
119 ?>
e229e34 @addyosmani removing old files
authored
120 <script type="text/javascript">
121 $LAB
122 .script("jquery-1.4.4.min.js").wait()
123 .script("jquery.tmpl.min.js")
124 .script("underscore-min.js")
125 .script("backbone-min.js")
126 .script("cacheprovider.js").wait()
127 .script("gallery.js");
128 </script>
9430a91 @addyosmani adding integrated graceful degradation fallback with updates
authored
129 </body>
130 </html>
Something went wrong with that request. Please try again.