Simple Gallery zum Verwalten von FTP-Bildern

12/14/2015 14:28 LekoArts#1
Hallo!

Seit geraumer Zeit uploade ich mithilfe von Share X meine eigenen Screenshots und allgemein Bilder in einen Ordner auf meinem Webspace. Allerdings fehlt mir eine Übersicht/Kontrolle wie bei Puuush o.ä.

Ich würde nämlich gerne - wenn ich diesen Ordner bzw. die Sudbomain aufrufe - mich einloggen und dann eine Verwaltungsoberfläche für die Bilder haben. Ich will sie mir angucken, ordnen, löschen etc.

Gegoogelt habe ich natürlich schon und dabei ist ja das hier mit das erste Ergebnis:
[Only registered and activated users can see links. Click Here To Register...]

Allerdings habe ich das Gefühl, dass alle dort verlinkten Beispiele nicht genau meinem kleinen Zweck dienen. Meine Frage an euch: Sehe ich das falsch oder habt ihr sinnvolle Alternativen?

Gruß
LeKoArts
12/14/2015 15:11 False#2
Habe mal kurz gegoogelt und was gefunden, was ich persönlich für deine Situation sehr ansprechend finde : [Only registered and activated users can see links. Click Here To Register...]
12/14/2015 15:30 Devsome#3
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]

Direkt eins mit Login vorher habe ich nicht gefunden, aber könntest ja ggf mit einer .htaccess ein Login verwirklichen :3
12/14/2015 19:20 LekoArts#4
Quote:
Originally Posted by .ƒaℓsє. View Post
Habe mal kurz gegoogelt und was gefunden, was ich persönlich für deine Situation sehr ansprechend finde : [Only registered and activated users can see links. Click Here To Register...]
Danke für den Link, aber das hat nicht ganz genau gepasst.

Quote:
Originally Posted by Devsome View Post
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]

Direkt eins mit Login vorher habe ich nicht gefunden, aber könntest ja ggf mit einer .htaccess ein Login verwirklichen :3
Cute File Browser habe ich mir jetzt draufgepackt, danke dafür!

Hat im Prinzip genau die Funktionen, die ich wollte. Lässt sich ja auch erweitern ....

Allerdings bekomme ich es nicht hin von den schon vorhandenen Dateien das letzte Änderungsdatum per jQuery zu bekommen. Ich wollte nämlich dieses dann mitspeichern (neben dem Namen und der Größe). Ideen dafür? Habe es mit .lastModifiedDate probiert, aber geht ja anscheinend nicht:
[Only registered and activated users can see links. Click Here To Register...]

Das könnte ich dann auch für "Isotope" / "MixItUp" benutzen um es nach Datum zu sortieren.
12/14/2015 19:51 Devsome#5
Meinst du es so ?
[Only registered and activated users can see links. Click Here To Register...]
12/14/2015 20:57 LekoArts#6
Quote:
Originally Posted by Devsome View Post
Meinst du es so ?
[Only registered and activated users can see links. Click Here To Register...]
Ja :)
12/14/2015 21:11 Devsome#7
Quote:
Originally Posted by LeKoArts View Post
Ja :)
Füge oder editiere folgendes:

style.css
Code:
.filemanager .data li .lastchange {
	color: #b6c1c9;
	font-size: 13px;
	font-weight: 400;
	width: 55px;
	height: 10px;
	top: 77px;
	white-space: nowrap;
	position: absolute;
	display: inline-block;
}
script.js line 347
Code:
var lastchange = timeConverter(f.lastchange);
script.js line 351
Code:
var file = $('<li class="files"><a href="'+ f.path+'" title="'+ f.path +'" class="files">'+icon+'<span class="name">'+ name +'</span> <span class="details">'+fileSize+'</span><span class="lastchange">' + lastchange + '</span></a></li>');
[Only registered and activated users can see links. Click Here To Register...]

scan.php line 32 ein , hinzufügen
line 33
Code:
"lastchange" => filemtime($dir . '/' . $f)
//Edit: Lines stimmen nicht, habe das Skript bei mir von unnötigen Zeilenumbrüchen befreit.
[Only registered and activated users can see links. Click Here To Register...]



Somit hast du in PHP die Datein ausgelesen und in Javascript einfach nur empfangen bzw. damit gearbeitet :3
Daher ist das Format wenn du die scan.php aufrufst in JSON.
12/14/2015 22:38 LekoArts#8
Erstmal danke für die Anleitung. Bin auch selber auf filemtime gestoßen, aber wusste nicht wie ich das richtig einbinde!

Allerdings kennt er die Funktion "timeConverter" nicht. Deshalb habe ich in der scan.php deinen Code abgeändert:

PHP Code:
"lastchange" => date('Y-m-d H:i:s',filemtime($dir . '/' . $f)) // Gets the time of last change 
Sieht dann so aus:

[Only registered and activated users can see links. Click Here To Register...]
12/14/2015 23:01 Devsome#9
Quote:
Originally Posted by LeKoArts View Post
Erstmal danke für die Anleitung. Bin auch selber auf filemtime gestoßen, aber wusste nicht wie ich das richtig einbinde!

Allerdings kennt er die Funktion "timeConverter" nicht. Deshalb habe ich in der scan.php deinen Code abgeändert:

PHP Code:
"lastchange" => date('Y-m-d H:i:s',filemtime($dir . '/' . $f)) // Gets the time of last change 
Sieht dann so aus:

[Only registered and activated users can see links. Click Here To Register...]
Ich wusste ich habe was vergessen.
Hatte in der javascript Datei noch eine Funktion eingefügt die den Timestamp umwandelt.
Aber schön das du es so gelöst hast (Y)
12/15/2015 08:52 LekoArts#10
Quote:
Originally Posted by Devsome View Post
Ich wusste ich habe was vergessen.
Hatte in der javascript Datei noch eine Funktion eingefügt die den Timestamp umwandelt.
Aber schön das du es so gelöst hast (Y)
Jetzt habe ich allerdings ein anderes Problem:
Isotope will auch nach Biegen und Brechen mir diese Liste nicht sortieren!

[Only registered and activated users can see links. Click Here To Register...]

In JSFiddle klappt das problemlos, aber wenn ich genau den gleichen Code bei mir einsetze, passiert nichts. Der Unterschied ist ja, dass bei mir die Container dynamisch über die scan.php erzeugt werden, in JSFiddle schon vorhanden sind.

Liegt das da dran?
12/15/2015 23:31 Devsome#11
Quote:
Originally Posted by LeKoArts View Post
Jetzt habe ich allerdings ein anderes Problem:
Isotope will auch nach Biegen und Brechen mir diese Liste nicht sortieren!

[Only registered and activated users can see links. Click Here To Register...]

In JSFiddle klappt das problemlos, aber wenn ich genau den gleichen Code bei mir einsetze, passiert nichts. Der Unterschied ist ja, dass bei mir die Container dynamisch über die scan.php erzeugt werden, in JSFiddle schon vorhanden sind.

Liegt das da dran?
Nein liegt es nicht.
Ich habe mal paar Sachen geändert.
Zeile 1 der script.js
Code:
$( document ).ready(function() {
Am Ende der render(data) Funktion, vor dem } habe ich ein Funktionscall gemacht.
Code:
sortieren();
Am Ende des Dokumentes
Code:
function sortieren(){	
	$('.data').isotope({
		getSortData: {
		datum: '.date'
		},
		sortBy: 'datum',
		sortAscending: true
	});

	console.log('sortiert');	
}
Klappt einwandfrei bei mir.
Das Problem war, das wenn du es am Ende einfügst ohne zu prüfen ob die render(data) Funktion fertig ist, er es sortieren will wo noch keine Daten geladen sind.

Raus gefunden habe ich das mit console.log() 's.
Am Ende des Dokumentes eins gesetzt, sowie in der render Funktion.

//Update: Grade gesehen, dass die Verlinkung dann nicht mehr klappt. Kann mir das erst morgen anschauen, sofern du dafür noch keine Lösung gefunden hast :3
12/16/2015 11:00 LekoArts#12
Vielen Dank!
Kann ich auch logisch nachvollziehen, finde ich gut [emoji3]

Hab dann noch ein bisschen gegoogled etc. aber ne Lösung für das Link Problem nicht gefunden...
12/16/2015 14:23 Devsome#13
Quote:
Originally Posted by LeKoArts View Post
Vielen Dank!
Kann ich auch logisch nachvollziehen, finde ich gut [emoji3]

Hab dann noch ein bisschen gegoogled etc. aber ne Lösung für das Link Problem nicht gefunden...
Füge in deiner sortieren Funktion folgendes hinzu:
Code:
$(".data.animated").css("position",""); //entfernt den style="position"
Bearbeite in der css .filemanager .data { und füge das hinzu
Code:
position: absolute;
Wegen deinem isotope dings, wurde dem data animated (wo die Files drin sind) eine position zugeschrieben, daher konnte man nicht mehr auf die Elemente zugreifen.
Wenn du das position:absoloute; nicht in die css einfügst, verrutscht alles nach oben nachdem die Elemente geladen worden sind.

Hoffe dein Problem sollte nun gelöst sein :3
12/16/2015 15:02 LekoArts#14
Klappt! Vielen, vielen Dank :)