Simple Gallery zum Verwalten von FTP-Bildern

[LekoArts]

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:


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

[False]

Habe mal kurz gegoogelt und was gefunden, was ich persönlich für deine Situation sehr ansprechend finde :

[Devsome]

Direkt eins mit Login vorher habe ich nicht gefunden, aber könntest ja ggf mit einer .htaccess ein Login verwirklichen :3

[LekoArts]

Originally Posted by .ƒaℓsє.

Habe mal kurz gegoogelt und was gefunden, was ich persönlich für deine Situation sehr ansprechend finde :

Danke für den Link, aber das hat nicht ganz genau gepasst.

Originally Posted by Devsome

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:


Das könnte ich dann auch für "Isotope" / "MixItUp" benutzen um es nach Datum zu sortieren.

[Devsome]

Meinst du es so ?

[LekoArts]

Originally Posted by Devsome

Meinst du es so ?

Ja

[Devsome]

Originally Posted by LeKoArts

Ja

Füge oder editiere folgendes:

style.css

.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

var lastchange = timeConverter(f.lastchange);

script.js line 351

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>');

scan.php line 32 ein , hinzufügen
line 33

"lastchange" => filemtime($dir . '/' . $f)

//Edit: Lines stimmen nicht, habe das Skript bei mir von unnötigen Zeilenumbrüchen befreit.




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.

[LekoArts]

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:

[Devsome]

Originally Posted by LeKoArts

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:

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)

[LekoArts]

Originally Posted by Devsome

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!



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?

[Devsome]

Originally Posted by LeKoArts

Jetzt habe ich allerdings ein anderes Problem:
Isotope will auch nach Biegen und Brechen mir diese Liste nicht sortieren!



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

$( document ).ready(function() {

Am Ende der render(data) Funktion, vor dem } habe ich ein Funktionscall gemacht.

sortieren();

Am Ende des Dokumentes

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

[LekoArts]

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

[Devsome]

Originally Posted by LeKoArts

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:

$(".data.animated").css("position",""); //entfernt den style="position"

Bearbeite in der css .filemanager .data { und füge das hinzu

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

[LekoArts]

Klappt! Vielen, vielen Dank