Browse files

removing old files

  • Loading branch information...
1 parent c5c5c0a commit e229e3406596c1ef03394b227f8a67b09468d5a4 @addyosmani committed Feb 14, 2011
Showing with 19 additions and 107 deletions.
  1. +3 −4 README
  2. 0 jsongallery.css → gallery.css
  3. +0 −78 index.html
  4. +16 −25 index.php
View
7 README
@@ -1,10 +1,9 @@
-## Backbone.js & Underscore Multi-level Client-Side Image Gallery Powered by JSON
+## Backbone.js Gallery - Building Single Page Applications With jQuery's Best Friends
-Inspired by the store example by Elf M. Sternberg I decided to try taking this concept a few levels further by creating a multi-level Backbone based image gallery which supports album covers, albums and sub-albums. With three views this project aims to provide a lightweight, clean solution that can be used for personal projects easily.
-Bookmarking is supported on all levels and back-button support is currently working across on these across current FF, Safari and Chrome. IE testing results forthcoming.
## Compatibility
-Compatible with latest Firefox, Safari, Chrome (requires non-local testing), IE9, IE8, Opera 9.6.x, Opera 10.x, Opera 11.
+Compatible with latest Firefox, Safari, Chrome (requires non-local testing), IE9, IE8, Opera 9.6.x, Opera 10.x, Opera 11.
+
View
0 jsongallery.css → gallery.css
File renamed without changes.
View
78 index.html
@@ -1,78 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
- <title>Multi-Level Backbone Image Gallery</title>
- <link rel="stylesheet" href="jsongallery.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="shadows.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="buttons.css" type="text/css" media="screen" charset="utf-8" />
-
-
-
- <script id="indexTmpl" type="text/x-jquery-tmpl">
- <div class="item drop-shadow round">
- <div class="item-image">
- <a href="#subalbum/${cid}"><img src="${attributes.image}" alt="${attributes.title}" /></a>
- </div>
- <div class="item-artist">${attributes.artist}</div>
- <div class="item-title">${attributes.title}</div>
- <div class="item-years">${attributes.years}</div>
- </div>
- </script>
-
-
- <script id="subindexTmpl" type="text/x-jquery-tmpl">
- <div class="item drop-shadow round">
- <div class="item-image subalbum">
- <a href="#subalbum/${subalbum}/${attributes.pid}"><img src="${attributes.image}" alt="${attributes.title}" alt="No images in this folder"/></a>
- </div>
- <div class="item-artist">${attributes.artist}</div>
- <div class="item-title">${attributes.title}</div>
- <div class="item-price">$${attributes.price}</div>
- </div>
-
- </script>
-
-
- <script id="itemTmpl" type="text/x-jquery-tmpl">
- <div class="item-detail">
- <div class="item-image drop-shadow round"><img src="${attributes.large_image}" alt="${attributes.title}" /></div>
- <div class="item-info">
- <div class="item-artist">${attributes.artist}</div>
- <div class="item-title">${attributes.title}</div>
- <div class="item-price">$${attributes.price}</div>
- <br />
- <div class="item-link"><a href="${attributes.url}" class="button">Buy this item</a></div>
- <div class="back-link"><a href="#" class="button">&laquo; Back to Albums</a></div>
- </div>
- </div>
- </script>
-
- </head>
- <body>
- <div id="container">
- <div id="header">
- <h1>
- <a href="#">Multi-Level Backbone Gallery</a>
- </h1>
- <h3>Created by Addy Osmani for 'Building Single-page Apps With jQuery's Best Friends'</h3>
- </div>
-
- <div id="main">
- <div class="jstest">This application requires JavaScript to function correctly.</div>
- </div>
- </div>
- <script src="LAB.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $LAB
- .script("jquery-1.4.4.min.js").wait()
- .script("jquery.tmpl.min.js")
- .script("underscore-min.js")
- .script("backbone-min.js")
- .script("cacheprovider.js").wait()
- .script("gallery.js");
- </script>
- </body>
-</html>
View
41 index.php
@@ -5,7 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multi-Level Backbone Image Gallery</title>
- <link rel="stylesheet" href="jsongallery.css" type="text/css" media="screen" charset="utf-8" />
+ <link rel="stylesheet" href="gallery.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="shadows.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="buttons.css" type="text/css" media="screen" charset="utf-8" />
@@ -66,26 +66,15 @@
</div>
</div>
<script src="LAB.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $LAB
- .script("jquery-1.4.4.min.js").wait()
- .script("jquery.tmpl.min.js")
- .script("underscore-min.js")
- .script("backbone-min.js")
- .script("cacheprovider.js").wait()
- .script("gallery.js");
- </script>
+
<?
-/*
-
- PHP fallback to enable graceful degredation
-
-*/
+//PHP fallback to enable graceful degredation
+//feel free to substitute with a more secure read-in method
$json = file_get_contents("data/album1.json");
$json_a=json_decode($json,true);
$folderType = $_GET['view'];
@@ -95,7 +84,7 @@
$i =0; $j =0;
-
+//expose convenient access to subalbums
foreach ($json_a as $p => $k){
foreach($k["subalbum"] as $sub){
$subalbums[$i][$j] = $sub;
@@ -104,21 +93,14 @@
$i++;
}
-
+//handle 'view' switching
switch($folderType){
-
- case "photo":
- //print_r($subalbums[$subal][$index]);
- break;
-
case "subalbum":
echo "<ul class='gallery'>";
foreach($subalbums[$index] as $sub){
-
echo "<li class='item drop-shadow round'><a href='" . $sub['large_image'] . "'><img src='" . $sub['image'] . "'></img>" . $sub['title'] . "</a> " . $sub['artist'] ." </li>";
- }
-
+ }
echo "</ul>";
break;
@@ -134,5 +116,14 @@
}
?>
+ <script type="text/javascript">
+ $LAB
+ .script("jquery-1.4.4.min.js").wait()
+ .script("jquery.tmpl.min.js")
+ .script("underscore-min.js")
+ .script("backbone-min.js")
+ .script("cacheprovider.js").wait()
+ .script("gallery.js");
+ </script>
</body>
</html>

0 comments on commit e229e34

Please sign in to comment.