V1.0.1

- Improved ImageView
- Login-Window now shows the version of Lychee
- iPhone Homescreen Icon
- Improved Readme with Pictures

css/style.css

@@ -350,6 +350,11 @@ header {
 		display: none;
 	}
 	
+	/* Button Custom ------------------------------------------------*/
+	header .button.icon-refresh {
+		padding:  7px 10px 4px 10px;
+	}
+
 	/* Button Divider ------------------------------------------------*/
 	header .button_divider {
 		float: right;
@@ -854,6 +859,13 @@ header {
 	.sign_in input.error:focus {
 		box-shadow: 0px 1px 0px #777, inset 0px 0px 3px #333, 0px 0px 5px #cc0007;
 	}
+	.message #version {
+		display: inline-block;
+		margin-top: 23px;
+		margin-left: 19px;
+		color: #888;
+		text-shadow: 0px -1px 0px #111;
+	}
 	
 	/* Sign in ------------------------------------------------*/
 	.copylink {
@@ -891,7 +903,7 @@ header {
 	background-repeat: no-repeat;
 	background-position: 50% 50%;
 	background-size: contain;
-	-webkit-transition: top .3s, bottom .3s;
+	-webkit-transition: top .3s, bottom .3s, margin-top .3s;
 	
 	-webkit-animation-name: zoomIn;
 	-webkit-animation-duration: .3s;
@@ -906,6 +918,12 @@ header {
 	animation-duration: .3s;
 	animation-fill-mode: forwards;
 }
+#image_view #image.small {
+	top: 50%;
+	right: auto;
+	bottom: auto;
+	left: 50%;
+}
 	
 	/* Previous/Next Buttons ------------------------------------------------*/
 	#image_view a {

index.html

@@ -14,6 +14,7 @@
 		<link type="text/css" rel="stylesheet" href="css/style.css">
 		<link rel="shortcut icon" href="img/favicon.png">
 
+		<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon.png">
 		<meta name="apple-mobile-web-app-status-bar-style" content="black" >
 		<meta name="viewport" content="width=device-width, user-scalable=no">
 		<meta name="apple-mobile-web-app-capable" content="yes">
@@ -31,6 +32,7 @@
 		<div id="tools_albums">
 			<a class="button" id="button_signout">Sign Out</a>
 			<a class="button icon icon-plus-sign button_add"></a>
+			<!--<a class="button icon icon-refresh" id="button_sync"></a>-->
 			<a class="button_divider"></a>
 			<input id="search" type="text" name="search" placeholder="Search …">
 		</div>

js/build.js

@@ -140,6 +140,7 @@ function buildSignInModal() {
 	modal += 			"<label>Username:</label><input id='username' type='text' name='' value=''>";
 	modal += 			"<label>Password:</label><input id='password' type='password' name='' value=''>";
 	modal += 		"</div>";
+	modal +=	"<div id='version'>Version " + version + "</div>";
 	modal += 	"<a onclick='login()' class='button active'>Sign in</a>";
 	modal += 	"</div>";
 	modal += "</div>";

js/functions.js

@@ -68,21 +68,39 @@ function setURL(website_url) {
 }
 
 function getURL() {
+
 	closeContextMenu();
 	hash = document.location.hash.replace("#", "");
-	if (hash.indexOf("a")!=-1) {
+	
-		if (hash.indexOf("p")!=-1) {
+	albumID = "";
-			hash = hash.split("p");
+	photoID = "";
-			content.hide();
+	
-			showImageview(hash[1]);
+	if (hash.indexOf("a")!=-1) albumID = hash.split("p")[0].replace("a", "");
-			if (content.html()=="") loadPhotos(hash[0].replace("a", ""), true);
+	if (hash.indexOf("p")!=-1) photoID = hash.split("p")[1];
-		} else {
+
-			if (visibleImageview()) hideImageview();
+	if (hash=="upload") {
-			else loadPhotos(hash.replace("a", ""), false);
+	
-		}
-	} else {
 		loadAlbums();
+		$("body").append(buildAddModal);
+	
+	} else if (albumID&&photoID) {
+	
+		content.hide();
+		showImageview(photoID);
+		if (content.html()=="") loadPhotos(albumID, true);
+	
+	} else if (albumID) {
+	
+		if (!visibleControls()) showControls();
+		if (visibleImageview()) hideImageview();
+		else loadPhotos(albumID, false);
+		
+	} else {
+	
+		loadAlbums();
+	
 	}
+	
 }
 
 /*
@@ -190,6 +208,11 @@ function showControls() {
 		image_view.css("background-color", "rgba(30,30,30,.99)");
 		loading.css("opacity", 1);
 		header.css("margin-Top", "0px");
+		if ($("#image_view #image.small").length>0) {
+			$("#image_view #image").css({
+				marginTop: -1*($("#image_view #image").height()/2)+20
+			});
+		} else {
 			$("#image_view #image").css({
 				top: 70,
 				right: 30,
@@ -198,6 +221,7 @@ function showControls() {
 			});
 		}
 	}
+}
 function hideControls() {
 	if (visibleImageview()) {
 		clearTimeout($(window).data("timeout"));
@@ -207,12 +231,18 @@ function hideControls() {
 			image_view.css("background-color", "#111");
 			loading.css("opacity", 0);
 			header.css("margin-Top", "-45px");
+			if ($("#image_view #image.small").length>0) {
+				$("#image_view #image").css({
+					marginTop: -1*($("#image_view #image").height()/2)
+				});
+			} else {
 				$("#image_view #image").css({
 					top: 0,
 					right: 0,
 					bottom: 0,
 					left: 0
 				});
+			}
 		}, 500));
 	}
 }
@@ -354,6 +384,21 @@ function visibleInfobox() {
 	else return true;
 }
 
+function isPhotoSmall(photo) {
+
+	size = [
+		["width", false],
+		["height", false]
+	];
+
+	if (photo.width<$(window).width()-60) size["width"] = true;
+	if (photo.height<$(window).height()-100) size["height"] = true;
+	
+	if (size["width"]&&size["height"]) return true;
+	else return false;
+
+}
+
 /*
 	Key Function
 	This function triggers events when a special key is pressed.
@@ -447,7 +492,7 @@ function renamePhoto(photoID) {
 	
 	newTitle = prompt("Please enter a new title for this photo:", oldTitle);
 
-	if (photoID!=""&&photoID!=null&&photoID!=undefined&&newTitle.length>2&&newTitle.length<31) {
+	if (photoID!=null&&photoID!=undefined&&newTitle.length<31) {
 
 		loadingFadeIn("loading");
 
@@ -680,8 +725,10 @@ function loadPhotoInfo(photoID) {
 		}
 
 		image_view.attr("data-id", photoID);
-		if (visibleControls()) image_view.html("").append("<a id='previous' class='icon-caret-left'></a><a id='next' class='icon-caret-right'></a><div id='image_wrapper'><div id='image' style='background-image: url(" + data.url + ")'></div></div>");
+		if (visibleControls()&&isPhotoSmall(data)) image_view.html("").append("<a id='previous' class='icon-caret-left'></a><a id='next' class='icon-caret-right'></a><div id='image' class='small' style='background-image: url(" + data.url + "); width: " + data.width + "px; height: " + data.height + "px; margin-top: -" + parseInt(data.height/2-20) + "px; margin-left: -" + data.width/2 + "px;'></div>");
-		else image_view.html("").append("<a id='previous' style='left: -50px' class='icon-caret-left'></a><a id='next' style='right: -50px' class='icon-caret-right'></a><div id='image_wrapper'><div id='image' style='background-image: url(" + data.url + "); top: 0px; right: 0px; bottom: 0px; left: 0px;'></div></div>");
+		else if (visibleControls()) image_view.html("").append("<a id='previous' class='icon-caret-left'></a><a id='next' class='icon-caret-right'></a><div id='image' style='background-image: url(" + data.url + ")'></div>");
+		else if (isPhotoSmall(data)) image_view.html("").append("<a id='previous' style='left: -50px' class='icon-caret-left'></a><a id='next' style='right: -50px' class='icon-caret-right'></a><div id='image' class='small' style='background-image: url(" + data.url + "); width: " + data.width + "px; height: " + data.height + "px; margin-top: -" + parseInt(data.height/2) + "px; margin-left: -" + data.width/2 + "px;'></div>");
+		else image_view.html("").append("<a id='previous' style='left: -50px' class='icon-caret-left'></a><a id='next' style='right: -50px' class='icon-caret-right'></a><div id='image' style='background-image: url(" + data.url + "); top: 0px; right: 0px; bottom: 0px; left: 0px;'></div>");
 		image_view.removeClass("fadeOut").addClass("fadeIn").show();
 		
 		if (!visibleControls()) hideControls(true);
@@ -914,6 +961,18 @@ function loadNextPhoto() {
 
 }
 
+function syncFolder() {
+
+	params = "function=syncFolder";
+	$.ajax({type: "POST", url: api_path, data: params, success: function(data) {
+
+		if (data==1) setURL("a0");
+		else loadingFadeIn("error");
+
+	}, error: ajaxError });
+
+}
+
 function search(term) {
 
 	clearTimeout($(window).data("timeout"));

js/main.js

@@ -11,7 +11,8 @@ var header = $("header"),
 	image_view = $("#image_view"),
 	loading = $("#loading"),
 	infobox = $("#infobox"),
-	api_path = "php/api.php";
+	api_path = "php/api.php",
+	version = "1.0.1";
 
 $(document).ready(function(){
 
@@ -46,6 +47,7 @@ $(document).ready(function(){
 	$("#button_edit").live("click", function() { renamePhoto() });
 	$("#button_info").live("click", function() { showInfobox() });
 	$("#button_archive").live("click", function() { getAlbumArchive() });
+	$("#button_sync").live("click", function() { syncFolder() });
 
 	/* Rename Album/Photo via Titlebar */
 	$("#title.editable").live("click", function() {

js/view.js

@@ -13,6 +13,9 @@ var header = $("header"),
 	
 $(document).ready(function(){
 
+	/* Window */
+	$(window).keydown(key);
+
 	/* Infobox */
 	$("#infobox_overlay, #infobox .header a").live("click", function() { hideInfobox() });
 	$("#button_info").live("click", function() { showInfobox() });
@@ -27,6 +30,35 @@ $(document).ready(function(){
 	
 });
 
+function key(e) {
+
+	code = (e.keyCode ? e.keyCode : e.which);
+	if (code==27&&visibleInfobox()) { hideInfobox(); e.preventDefault(); }
+
+}
+
+function visibleInfobox() {
+
+	if (parseInt(infobox.css("right").replace("px", ""))<0) return false;
+	else return true;
+	
+}
+
+function isPhotoSmall(photo) {
+
+	size = [
+		["width", false],
+		["height", false]
+	];
+
+	if (photo.width<$(window).width()-60) size["width"] = true;
+	if (photo.height<$(window).height()-100) size["height"] = true;
+	
+	if (size["width"]&&size["height"]) return true;
+	else return false;
+
+}
+
 function showInfobox() {
 
 	$("body").append("<div id='infobox_overlay'></div>");
@@ -51,7 +83,8 @@ function loadPhotoInfo(photoID) {
 		headerTitle.html(data.title);
 
 		image_view.attr("data-id", photoID);
-		image_view.html("").append("<div id='image' style='background-image: url(" + data.url + ")'></div>");
+		if (isPhotoSmall(data)) image_view.html("").append("<div id='image' class='small' style='background-image: url(" + data.url + "); width: " + data.width + "px; height: " + data.height + "px; margin-top: -" + parseInt(data.height/2) + "px; margin-left: -" + data.width/2 + "px;'></div>");
+		else image_view.html("").append("<div id='image' style='background-image: url(" + data.url + "); top: 70px; right: 30px; bottom: 30px; left: 30px;'></div>");
 		image_view.removeClass("fadeOut").addClass("fadeIn").show();
 		
 		infobox.html(buildInfobox(data)).show();

php/api.php

@@ -16,7 +16,6 @@ if((isset($_POST["function"])&&$_POST["function"]!="")||(isset($_GET["function"]
     // Security
     if(isset($_POST["albumID"])&&($_POST["albumID"]==""||$_POST["albumID"]<0)) exit("Wrong parameter type for 'albumID'!");
     if(isset($_POST["photoID"])&&$_POST["photoID"]=="") exit("Wrong parameter type for 'photoID'!");
-    if(isset($_POST["title"])&&$_POST["title"]=="") exit("Wrong parameter type for 'title'!");
 
     if($_SESSION["login"]==true) {
 
@@ -48,9 +47,12 @@ if((isset($_POST["function"])&&$_POST["function"]!="")||(isset($_GET["function"]
         // Upload Function
 		if($_POST["function"]=="upload"&&isset($_FILES)&&isset($_POST["albumID"])) echo upload($_FILES, $_POST["albumID"]);
 		
-		// Upload Function
+		// Search Function
 		if($_POST["function"]=="search"&&isset($_POST["term"])) echo array2json(search($_POST["term"]));
 		
+		// Sync Function
+		if($_POST["function"]=="syncFolder") echo syncFolder();
+                
 		// Session Functions
 		if($_POST["function"]=="logout") logout();
 		if($_POST["function"]=="loggedIn") echo true;

php/config.php

@@ -9,8 +9,9 @@
 
 //Database configurations
 $db = "lychee"; //Database name
-$dbUser = ""; //Username of the database
+$dbUser = "lychee"; //Username of the database
-$dbPassword = ""; //Password of the Database
+$dbPassword = "lychee_passwd"; //Password of the Database
+$dbHost = "localhost"; //Host of the Database
 
 //lychee user configuration
 $user = "lychee"; //lychee username

php/functions.php

@@ -11,16 +11,16 @@ include("config.php");
 
 // Database Functions
 function dbConnect() {
-    global $db, $dbUser, $dbPassword;
+    global $db, $dbUser, $dbPassword, $dbHost;
-    $connect = mysql_connect("localhost", $dbUser, $dbPassword);
+    $connect = mysql_connect($dbHost, $dbUser, $dbPassword);
     if(!$connect) {
         echo "No connection: ".mysql_error();
         return false;
     }
     $dbSelect = mysql_select_db($db);
     if(!$dbSelect) {
-        echo "Can not find Database!";
+	    if(createDatabase($db)){$dbSelect = mysql_select_db($db);}
-        return false;
+	    else {echo "Can not create Database!"; return false;}
     }
     $query = "SELECT * FROM photos, albums;";
     if(!mysql_query($query)) createTables();
@@ -34,6 +34,12 @@ function dbClose() {
     }
     return true;
 }
+function createDatabase($db) {
+	$query = "CREATE DATABASE $db;";
+	$result = mysql_query($query);
+	if(!$result) return false;
+	return true;
+}
 function createTables() {
     $query = "CREATE TABLE IF NOT EXISTS `albums` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
@@ -524,7 +530,7 @@ function movePhoto($photoID, $newAlbum) {
 }
 function setPhotoTitle($photoID, $title) {
     $title = mysql_real_escape_string(urldecode($title));
-    if(strlen($title)<3||strlen($title)>30) return false;
+    if(strlen($title)>30) return false;
     $query = "UPDATE photos SET title = '$title' WHERE id = '$photoID';";
     $result = mysql_query($query);
     if(!$result) return false;

readme.md

@@ -2,7 +2,10 @@
 
 #### A great looking and easy-to-use Photo-Management-System.
 
-Lychee is open-source and free to use wherever you want. Just download the source and follow the instructions to install Lychee on your server.
+![Lychee ImageView](http://lychee.electerious.com/uploads/big/13511584079432.png)
+![Lychee ImageView](http://lychee.electerious.com/uploads/big/13497110451270.png)
+
+Lychee is a free, easy to use and great looking photo-management-system you can run on your server to manage and share photos. Just download the source and follow the instructions to install Lychee wherever you want.
 
 ## Installation
 
@@ -20,15 +23,18 @@ To use Lychee without restrictions, we recommend to increase the values of the f
 	upload_max_filesize = 100M
 	max_file_uploads = 100
	post_max_size = 100M
 
-#### MySQL configuration
+#### Folder permissions
 
-Create a new Database and remember the name.
+Change the permissions of `/lychee/uploads` to 777, including all subfolders:
+
+	chmod -R 777 /lychee/uploads
 
 #### Lychee configuration `lychee/php/config.php`
 
 Change the following properties with your MySQL information:
 
-	$db = The name of the Database you want to use  
	$dbUser = Your MySQL username  
	$dbPassword = Your MySQL password
+	$db = The name of the Database you want to use
+	-> Lychee will create the Database for you
	$dbUser = Your MySQL username  
	$dbPassword = Your MySQL password
	$dbHost = Your MySQL host (in most cases you can use localhost)
 
 Your photos are protected by a username and password you need to set: