Contao Konferenz & College 2019 in Duisburg - JETZT TICKET SICHERN!
Ergebnis 1 bis 13 von 13

Thema: Bilder aus einem Verzeichnis auslesen und via Listanzeige ausgeben - jquery ohne php

  1. #1
    Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    1.538
    User beschenken
    Wunschliste

    Standard Bilder aus einem Verzeichnis auslesen und via Listanzeige ausgeben - jquery ohne php

    Hallo,

    ich beziehe mich hier auf keine Contao-Lösung » nur ein HTML/CSS script.

    Ein Kunde möchte immer in das gleiche Verzeichnis via upload-script Bilder hochladen
    In der Browserausgabe sollten dann immer alle Bilder dargestellt werden.
    ... im Idealfall ohne php

    Mein Ansatz:
    ich lese ein Verzeichnis via jquery aus und lasse es via HTML darstellen - auf der Suche nach diesem Vorhaben bin ich über folgendes (ähnliches) script gestolpert:
    Code:
    <body>
    	<img id="viewer" src="" width="800px"/>
    	<div id="info"> </div>
    <script>
    $(function() {
    	var baseUrl = "";
    	var pictureIndex = 0;
    	var pictures = [];
    	function getFiles() {
    		$.ajax({
    			type:"GET",
    			url: baseUrl,
    			success: function(data){
    				pictures = [];
    				$(data).find("a[href]").each(function() {
    					var href = $(this).attr('href');
    					if (href.indexOf('.jpg') > 0 || href.indexOf('.png') > 0 || href.indexOf('.jpeg') > 0) {
    						pictures.push(href);
    					}
    				});
    			
    			console.log(pictures.length + " pictures loaded!");
    			changePicture(0); }
    		});
    	}
    	function changePicture(indexOffset) {
    		pictureIndex += indexOffset;
    		if (pictureIndex >= pictures.length) {
    			pictureIndex = 0;
    		} else if (pictureIndex < 0) {
    			pictureIndex = pictures.length - 1;
    		}
    		$('#viewer').attr('src', baseUrl + pictures[pictureIndex]);
    		$('#info').text((pictureIndex + 1) + "/" + pictures.length);
    	}
    	getFiles();
    	$(document).keydown(function(e){
    		var left = -1, right = 1;
    	    if (e.keyCode == 37) {
    	       changePicture(left); return false;
    	    } else if (e.keyCode == 39) {
    	    	changePicture(right); return false;
    	    }
    	});
    });
    </script>
    </body>
    Nur das klappt nicht - es wird mir immer nur ein nicht definierter Pfad des src="" ausgegeben
    <img id="viewer" src="undefined" width="800px"/>

    Der consolen-log bringt '0 pictures loaded!' und die #info bringt 1/0

    Die Bilder liegen aktuell im gleichen Verzeichnis wie die html-Datei

    Hat jemand ne Idee wie ich obiges script anzupassen habe, bzw. wie ich mein Vorhaben umsetzen könnte?
    Grüsse
    Bernhard


  2. #2
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.120
    User beschenken
    Wunschliste

    Standard

    Hallo derRenner,
    das ist nicht so einfach ohne da auf einer Seite genau schauen zu können, was da nun passiert..
    Aber ich würde mal bei der baseUrl anfangen zu schauen. Die hast du ja anscheinend Leer gelassen, was glaube ich so nicht richtig ist.

    Wo du aber genau ansetzten musst bei dem Script wird eventuell da zu finden sein, wo du das her hast. Wenn du schon schreibst das es ähnlich sein sollte... Dann hast du ja anscheinend infos, was das macht?

    Eine Frage noch: Warum unbedingt ohne PHP? Mit PHP wäre das doch eigentlich die richtige Variante? Vor allem würden die Bilder dann auch ohne JS angezeigt werden?

    Viele Grüße

  3. #3
    Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    1.538
    User beschenken
    Wunschliste

    Standard

    Das snippet habe ich von hier
    Die var baseUrl hatte ich auch im Visir, aber ich vermute eher, dass das script grundsätzlich gar keine Dateien in diesem Ordner "findet".

    Warum kein php? Gute Frage ... wahrscheinlich weil ich davon noch weniger Ahnung habe ...
    Aber ich versuch's auch gerne via php, wenn du mir dazu vllt. nen guten link für nen Ansatz/Lösung geben könntest.
    Grüsse
    Bernhard


  4. #4
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.727

    Standard

    Einmal kurz googeln nach 'PHP Image Gallery' liefert z.B. das hier:
    https://sye.dk/sfpg/

    Kenn ich nicht, könnte aber deine Anforderung erfüllen .
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  5. #5
    Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    1.538
    User beschenken
    Wunschliste

    Standard

    Danke - aber ich suche keine komplette Galerie
    Die Galerie dazu baue ich dann selbst auf - Ziel soll es sein, den Ordner auszulesen, damit ich eine html <ul><li> Konstruktion bauen kann.

    Zwischenzeitlich bin ich schon etwas weiter ... via php - und ich denke, dass ich hiermit schon ganz gut weiterkomme und darauf aufbauen kann

    PHP-Code:
    <div id="myDiv">
    <?php
        $directory
    ="img/";
        
    $images=glob($directory "*.jpg");
        
    $myclass "myclass";
        foreach(
    $images as $image) {
            echo 
    "<a href=" .$image." class=".$myclass."> <img alt="" src=" .$image " /></a>";
        }
    ?>
    </div>
    dazu braucht's dann noch ne Anpassung in der htaccess
    PHP-Code:
    <Files myFile.html>
    AddType application/x-httpd-php .htm .html
    </Files
    ... man lernt immer gerne dazu ^^
    Grüsse
    Bernhard


  6. #6
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.233

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    Das snippet habe ich von hier
    Und dort steht "Simple image viewer, which loads all images from an html directory listing." Du musst dabei aber bedenken, daß "html directory listing"s typischerweise ausgeschaltet sind (Apache Konfiguration, https://wiki.apache.org/httpd/DirectoryListings). Wenn also nichts gelistet wird ist es nicht verwunderlich, daß nichts angezeigt wird.

    Insgesamt glaube ich, daß dieser Ansatz nicht sonderlich sinnvoll ist.

    Könntest Du kurz beschreiben, was Du erreichen willst (ich meine: was macht ein User und was soll dann aus Sicht des Users passieren).

    Insgesamt: ich fürchte, Du kommst um etwas PHP nicht herum.
    Stammtisch Contao Bayern: http://www.contao-bayern.de

  7. #7
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.727

    Standard

    Du sagtest, du kennst dich mit PHP nicht aus...
    Ich dachte, du könntest darin ja auch sehen, wie es dort gemacht wird.
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  8. #8
    Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    1.538
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von fiedsch Beitrag anzeigen
    Könntest Du kurz beschreiben, was Du erreichen willst (ich meine: was macht ein User und was soll dann aus Sicht des Users passieren).
    - Aufbau Webseite auf Basis bootstrap 4 ohne CMS
    - unter anderem wird's hier eine Seite mit Photos geben
    - der Kunde will via upload nur seine Bilder hochladen (auch hierzu werde ich ein "Standardscript" für Browserupload verwenden). Mal ist's nur eins, mal sind auch einige mehr
    - Damit weder der Kunde noch ich dann "zu Fuss" im HTML-file die <ul><li> anpassen/ergänzen muss, soll dieser Ordner einfach ausgelesen werden und auch die neu hochgeladenen Bilder werden mit angezeigt

    Bei diesem Projekt werde ich mit einfacher HTML/CSS schneller durch sein, als wenn ich via Contao das Layout erstelle. Noch dazu hostet er aktuell bei world4you - und hier haben wir aktuell das Thema mit der Lauffähigkeit von Contao 4 ... und diese Zeiten kann ich in diesem Fall schon mal "einsparen"
    Grüsse
    Bernhard


  9. #9
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.233

    Standard

    Danke für die Antwort. Das hätte ich aus Deinem ersten Post nicht herausgelesen.

    Zitat Zitat von derRenner Beitrag anzeigen
    - der Kunde will via upload nur seine Bilder hochladen (auch hierzu werde ich ein "Standardscript" für Browserupload verwenden).
    Skript (JS), läuft im Browser. Irgendetwas muss auf dem Server aber auch die Uploads entgegen nehmen. Hier könnte Contao die Arbeit erledigen.

    Was hast Du hier als Alternative vorgesehen?
    Stammtisch Contao Bayern: http://www.contao-bayern.de

  10. #10
    Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    1.538
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von fiedsch Beitrag anzeigen
    Skript (JS), läuft im Browser. Irgendetwas muss auf dem Server aber auch die Uploads entgegen nehmen. Hier könnte Contao die Arbeit erledigen.
    Was hast Du hier als Alternative vorgesehen?
    Für den Upload hatte ich dieses Paket hier vorgemerkt - das hatte ich in einem anderen Projekt vor etwa 2 Jahren auch schon mal (ohne Contao) im Einsatz ... somit braucht's Contao dazu nicht. Und wie erwähnt, aus heutiger Sicht sollte es ohne einer Contao-Installation laufen.

    Alternative? nein, habe ich keine. Denn eigentlich hatte ich mir das ganze viel einfacher vorgestellt
    Und ich vermute, dass es ja auch einfach sein muss » ich werde mir noch mal die oben erwähne Galerie anschauen und versuchen hier das Auslesen und Bereitstellen der Bilder zu "verstehen"
    Grüsse
    Bernhard


  11. #11
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.233

    Standard

    Aus meiner Sicht ist Contao schnell installiert -- also nichts, was nicht einfach wäre -- und auch nicht schwerer per CSS zu stylen, als etwas anderes. Und wenn weiter Anforderungen dazu kommen, wie Z.B. ein User-Login für den Up- oder Download, dann bist Du mit Contao bestens vorbereitet. Ich verstehe also noch nicht ganz, warum es ohne Contao gehen und das leichter sein soll.

    Du hast in #8 von Bootstrap gesprochen: schau Dir https://contao-bootstrap.de an.
    Stammtisch Contao Bayern: http://www.contao-bayern.de

  12. #12
    Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    1.538
    User beschenken
    Wunschliste

    Standard

    Contao in Verbindung mit style und Bootstrap etc ist ja auch nicht das grundlegende Thema - hiermit habe ich ja auch bereits das eine oder andere Projekt umgesetzt und sehe mich auch mittlerweile ganz firn im Umgang damit ...

    Das Problem ist in diesem Fall der hoster. Wie ich vermerkt habe, spielt world4you hier in Zusammenhang mit Contao 4 nicht mit. Und er Kunde liegt aktuell bei world4you und erkennt aber nicht, warum er Hoster wechseln sollte, nur weil die Technik im Hintergrund nicht zusammenspielt (Gespräche dazu gab's schon einige) » deshalb wäre für mich auch der einfachere und raschere Weg (weil auch keine aufwändige Seite dahinter steckt) die Seite "zu Fuss" umzusetzen.
    5 Seiten via Bootstrap framework runtergeschrieben ohne Ärgernis mit Contao&world4you sind nun mal einfacher zu handeln
    Grüsse
    Bernhard


  13. #13
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    659

    Standard

    "Zu Fuss" ist zwar verständlich an der Stelle, aber nicht sinnvoll. Ich würde da einfach ein File bsiertes CMS nehmen, die sind in den Anforderungen deutlich entspannter, und Du sparst Dir den Grossteil der Schreibarbeit. "Zu Fuss" gibt es heute nicht mehr...

    Entweder ein file basiertes CMS, oder Du probierst zumindest mal sowas wie einen SSG (StaticScriptGenerator).

    Ich würde, auch im Bezug auf Dein Upload-Problem, da lieber mal ein bisschen rumschauen, es gibt garantiert schon ein fast fertiges System für genau sowas. Gickst Du Dich mal hier durch:

    https://headlesscms.org/

    https://www.staticgen.com/

    Gerade die Nummer mit dem SSG ist immer wieder interessant, im Bezug auf Dokumentation kann man da durchaus was mit anfangen.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •