[liquidslider] Liquid Slider - responsive HTML5 Slider für Inhaltselemente

[thepixture]

https://contao.org/de/extension-list...000006.de.html

Wiki-Eintrag (in Bearbeitung)

Ein responsive, swipe-fähiger, HTML5 jQuery Content Slider sowohl für Web als auch mobile Geräte.
Der Liquid Slider ist ein responsive, swipe-fähiger, HTML5 jQuery Content Slider, der sowohl für Web als auch mobile Geräte eingesetzt werden kann.

Features-Auszug

• automatische Anpassung der Höhe an die einzelnen Inhaltselemente
• Unterstützung von Wischgesten zur Steuerung auf touchfähigen Geräten
• automatische Tab und Tab-Titel-Generierung
• Mobile Navigation bei Unterschreitung einer Mindestbreite
• Hash- und Crosslinks zur gezielten Ansteuerung einzelner Inhalte über interne oder externe Links

Lizenz
Diese Erweiterung basiert auf dem Script von Kevin Batdorf und ist unter der GPLv3-Lizenz veröffentlicht. Alle weiteren Programmierungen basieren auf dem Contao-internen Framework, wurden von thepixture - mediendesign erstellt und sind unter der LGPL lizensiert. Die Dokumentation und Demo finden sie auf der Homepage des Liquid Sliders unter http://liquidslider.kevinbatdorf.com/ .

-------------------------------------------------------------

Auch wenn es schon einige responsive Slider im ER gibt, wollte ich den hier gern auch da drin haben. Zu mal ich eigentlich kein Entwickler bin
Deswegen bitte ich darum, euch bei Featurerequests, auf Contaofunktionen zu beschränken. Das Script selber werde ich nicht um Features erweitern. Dafür ist der Script-Entwickler selber zuständig

Verbesserungsvorschläge und Hilfe nehme ich gern entgegen.

Ich hoffe der ein oder andere kann es gebrauchen.

[Anke]

Hallo thepixture,

auch wenn es schon einige Slider gibt, dieser sieht wirklich gut und schön flexibel aus und sollte eigentlich auch leicht zu handhaben sein.

Trotzdem habe habe ich Probleme damit. Ich habe drei Bild-CEs jeweils zwischen ein Start- und Stop-Element des Sliders gesetzt, aber sie erscheinen untereinander und es gibt keine Aimationen. Version ist 3.0.6, jQuery ist im Seitenlayout aktiviert. Was muss man noch berücksichtigen?

Viele Grüße,
Anke

[thepixture]

Du benötigste eigentlich nur ein Start- und ein End-Element. Dazwischen legst du die 3 Bildelemente an. Funktioniert im Prinzip wie bei einem Accordion mit mehreren Inhaltselementen.

Hoffe das hilft Dir weiter.

[Anke]

Aha, das bedeutet dann wohl, dass - abweichend vom Akkordeon - pro Slide immer nur ein Inhaltselement verwendet werden kann. Das muss man ja wissen :-)

Die Größenanpassung funktioniert wunderbar smooth!

Danke für die Hilfe,
Anke

[thepixture]

Ja, jedes Inhaltselement ist ein Slide, wobei man für mehrere Inhaltselemente versuchen könnte, diese nochmal in einen umschliessenden Div-Container zu legen.

[maipe]

Hi - kann ich einen Ordner mit mehreren Bildern für den Slider auswählen? Gibt es auch einen Crossfade?

[thepixture]

Hi - kann ich einen Ordner mit mehreren Bildern für den Slider auswählen? ...

Aktuell ist es leider nicht möglich die einzelnen Bilder einer Galerie zu sliden. Vielleicht finde ich aber noch eine Möglichkeit sowas einzubauen.

... Gibt es auch einen Crossfade?

Das Script lässt nur den einfachen fade zu. Crossfade ist somit nicht möglich.

[bahnfuehrer]

Hallo,

ich verwende den Slider mit Text und Bild im Spaltenset. Alles klappt wunderbar. Danke.
Nur wie bekomme ich den Hintergrund auf transparent?

Wenn ich .liquid-slider-wrapper .panel-container auf transparent setze, bekomme ich einen weißen Hintergrund.

lG aus der Oberpfalz

[thepixture]

Freut mich, dass es damit auch klappt

probiers mal mit

.liquid-slider-wrapper .liquid-slider {
  background-color: transparent;
}

[bahnfuehrer]

ja das klappt wenn ich die liquid-slider.css direkt bearbeite. ich dachte es reicht wenn ich im backend die definition anlege.

da habe ich noch was:

<div class="liquid-slider" id="slider-projekte" style="height: 576px;">

woher um alles in der welt kommen die 576px?

[wulf]

ist bestimmt autoheight:true; die größe richtet sich nach dem höchstem element

[thepixture]

ja das klappt wenn ich die liquid-slider.css direkt bearbeite. ich dachte es reicht wenn ich im backend die definition anlege.

Versuch mal den CSS-Code in "eigener Code" zu schreiben und dann zusätzlich mit !important

.liquid-slider-wrapper .liquid-slider {
  background-color: transparent !important;
}

da habe ich noch was:

<div class="liquid-slider" id="slider-projekte" style="height: 576px;">

woher um alles in der welt kommen die 576px?

ist bestimmt autoheight:true; die größe richtet sich nach dem höchstem element

bzw. nach der größe des aktuellen Elements

[rockpianist]

Hallo thepixture,
der Slider funktioniert im web einwandfrei.
Auf localhost funktioniert er nicht, obwohl ich jquery im betreffenden Seitenlayout ebenfalls aktiviert habe.
Gibt es hierfür eine Erklärung bzw. Lösung, damit ich weiter lokal entwickeln kann?
Danke rockpianist

[thepixture]

Hi rockpianist,

Funktionieren denn andere Erweiterungen, die auf jQuery setzen?
Nutzt du zufällig Firefox und Firebug, dann könntest du mal schauen, ob in der Konsole ein Fehler ausgeben wird.
Ansonten wüsste ich jetzt nicht, wo das Problem liegen könnte.

[xchs]

Auf localhost funktioniert er nicht

Läuft auf localhost vielleicht Apache 2.4.x? Die ".htaccess" im Modul-Verzeichnis müsste dann nämlich folgendermaßen aussehen:

<IfModule !mod_authz_core.c>
  Order allow,deny
  Allow from all
</IfModule>
<IfModule mod_authz_core.c>
  Require all granted
</IfModule>

Andernfalls könnte nämlich der Zugriff auf die Skripte vom Webserver geblockt werden.

[rockpianist]

Der Firebug bringt:

TypeError: $(...).liquidSlider is not a function
[Bei diesem Fehler anhalten] 	

swipe: true,

Ich habe XAMPP 1.8.1
Wo kann ich die Apache-Version sehen, ich habe Sie wahrscheinlich von "Websites erstellen mit Contao 3".
Allerdings ist das eine Win32 - Version und ich habe ein Win64 Notebook.

Meinst Du /system/modules/liquidslider/ ?
Dort gibt es in den Unterverzeichnissen 6 verschiedene .htaccess?

Danke rockpianist

[xchs]

Ich habe XAMPP 1.8.1

Das dachte ich mir.

Wo kann ich die Apache-Version sehen, ich habe Sie wahrscheinlich von "Websites erstellen mit Contao 3".

Zum Beispiel hier:

• http://www.apachefriends.org/de/xampp-windows.html
• oder in der phpinfo()
  

   <?php phpinfo(); ?>

• oder über die Kommandozeile

Meinst Du /system/modules/liquidslider/ ?
Dort gibt es in den Unterverzeichnissen 6 verschiedene .htaccess?

Ja, die wären alle entsprechend anzupassen.

Dort wo bisher

order deny,allow
allow from all

steht, sollte

<IfModule !mod_authz_core.c>
  Order allow,deny
  Allow from all
</IfModule>
<IfModule mod_authz_core.c>
  Require all granted
</IfModule>

rein und überall wo

order deny,allow
deny from all

drinnen steht, müsste

<IfModule !mod_authz_core.c>
  Order deny,allow
  Deny from all
</IfModule>
<IfModule mod_authz_core.c>
  Require all denied
</IfModule>

eingefügt werden.

Allerdings sind letztgenannte ".htaccess"-Dateien IMHO ohnehin nicht (mehr) notwendig, zumal bereits die ".htaccess" auf Systemverzeichnisebene "/system/.htaccess" sämtliche Zugriffe standardmäßig blockt.

Die oben genannten Änderungen und Anpassungen sollten aber besser von @thepixture vorgenommen werden.

[rockpianist]

Aha, danke für Deine ausführliche Antwort.
Das Problem sollte ja alle js-basierten Erweiterungen betreffen und zunehmen.
Gruß rockpianist

[xchs]

Ja, alle Erweiterungen, welche Assets (JavaScripts, Stylesheets, Icons usw.) im Erweiterungsverzeichnis mitliefern und wo ein Zugriff auf diese Ressourcen möglich sein muss.

[Flex]

Läuft auch mit C3.1 ohne Probleme...

Einziger Wunsch: Analog zum neuen "Hausslider" die schöne Anzeige mit "Umschlag"
Der Kunde versteht das Prinzip direkt besser als Start+Ende.

[thepixture]

Läuft auch mit C3.1 ohne Probleme...

Einziger Wunsch: Analog zum neuen "Hausslider" die schöne Anzeige mit "Umschlag"
Der Kunde versteht das Prinzip direkt besser als Start+Ende.

Ok, danke für den Hinweis auf 3.1.

Mit dem Umschlag schau ich mir an und ziehe es dann nach.

[thepixture]

Es steht eine neue Version im Repository bereit.

Details siehe Änderungs-Log.

[rockpianist]

Danke, Update funktionierte problemlos.
Dumme Frage von mir, wo finde ich das Änderungs - Log?
Gruß rp

[thepixture]

im Erweiterungskatalog unterhalb der Beschreibung

[thepixture]

Es steht eine neue Version im Repository bereit.

Details siehe Änderungs-Log.

[thibodeaux]

Hello, I am trying to understand how to to implement the navigation tabs using this plugin - can someone clarify this for me please?

[thepixture]

Ok i'll try

First you have to clarify which element you'll use for the tab navigation. Because the text of this element will be used.

In the liquidslider settings activate 'dynamic tabs'. After that you'll be able to specify the element for the tab navigation. If you have a headline e.g. H2 in each element, then you can use this element for 'Dynamic title selector by type' by typing in 'h2' (without quotation marks). Or any other element if you like. You can also use css classes e.g. 'h2.title'. So only H2 with the class 'title' will be used.

tab_navigation.PNG

If you don't want the H2 to be visible but for the navigation you can hide it in your css style sheet with

h2.title { display:none; }

I hope that will help you out. Sorry for my poor english
Otherwise check the documentation of the developer of the liquidslider script.

[rockpianist]

Die Slides erscheinen untereinander als ob javascript ausgeschaltet wäre. http://www.depecheroad.de
Was kann man tun?
Gruß rockpianist

[Anke]

jQuery ist aktiviert?

[rockpianist]

Ja, defenitiv.
Ich habe an den Einstellungen im Zusammenhang mit dem Update nichts geändert und auch noch mal in den Layouteinstellungen nachgeschaut.
Das Häkchen bei "jQuery" laden ist gesetzt.

Auf der hier angegebenen Seite http://www.partyband-livemusik.de/audio sieht man links den kaputten liquidslider und rechts das funktionierende jQuery - Accordion.
Gruß rockpianist

[Anke]

Ich hab diesen Slider noch nicht selbst ausprobiert, aber der kommt bestimmt mit einzubindendem CSS. Das hast du aber nicht eingebunden, oder?

[thepixture]

Hallo Rockpianist,

also Firebug zeigt mir erstmal keinen Fehler an
Hab bei mir auch eine ältere Version geupdatet und da läufts.

Liegen die beiden Webseiten in einer Contao-Installation? Hast Du mal versucht die Cache-Ordner unter Systemwartung zu bereinigen? Also Skriptcache leeren, Seitencache leeren, Internen Cache leeren und Temp-Ordner leeren. Manchmal liegt da schon die Lösung.

Ansonsten kannst Du höchtens nochmal versuchen die Erweiterung neu zu installieren.

[rockpianist]

Es gab einen Konflikt mit mootools, welches vom Gallery Creator im Menüpunkt Foto benötigt wird.
In Contao 3.1.0 war das egal.
Ich habe zur Lösung ein zusätzliches Seitenlayout für die Unterseite /foto angelegt und nur dort MooTools aktiviert. Außerdem habe ich in den Browsereinstellungen den Cache komplett deaktiviert.
Ich hatte erst Bedenken, dass sich die beiden Bibliotheken doch irgendwie stören, auch wenn sie in untschiedlichen Seitenlayouts aktiviert sind, aber es funktioniert!
rockpianist

[Perhaps]

Läuft auch problemlos unter 3.1.2, aber MooTools darf nicht geladen werden, sonst geht garnix.

Gruß Perhaps

[Gundel]

Hallo.
Ich habe ein Problem mit der Breite des Silders.
Hier die Site, es ist nur ein Test also nicht schönes.
http://anna.schönzha.ch/index.php/galerie.html#
Die Bilder sind 600px breit, der Silder sollte max-width: 600px und width: 100% sein (zum Beispiel).
Ich kriege das nicht hin, ich weiss nicht, wie ich diesen Abstand zwischen den Bildern wegkriege und den Slider schmaler machen kann.
Noch eine Frage: Kann ich per AJAX in den Slider noch einen weiteren Slider laden?
TAusend Dank!!!

Gundel

[thepixture]

Hallo,

weiß nicht, ob ich Dir da helfen kann, aber das max-width: 1030px, das für den liquid-slider-wrapper durch das script vergeben wird, kannst Du im eigenen CSS mit

max-width: 600px !important;

überschreiben.

Kenn mich selber mit der API vom Liquid Slider nicht aus. Kann Dir daher nicht sagen, ob man per AJAX einen weiteren Slider laden kann.
Mittlerweile gibt es ja schon den Liquid Slider in Version 2, aber noch nicht für Contao. Wenn ich Zeit und Muse hab, werd ich die Erweiterung darauf aktualisieren.

[Gundel]

hallo
Danke, manchmal sieht man vor lauter Wald die Bäume nicht mehr, oder umgekehrt...
Responsive ist er aber immer noch nicht. Wenn ich das Fenster jetzt kleiner mache, drückt es ein anderes Bild in den Slider, dann sieht man zwei Bilder halb.
Kann ich das ändern?

ps: wünsche dir bald viel MUSSE...

Gruss Gundel

[mavnet]

Hallo,

super Erweiterung, aber:
Wie bekommt man es denn hin, dass die Tabs links vom Slider bzw. content stehen?

Tab1 Tab2 | CONTENT
Tab3 Tab4 | SLIDE


Via css habe ich es nicht geschafft ...

Jemand einen Rat?

Viele Grüße
mavnet

Edit: Okay, manchmal sollte man vielleicht erstmal mehr lesen ;-). Schlagwort: Cross-Links aktivieren und entsprechendes, separates Menü erstellen ....

[lavite-machine]

hallo
Danke, manchmal sieht man vor lauter Wald die Bäume nicht mehr, oder umgekehrt...
Responsive ist er aber immer noch nicht. Wenn ich das Fenster jetzt kleiner mache, drückt es ein anderes Bild in den Slider, dann sieht man zwei Bilder halb.
Kann ich das ändern?

ps: wünsche dir bald viel MUSSE...

Gruss Gundel

Hallo,


ich habe genau das selbe Problem, der Inhalt verschiebt sich von slide zu slide ein wenig nach rechts bis irgendwann der jeweils vorherige slide auch zu sehen ist. Gibt es einen Weg, das umzustellen, dass alle Inhalte linksbündig angezeigt werden?

Vielen Dank!

Gruß,
Tobias

[thepixture]

Hallo lavite-machine,

kann ich leider bei mir nicht nachvollziehen, wieso sich der Slider bei Euch so verhält.

Ich hab den Slider bei mir auch nochmal unter einer 3.1.5 neu installiert und einfach mit den Standard-Einstellungen und 3 Bildern angelegt.
Bei mir nimmt jeder Slide genau die Breite des Sliders in Anspruch, egal, ob das Bild kleiner oder genauso groß ist, wie der Slider. Bei den kleinen Bildern ist rechts daneben eben mehr freier Platz. Aber da scheint nicht der nächste durch.

Hast du sonst mal einen Link, wo man sich das anschauen kann?