Suche Slideshow, deren Slides über Menüpunkte einzeln erreichbar sind

In Joomla Extensions habe ich schon heftig gesucht, aber nix gefunden. Vielleicht muss ich auch aus mehreren Extensions meine Lösung zusammen basteln? Entweder kennt jemand doch noch eine geeignete Extension als Lösung oder jemand weiß, mit welchem Zusammenwirken mancher Extensions ich mein Ziel erreichen kann.

Meine neue Site soll aus mehreren Slideshows bestehen, zu jeder Kategorie eine. Jede Kategorie soll über je einen Haupt-Menüpunkt erreichbar sein. Über Untermenü-Punkte soll jeder einzelne Slide einer Slideshow erreichbar sein.

Ich hab schon daran gedacht, jede Slideshow in ein Modul zu packen und dann mit "Modules Anywhere" in einen Artikel zu legen, der dann als Haupt-Menüpunkt erreichbar ist. Aber einzelne Slides können damit nicht über Untermenü-Punkte erreicht werden, sondern dieser Wunsch wird anscheinend eher durch die Modul-Idee verhindert.

Hat da jemand eine Idee dazu, wie das geht?

Möglichst sollte der Untermenüpunkt auf ein Slide innerhalb einer funktionierenden Slideshow landen, von dem aus die Slideshow auch weiter bedient werden kann. Nur wenn das gar nicht zu realisieren geht, würde ich auch einen Slide als statische Darstellung hinnehmen.

Danke für eure guten Tipps. Die Slideshow DJ-imageslider hatte ich auch schon auf dem Schirm. Die war mir aber relativ komplex zu verstehen. Jetzt habe ich mich nioch mal damit beschäftigt und fand diesen Hinweis:

https://dj-extensions.com/faq/…k-slides-to-external-urls

Wenn man aber einzelne Slides mit einer externen URL erreichen kann, dann geht das natürlich auch über das Menü. Und damit ist es auch möglich, die Hauptmenüpunkte mit dem jeweiligen Beginn einer Slideshow zu verlinken.

Ich werde damit jetzt erst mal experimentieren. Wenn sich noch Fragen ergeben, melde ich mich hier wieder. Jetzt erst mal ganz herzlichen Dank!

In DJ-imageslider ist es anscheinend leider nur möglich, Bilder einzufügen. Ich möchte Bilder zusammen mit Text einfügen, wobei beides in div-Containern liegen sollte, damit sich bei ändernden Displaygrößen die Container nebeneinander oder untereinander anordnen und auch ihre Größe sich flexibel anpassen kann.

Ich hab es jetzt endlich geschafft, mal eine Skizze anzufertigen, wie ich mir das denke. Hauptmenüpunkte könnten je zu einem Artikel führen mit dem Inhalt der Kategorie. Aus diesem Artikel führt ein Link zur Slideshow, in der alle Artikel der Kategorie als Slides gezeigt werden.

Jeder dieser Artikel liegt in einem div-Container, der wiederum in Bild und Textteil unterteilt ist. Das Bild ist verlinkt zu einem Video, das über eine Lightbox gezeigt wird, die sich über den Slide legt. Gleiches soll geschehen, wenn im Textbereich der Readmore-Link betätigt wird. Der restliche Text erscheint dann in der Lightbox, die sich über den Slide legt.

Bin wieder ein Stück weiter gekommen und nutze dazu jetzt doch dj-imageslider. Allerdings fehlen mir die Kenntnisse, das CSS eines Slides an meine Bedürfnisse anzupassen.

Ich möchte jetzt ab jetzt nicht nur um hilfreiche Tipps betr. des nötigen CSS erhalten, sondern indem ich mitteile, wie ich zum Erfolg komme, könnten andere wieder davon Nutzen haben, die eine ähnliche Lösung wünschen..

Meine Navigation:

Für jeden Menü-Hauptpunkt, der ja zu einer Kategorie (Imageslider) führen soll, lege ich einen einzelnen Artikel / Beitrag an und verlinke den Menüpunkt dorthin (=Joomla-Standard). Mit "Modules Anywhere" platziere ich das Modul einer Kategorie von dj-imageslider in den jeweiligen Artikel. – Diese Lösung funktioniert problemlos!

Was mir betreffend Navigation noch fehlt:

Wie ich mit Menü-Unterpunkten gezielt einen einzelen Slide aus einer Imageslider-Kategorie anspringen kann. Und sobald dieser geladen ist, wird er als Teil des ganzen Imageslider dargestellt, so als wäre man über einen Hauptmenüpunkt und den Imageslider dahin gelangt.

Slide-Inhalt:

Im Original-Zustand des Slide-Templates und horizontaler Slide-Bewegung werden die Slides als ul / li -Aneinanderreihung platziert und alle Slides, die nicht sichtbar sein sollen, durch "dj-image: display none" ausgeblendet.

Das Slide besteht formatfüllend aus dem Slide-Image, das im Backend ausgewählt werden muss und sogar optional verlinkt werden kann zu einem Menüpunkt, zu einer URL oder einem Beitrag. Wollte ich das Bild – wie geplant – mit einem Video verlinken, das dann noch in einer Lightbox gestaret wird, müsste ich das Video mit "autoplay"-Start in einem Artikel platzieren, den ich dann mit dem Slide-Image verlinke. Eine Lightbox habe ich dann aber immer noch nicht. Das Slide-Image ist also keine Lösung.

Alternativ ändere ich das CSS, sodass das dj-image gar nicht angezeigt wird, sondern statt dessen nur eine weiße Fläche (oder bg-color) und damit das Backend "zufrieden" ist, wird z.B. ein 1px.gif als Sliderbild ausgewählt. Damit hätte ich ein Slide mit Hintergrund, auf dem dann ein Bild und Text so platziert werden könnte, wie ich mir das wünsche. Hierzu kann ich das Editor-Fenster des Slide benutzen, wie bei jedem Beitrag auch.

Folglich kann ich auch sowohl von einem dort platzierten Bild als auch von einem Text aus mittels JCE-Mediabox beliebig zu weiterem Content (Video und Text) verlinken und den Inhalt in einer Lightbox darstellen.

Beim jd-description Text habe ich diese JCE-Mediabox-Verlinkung mit Lightbox bereits erfolgreich getestet. Der Text im Slider moderiert dann einen Beitrag an, an dessen Ende ein Textlink zu diesem Beitrag führt, der dann in eine Lightbox geladen wird. Der vollständige Text muss dazu also in einem Beitrag/Artikel in Joomla separat angelegt werden.

Was mir beim Slide fehlt:

Ich krieg's nicht hin, die CSS-Definitionen in der DJ-imageslider.css so anzupassen, dass statt des dj-image eine Hintergrundfarbe erscheint statt des Bildes. Schon bei diesen Veränderungen kollabiert der gesamte Slider.

Ferner schaffe ich es nicht, das Bild und den Text abhängig von der Displaybreite nebenerinander oder untereinander darzustellen. Jeder Versuch lässt den gesamten Imageslider ins Chaos stürzen.

Da jetzt kein JS oder PHP angefasst werden muss, sondern mein Vorhaben voraussichtlich komplett mit CSS-Anpassungen gelöst werden kann, würde ich mich sehr freuen, wenn ich hierbei Unterstützung bekäme (ggfs. auch gegen Aufwand-Entschädigung).

j!-n Herzlichen Dank dir! RokSprocket ist wohl wirklich das Richtige für mich und spart mir viel Zeit und Fehleranfälligkeit mit Frickelcode. Damit aber das Modul per Menüpunkt erreicht werden kann, muss ich es wohl doch mit "Modules Anywhere" in einen Artikel packen.

Drei Dinge müsste ich aber immer noch klären / lösen:

1.) Wie kann man vom Menü aus auf einzelne Slides springen, die in den Modulen gezeigt werden? Da ich bisher noch keine Slideshow gefunden habe, bei der das möglich ist, werde ich wohl auf dieses Feature verzichten müssen.

Allerdings würde das RokSprocket-Modul mir die Möglichkeit geben, wie am Ende von meinem folgenden Punkt 2 beschrieben, per Menü-Unterpunkt die Artikel mit den Videos direkt anzuspringen. Der Besucher hat dann zwei Wege zum selben Inhalt: Ein mal über die Haupt-Menüpunkte, die dann zu den Slideshows führen und zum anderen über die Menü-Unterpunkte. Zusätzlich liegen ja alle Slideshows auf der Homepage vertikal gestapelt und sind daher auch darüber erreichbar.

2.) Im Textfeld für den im Modul eintragbaren Einleitungstext zum Artikel ist kein HTM-Code möglich, weil der gestrippt wird. Also muss ich den standardmäßigen Link zum Artikel nehmen oder die "readmore" Variante.

Damit ist aber zugleich fix ausgewählt, dass das Bild ebenfalls mit dem Artikel verlinkt wird.

Ich benötige aber die Möglichkeit, das Bild separat zu verlinken, nämlich mit einem Video. Damit möchte ich den Besuchern den Nutzen geben, meine Information auf zwei Medien zur Auswahl zu erhalten oder das Video anzuschauen und evtl. den Text auszudrucken oder bei Mobilgeräten datensparend den Text zu lesen und daheim das Video anzuschauen usw. usw.

Wie kann ich also das Bild manuell mit einem separaten Link verbinden?

Zudem kann der Text nicht in einer Lightbox gezeigt werden, die sich über das Slide legt. Dies halte ich aber der Usablitiy und Orientierung in der Navigation für wichtig, weil der Besucher nach Lesen des Artikels und Schließen der Lightbox sich genau dort wieder findet, wo er her gekommen ist, nämlich in der Slideshow und an genau dem zuletzt besehenen Slide.

Ich könnte höchstens im Modul auf das Bild mit dem Videolink verzichten und dieses statt dessen in den Artikel setzen. Dann aber müsste ich die CSS-Frickelei in den Artikel legen, mit der das Bild bei maximaler Bidhöhe angepasst wird und der Text rechts umfließt bis zum "readmore" sowie ab einer minimalen Breite von Bild / Text der Text unterhalb des Bild platziert wird, woraufhin das Bild wieder die maximale Breite einnehmen kann.

Bei dem Erstellen einer solchen CSS-Konstruktion habe ich aber leider große Schwierigkeiten.

3.) Ich habe das Modul zusammen mit dem Protostar-Theme getestet. Hier tritt abhängig von der Breite des Browserfensters (in Firefox) der Effekt auf, dass bei breitem Fenster alles korrekt nebeneinander dargestellt wird, dann ein mittlerer Bereich kommt, in dem der Text zerrissen teils neben und teils unter dem Bild dargestellt wird und dann ein Bereich bei kleiner Breite des Browserfensters, in dem wieder korrekt alles untereinander dargestellt wird.

Vermutlich muss ich da in der CSS die @media screen min-width / max-width Definitionen des Modul korrigieren.

Oder liegt es an der Kombination mit Protostar?

Trotz der oben beschriebenen Einschränkungen scheint das RokSprocket Feature-Modul mich am weitesten zu meinem Ziel zu bringen. Ich danke dir herzlich für diesen Tipp!!!

Danke dir Christine! Der von mir beschriebene Effekt tritt gerade bei Fluid auf. Bei Static hingegen wird grundsätzlich das Bild zu oberst und der Text darunter angezeigt, unabhängig von der verfügbaren Breite.

Ich glaube, ich verfolge jetzt doch besser die Strategie, die Beiträge komplett mit verlinktem Bild in den Slide zu laden. Wie gesagt, muss ich dann aber für die breitenabhängige Darstellung (Bild und Text nebeneinander oder untereinander) noch passende CSS-Definitionen basteln.

Aktuell hakt es genau daran. Bisher fand ich nur CSS-Bruchstücke, die ich noich nicht sinnvoll zusammen setzen konnte.

Hab das CSS jetzt mit folgender Lösung versucht:

.cl-bild {
    border: 1px solid blue;
}

.cl-text
 {
    border: 1px solid red;
    padding: .5em;
}

@media (min-width: 500px) {
.cl-bild {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

Damit sollte oberhalb von 500px Breite Text und Bild nebeneinander in je 50% Breite dargestellt werden. Protostar steht auf "Fluid".

Leider bleibt es dabei, dass beides immer untereinander dargestellt wird. Der blaue Rahmen der KLasse .cl-bild umfasst auch nicht die ganze Darstellung incl. Text, sondern nur eng anliegend das Bild.

Das CSS-Beispiel stammt von hierher: https://wiki.selfhtml.org/wiki…ls/Einstieg/Media_Queries

(Jetzt geht's erst mal an den Baggersee)

Hab mich jetzt weiter durchgehakelt mit kleinem Teilerfolg und der Erkenntnis, dass sich das Bild mittels der Grid-Technik nicht automatisch in der Breite anpasst. Auch wenn ich zusätzlich in den Link zum Bild class="img-fluid" einfüge, passt sich die Bildgröße erst dann an, wenn Bild und Text übereinander stehen und die Spalte für das Bild kleiner wird, als die Bildbreite.

Zudem habe ich mit dem Text ein Problem: Aus mir unerklärlichen Gründen wird immer nur eine einzige Textzeile vertikal mittig rechts neben dem Bild angezeigt und der gesamte restliche Text steht wieder unter dem Bild und dann in voller Breite.

Das hier ist meine aktuelle CSS-Definition:

.cl-bild {
    border: 2px solid blue;
    }

.cl-text {
    border: 2px solid red;
    padding: .5em;
    }

@media (min-width: 500px) {
.cl-bild {
    display: grid;
    grid-template-columns: auto auto;
    }
    
.cl-text {
    grid-column-start: auto;
    } 
}

Ist die Grid-Lösung doch die falsche Strategie und ich muss auf die bisher üblichen div-Boxen zurück gehen, die mit float-left und 50% arbeiten?

Und ehe ich mich daran abarbeite… -hat da jemand vielleicht ein Stück CSS für mich, das diese Funktion bringt?

Danke für deinen Tipp. Ich hab inline im HTML das IMG tag drin. Hab's aufgrund deiner Anregung auch in die CSS-Datei geschrieben, ändert aber nix.

Hier mal das HTML des Artikels, den ich als Slide in das RokSprocket-Modul geladen habe:

<div>
    <cl-bild>
        <img src="images/sampledata/fruitshop/tamarind.jpg" 
alt="tamarind" class="img-fluid" />
    </cl-bild> 
    <cl-text>Vakuumbeutel sind beliebte Accessoires für....
    </cl-text>
</div>

Das Modul habe ich in Protostar auf Position 2 gelegt.

Wenn ich mir mit Firefox "Element untersuchen" die Sache anschaue, sehe ich, dass sowohl das Bild als auch die eine Textzeile rechts neben dem Bild durch irgend etwas vertikal zentriert sind innerhalb des Slide, sehe aber eben keine css-Anweisung dafür - auch keine vererbte.

Daran hat auch nichts geändert, dass ich cl-bild und cl-text in einen zusätzlichen div-container gesperrt habe.

Ein neuer Versuch mit folgender CSS-Definition brachte keine anderen Ergebnisse:

.cl-bild img {
    float: right;
    width: 50%;
    border: 2px solid blue;
}

.cl-text {
    border: 2px solid red;
    padding: .5em;
    margin-top: 0;
    overflow: auto;
    top: 0%;
}

@media (max-width: 500px) {
    .cl-bild {
        float: none;
        width: auto;
        }
}

Nun bin ich am Ende meiner CSS-Kenntnisse und komme ohne Anregungen hier nicht weiter. Die Website, auf der ich das alles ausprobiere, läuft lokal unter XAMPP und Joomla, sodass ich hier keinen Link posten kann. Andererseits ist die Aufgabe und die Schwierigkeit, die sich ergeben hat, doch recht klar dargestellt, oder?

Hab die Problematik mal per Screen-Video aufgenommen. Jedes Video hat unter 3MB Größe, Es sind mp4-Dateien, die ich gezippt habe.