galerie per ajax neu laden

[joc]

Guten Tag zusammen!

Ich habe eine Bildgalerie (Inhaltselement in einem Artikel), die insgesamt ca 40 Bilder enthält, von denen nur 9 Bilder in zufälliger Reihenfolge angezeigt werden.

Nun möchte ich einen Reload-Link bzw, Button hinzufügen, der dann per Ajax (ohne die ganze Seite neu zu laden) NUR den Artikel mit der Galerie neu lädt und somit 9 neue, zufällige Bilder anzeigt.

Meine Frage dazu:
Wie mach' ich das grundsätzlich am besten? Gibt es vielleicht sogar schon einen relativ einfachen Weg dafür, eine Bildgalerie (oder auch andere Inhalte) per Ajax neu zu laden oder muss ich da tiefer in das Contao-Framework eintauchen und z.B. ein neues Modul schreiben?

beste Grüße :: Joc

[lomex]

Hier mal ein erster Ansatz. Leider klappt das noch nicht ganz unter Contao 2.10. (Unter 2.9 habe ich so ähnlich meine Kalender auf Ajax getrimmt, aber gerade in 2.10 getestet geht er nicht mehr). Vielleicht kann ja jemand den Rest beisteuern. Die ID wird nicht dargestellt beim Laden der Bilder scheint es Fehler zu geben. Bei mir kommt immer diverse 404 Fehler in der Chrom Konsole (für jedes Bild):

http://domain.de/%22TL_FILES_URLsystem//html//bild.png/%22

Zuerst mal brauchst du die ajax-Extension von Andreas Schempp. Dann legst du Dir unter Templates eine Kopie von gallery_default an und ergänzt den Quellcode um folgende Zeilen:

<script type="text/javascript">
    window.addEvent('domready', function()
    {
    $('neuladen').addEvent('click', function(event)
    {
    new Request.HTML({
    url:'ajax.php',
    data: 'g=1&action=cte&id=<?php echo $this->id; ?>',  <!-- ggfls die ID direkt eintragen -->
    method: 'get',
    update: event.target.getParent('.ce_gallery')
    }).send();
    return false;
    });
    });
</script>

Dann legst du Dir ein Link mit der ID="neuladen" an (oder so).
Damit steht das Grundgerüst. Eigentlich sollte dann das CE per Ajax neu geladen und ausgetauscht werden.

Gruß
lomex

[joc]

Lieber lomex,

allerbesten Dank für deine Mühe!
Das sind doch schon mal wertvolle Hinweise.
Die Ajax.php hab ich schon. Ich werde mal etwas herumprobieren damit und mit deinem Ansatz.
Vielleicht kommt ja was dabei heraus.

Beste Grüße :: Joc

[joc]

Habe es gerade mal ausprobiert.
Ausgegeben wird bei mir als Bild-URLs auch sowas:

%5C%22TL_FILES_URLsystem%5C/html%5C/Avantgarde_Showroom_01-4e37e060.jpg%5C%22

die variable TL_FILES_URL wird also wohl per Ajax nicht geparst.
und die

 %5C - in der URL sind Backslashes

- wohl Dateipfade auf meinem Windows- Test-System.
Schwierig, herauszufinden, wie man den String der URL nun korrekt formatieren kann!

[lomex]

Auf meinem Live-Testsystem sieht es ähnlich aus.
Die ID kann man natürlich nicht mit echo $this->id ausgeben, da diese ja nur für das Modul gilt, und nicht für ein CTE.

Aber warum die Url nicht geparsed wird, ist schon komisch.

[joc]

Habe nochmal weiter probiert. Leider bisher ohne wirklichen Erfolg.
Hier mal mein (modifiziertes) Gallery-Template:

<ul class="tableless" id="ajaxgal">
<?php
    foreach ( $this->body as $class => $row )
        foreach ( $row as $col )
            if ( $col->addImage )
            {
?>
<li<?php if ( $col->margin ) { ?> style="z-index:0;<?php echo($col->margin);?>"<?php } ?>>
<?php if ( $col->href ) { ?>
<a href="<?php echo($col->href);?>"<?php echo($col->attributes);?> title="<?php echo($col->alt); ?>"><img src="<?php echo($col->src);?>"<?php echo($col->imgSize);?> alt="<?php echo($col->alt);?>" /></a>
<?php } else { ?>
<img src="<?php echo($col->src);?>"<?php echo($col->imgSize);?> alt="<?php echo($col->alt);?>" />
<?php } ?>
<?php if ($col->caption): ?>
    <div class="caption"><?php echo $col->caption; ?></div>
<?php endif; ?>
</li>
<?php
}
?>
</ul>
<div class="clear"></div>
<?php //$this->showTemplateVars(); ?>
<script type="text/javascript">
    window.addEvent('domready', function()
    {

    var myRequest = new Request.HTML({
        method: 'get',
        url: 'ajax.php',
        onSuccess: function(html) {
            $('ajaxgal').set('html', '');
            $('ajaxgal').adopt(html);
        }
    });

    $('reeload').addEvent('click', function(event){
        event.stop(); 
        myRequest.send('action=cte&id=27&g=1');
    }); 
    });
</script>

Als Quelltext-Ausgabe erhalte ich jetzt pro Galerie-Element:

<ul id="\"ajaxgal\"" class="\"tableless\"">
<li 0px;\"="" 20px="" style="\"z-index:0;padding:0px">
\r\n
<a 01\"="" showroom="" title="\"Avantgarde" rel="\"lightbox[lb27]\"" href="\"TL_FILES_URLtl_files\/grid\/img\/Avantgarde_Showroom_01.jpg\"">
<img width="\"90\"" height="\"90\"" \="" 01\"="" showroom="" alt="\"Avantgarde" src="\"TL_FILES_URLsystem\/html\/Avantgarde_Showroom_01-4e37e060.jpg\"">
&lt;\/a&gt;\r\n&lt;\/li&gt;\r\n
</a>
</li>
.....

Nun ja: Ganz so einfach ist das alles wohl doch nicht :-)
Schade, denn es wäre doch auch sehr praktisch, wenn man in einer Bild-Galerie,
die z.B. 50 Bilder enthält und die seitenweise z.B. immer 6 Bilder anzeigt, die weiteren
Bilder per Ajax laden könnte, wenn man in der Galerie-Pagination auf "weiter" und "zurück" klickt.

Ansonsten "springt" man beim Neuladen der Seite ja immer wieder nach oben und muss immer wieder
nach unten zur Galerie scrollen.

[joc]

Keine echte Lösung vielleicht, aber ein Fortschritt:

In der ajax.php habe ich die output-Funktion geändert (Zeile 360),
also per str_replace testweise mal den string "TL_FILES_URL" entfernt.

Immerhin wird jetzt die gallerie korrekt und ohne fehler per ajax neu geladen.

protected function output($varValue)
    {
        $varValue = $this->replaceTags($varValue);

        if (version_compare(VERSION, '2.9', '>'))
        {
            $varValue = json_encode(array
            (
                'token'        => REQUEST_TOKEN,
                // orig: 'content'    => $varValue,
                'content'    => str_replace("TL_FILES_URL","",$varValue),
            ));
        }
        elseif (is_array($varValue) || is_object($varValue))
        {
            // orig: $varValue = json_encode($varValue);
            $varValue = json_encode(str_replace("TL_FILES_URL","",$varValue));
        }
        
        echo $varValue;
        exit;
    } 

Das aktuelle Javascript:

<script>
 
  function getCte() {
    new Request.JSON({
    url: 'ajax.php',
    method: 'get',
    data : 'action=cte&g=1&id=27',
    onSuccess: function(responseText) {
        $('ajaxgal').set('html', responseText.content);
      }
    }).send();
    }

    window.addEvent('domready',function() {
          $('reeload').addEvent('click', function(e) {
             e.preventDefault();
             getCte();
          });
       });
</script>

Kann es sein dass die ajax.php Erweiterung nicht mehr richtig kompatibel ist mit contao 2.10.3?

[joc]

ok, ich schon wieder...

Wollte nur zum Abschluss noch einmal hier den kompletten weg posten,
wie ich es nun geschafft habe, eine galerie per ajax neu zu laden.
War nicht ganz einfach... Vielleicht hilfts ja jemandem.

Ziel war:

eine content-galerie soll per ajax neu geladen werden
entweder per reload button (zufalls-auswahl)
oder auch per vor-und-zurück -button

benötigt: die Erweiterung ajax.php (a.schrempp)
Die Erweiterung musste ich so ändern (siehe oben in diesem Thread):

protected function output($varValue)
    {
        $varValue = $this->replaceTags($varValue);

        if (version_compare(VERSION, '2.9', '>'))
        {
            $varValue = json_encode(array
            (
                'token'        => REQUEST_TOKEN,
                // orig: 'content'    => $varValue,
                'content'    => str_replace("TL_FILES_URL","",$varValue),
            ));
        }
        elseif (is_array($varValue) || is_object($varValue))
        {
            // orig: $varValue = json_encode($varValue);
            $varValue = json_encode(str_replace("TL_FILES_URL","",$varValue));
        }
        echo $varValue;
        exit;
    } 

1.
einen neuen inhalts-container anlegen
im inhalts-container als artikel eine galerie anlegen aus einem verzeichnis
generiert mit z.B. 50 Bildern

Dann ungefähr folgendes in der Galerie einstellen:
Anzeige: nur 9 bilder
3 Bilder pro Reihe
Grösse 100 x 100

die galerie nach zuflall sortieren
dem Artikel als CSS ID unten z.b. "ajax-gal" geben.

dann zurück und einen neuen inhalts-container anlegen
dort einen neuen Artikel anlegen.

hier etwas ins Textfeld schreiben, z.B. "galerie neu laden"
diesem Artikel eine CSS id geben, z.B. "reeload"

nun das Template der galerie öffnen.
(Ich habe hier ein eigenes Galerie Template, das ohne Tabellen funktioniert)
Wichtig ist: das template für die galerie muss im template-ordner liegen
und NICHT in einem unterverzeichnis, sonst findet es das ajax-script nachher nicht und es gibt
z.B. eine 500er Fehlermeldung.

Hier kommt ins Gallery-Template ganz unten nach dem Galerie - Code:

<script>
   function getCte() {
    new Request.JSON({
    url: 'ajax.php',
    method: 'get',
    data : 'action=cte&g=1&id=84',  // hier muss die ID des Artikels mit der Galerie eingetragen werden
    onSuccess: function(responseText) {
        $('ajaxgal').set('html', responseText.content);  // da der ajax request mehrere elemente als JSON-Array (z.B. auch noch das Contao-Token) zurückgibt, muss man hier das element "content" angeben
      }
    }).send();
    }

// dann wird, wenn die Seite geladen ist, dem #reeload-element, das wir als artikel angelegt haben, die funktion des ajax-reloads zugewiesen
    window.addEvent('domready',function() {
          $('reeload').addEvent('click', function(e) {
             e.preventDefault();
             getCte();
          });
       });
</script>

Das wars!

Mein Beipiel ist hier live zu sehen:

www.datenraum.de (oben rechts, reload-button)

Vielleicht habt Ihr ja einen besseren Weg auf Lager, ohne dass man die ajax.php anpassen muss.
Mir ist leider ansonsten keiner eingefallen :-)

beste Grüsse :: Joc

[Toflar]

Die ajax.php anpassen sollte definitiv nicht das Ziel sein. Das Problem entsteht dadurch, dass offenbar durch das Laden via Ajax die Konstanten nicht gesetzt werden. Deshalb kennt PHP für die auch keine Werte und gibt die 1:1 zurück.

Allerdings werden all die Dinge in der neusten ajax.php gemacht. Hast Du evtl. nicht die neuste Version?

[joc]

Hallo Toflar!

Danke für den Hinweis! Ich hatte aber die neueste Version der ajax.php. (Stand von vor ca. 10 Tagen aus dem Extension Repository).
Klar: Die ajax.php zu ändern ist sicher keine dolle Lösung und das war auch absolut nicht mein Ziel :-)
Daher hab' ich ja auch gehofft, dass hier vielleicht jemand einen besseren Weg kennt.

Schöne Feiertage und (überhaupt allen hier) einen guten Rutsch ins neue Jahr!

[bes0nic]

(dieser Post ist aufgrund der Relevanz nochmal hier zu finden. Quelle: https://www.contao-community.de/show...100#post200100)

Inzwischen haben wir Agenturintern eine Lösung entwickelt, die ich euch nicht vorenthalten möchte. Damit ist es allgemein möglich, bei einer mehrseitigen Galerie (die als Content Element eingebunden ist) per AJAX die einzelnen Seiten zu durchblättern und somit auf ein Neuladen der Seite zu verzichten. Somit gibt es [auch] kein Problem mit Tabcontrol und beides funktioniert harmonisch miteinander.

Wie das dann aussehen kann, seht ihr hier:
http://www.ingegraessle.eu/besuche
(weiter unten auf der Seite gibt es [...] Galerien)


HowTo

- Zuerst muss sichergestellt sein, daß Script-Tags nicht von Contao herausgefiltert werden. Im Backend gibt es im Bereich "Einstellungen" dafür den Punkt "erlaubte Tags", wo die Ausnahme hinzugefügt werden kann.

- danach muss die ID der Galerie in Erfahrung gebracht werden. Bewegt dazu in der Listendarstellung aller Content-Elemente den Mauszeiger über den "Bearbeiten"-Stift des Galerie-Content-Elements und lest im erscheinenden gelben Tooltip die ID ab.

- Nun muss unter der Galerie muss ein neues Inhaltselement vom Typ "HTML" erstellt werden. In dieses Element wird der folgende Code hineinkopiert und die ID ersetzt.

<script>
  function gallery_reload(){
     document.getElements('.pagination a').addEvent('click', function(event){
          event.preventDefault();
          if (event.target.get('href').match('page=[0-9]') != null){  
            var page = event.target.get('href').match('page=[0-9]');
            var url = 'g=1&action=cte&id=***&'+page;  //ID des Inhaltselementes
          }else{
            var page = 'page=1';
            var url = 'g=1&action=cte&id=***&page=0'; //ID des Inhaltselementes
          }
          new Request.JSON({
                  method:'get',
                  data:url,
                  url:'ajax.php',
                  update: event.target.getParent('.ce_gallery'),
                  onSuccess: function(responseText) { event.target.getParent('.ce_gallery').set('html', responseText.content); Slimbox.scanPage(); gallery_reload();},
              }).send();
          return false;
      });
  };
window.addEvent('domready', function(){
  gallery_reload();
});
</script>

- solltet Ihr auf der Seite nicht die Contao-eigene Slimbox verwenden, sondern ein anderes Lightbox-Script, so muss der Funktionsaufruf "Slimbox.scanPage();" gelöscht werden. Stattdessen muss eine entsprechende Anweisung eurer eigenen Lightbox-Lösung eingefügt werden, welche die Seite nach Bildern scannt und den Lightbox-Effekt drüberlegt.


Na dann, viel Spaß beim nachbauen! Natürlich kann das noch weiterentwickelt werden (z.B. als Extension, welche eine Checkbox "[x] per AJAX weiterblättern" zum Galerie-Content-Element hinzufügt und das Javascript dann automatisch einbindet), aber die Grundfunktionialität ist gegeben [...].

[lomex]

Kennst du cegalleryxt?

Bei deinem Beispiel werden zunächst drei Seiten angezeigt. Nach dem AJAX-Request 5 Seiten...

Gruß

[bes0nic]

@3 Seiten: Stimmt, bei der zweiten Galerie passiert das nicht, bei der ersten jedoch schon. Behindert aber nicht die Funktionalität. Hm, müssen wir mal analysieren.

@Extension: Na sehr schön, konntest du das nicht eher posten

[ChristianLischke]

@joc:
schöne Sache, nur wie hast du es denn hinbekommen, dass in den alt-Tags deiner Bilder Umlaute mit angezeigt werden?

Standardmäßig werden doch die alt-Tags aus dem Bildnamen generiert, der wiederum beim Upload übers Backend von Sonderzeichen bereinigt wird.

Ich versuche nämlich auch gerade eine content-galerie per button (ajax) zufällig neu laden zu lassen und mir die alt-Tags der Bilder als Bildunterschrift anzuzeigen.

Grüße
Christian