Tutorial: Template erzeugen (Fractionsslider)

[kukki]

Seit längerer Zeit beschäftige ich mich mit verschiedenen jQuery-Slidern und deren Implementierung ins phpwcms (V1.6 ff)
Unter anderem wurden der Nicoslider, Jcontentslider, zwei Accordions und ein Layerslider V3.x erfolgreich integriert. Wie man das Ganze macht, kann man auf meiner Spielwiese und auch hier im Forum an verschiedenen Stellen nachlesen.

Was ich will, ist ein Slider, der mit allen gängigen CP oder/ und {SHOW_CONTENT ...} zusammengestellt werden kann und individuelle Aktionen ausführt. Idealerweise wäre ein Uni-CP dafür eine Hilfe ... einen solchen stellt OG aber nicht zur Verfügung .

Die Technik der Layerslider ist komplizierter zu handhaben als die oben erwähnten, da einige zusätzliche Einstellungen am/ im Template vorzunehmen sind, die aber halt erst von "außen zugeführt werden" müssen. Der HTML-5-„data-attribut“-Notationen kann man diese Einstellungen mittels JScript manipulieren. Aber eine generelle Manipulation ist noch keine individuelle Slidermanipulation mit verschiedenen Einstellungen.

Wer JScript nur ansatzweise (wie auch ich ) beherrscht, wird sich mit den vom Programmierer bereitgestellten Default-Einstellungen bzw. deren Modifikation zufrieden geben müssen. Oder man tastet sich an die ganze Sache step by step heran, um eine Lösung zu finden.

Häufig sind die Dokumentationen für solche Ergebnisse schnell zusammengeschrieben und nicht so 100%ig nachvollziehbar. ( siehe auch Fractionsslider) Man muss sich mit solchen Teilen ziemlich aufwendig beschäftigen.

[kukki]

Es ist also eine Testreihe angebracht, die die Entwicklung einen lauffähigen Templates zum Ergebnis hat.

Mit Hilfe der <!-- JS/ CSS: .... --> Notation lässt sich schnell und ohne große Umstände ein Jscript- oder/und CSS-file in einen CP einlesen, vorausgesetzt, diese wurden per FTP an die Stelle übertragen
Also wurde erst einmal für einen Test ein neuer Artikel erstellt und mit HTML-CP der entsprechende Quelltext step by step in drei Einzelparts aufgedröselt:

Der Kopf des Ganzen:

Code: Select all

<!-- CSS:  /template/lib/jquery/plugin/fSlider/fSlider.css -->
<!-- JS:    /template/lib/jquery/plugin/fSlider/jquery.fractionslider.min.js -->

Hauptteil:

Code: Select all

<div class="slider">
…
<div class="slide budda" data-in="slideLeft">
<p data-in="right" data-position="220,20" data-delay="500"  data-time="1250">Slider- transitions</p>
 …
<img data-fixed src="/picture/FSlider/Back1.jpg" width="800" height="400">
<img data-in="bottomLeft" data-time="1000" data-position="0,470" src="/picture/FSlider/Bild1.png"> 
…
</div></div>

Schlussteil/ Start:
(damit startet man in der Regel das Script und verstellt Defaultwerte nach eigenem Ermessen!

Code: Select all

<!-- JS:  $(window).load(function()
{  $('.slider').fractionSlider({  …. 	});
}); -->

Läuft das ganze nach diesen Vorgaben, dann ist erst einmal alles richtig gemacht! Die Bilder ziehe ich im Moment noch aus den picture-Verzeichnis, später soll dass aus dem Dateiverzeichnis geholt werden.



Einige Zeit habe ich gebraucht, um zu begreifen, dass es einen indirekten Zusammenhang zwischen data-time und data-delay gab, der zur Folge haben kann, dass eine „jQuery Easing-Methode“ nicht funktioniert, wenn die entsprechende Zeit dafür rechnerisch nicht vorhanden ist. Probiert es einfach mal aus. Erst wenn „genügend Zeit“ für die Slider-Aktion vorhanden ist, lassen sich jQuery-Easing-Methoden und auch individuell für jeden Bild/Text-Part ausführen/ ändern.

Hier das aktuelle Ergebnis meiner Testerei!

Und unter dem Thema DOM Manipulation Methods findet man noch einige Möglichkeiten, etwas dafür zu tun. jQuery 2.0.3. steht ja in phpWCMS zur Verfügung ...

[Oliver Georgi]

besser keine absoluten Pfade benutzen /template…! Der aktuelle Template Pfad steht immer im Ersetzer {TEMPLATE} zur Verfügung

[kukki]

Ja, Danke Oliver, werde ich an Schluß beachten.
(Optimieren ...)

[kukki]

Nachdem man seine Einstellungen/ Korrekturen an CSS~ und JS-Files gemacht hat und alles läuft, kommt der nächste Schritt.
Im ADMIN-Bereich/ "Seitenlayout" erstellt man sich einen CostumerBlock FSLIDER.
Diesen füllt man dann im ADMIN-Bereich "Vorlagen" mit den entsprechenden CSS~/ JS-Files und DIV-Bereichen wie folgt:

{FSLIDER}

Code: Select all

<!-- CSS: /template/lib/jquery/plugin/fSlider/css/fractionslider.css -->
<!-- JS:  /template/lib/jquery/plugin/fSlider/jquery.fractionslider.min.js -->

<div class="slider">
<div class="fs_loader"></div>{FSLIDER}</div>

<!-- JS:
$(window).load(function(){
	$('.slider').fractionSlider({
	'fullWidth': false,
	'controls': true, 
	'pager':    true,
	'responsive': true,
	'dimensions': '800,400',
	'easeIn' : 'easeInExpo', // default easing in
	'easeOut': 'easeInCubic' // default easing out
	});
});
-->

In der Artikelzentrale werden die CPs mit den IDs 325 und 326 unsichtbar (gelb) geschaltet und der HTML-Part ID 324 wird um die im {FSLIDER} eingetragenen DIVs gekürzt, so dass nur noch ein absolutes Grundgerüst HTML für die einzelnen Bilder/ Texte übriggeblieben ist.
Im Artikelbereich wird dann ein HTML-CP erstellt mit der Notation des CostumerBlocks [FSLIDER}, das ganze sieht dann so aus:



Wenn alles richtig gemacht wurde, läuft der Slider wie zuvor mit den drei HTML-CPs!

Und jetzt kommt der komplizierte Teil des SlidersPlugins. Es sollen jetzt modifizierte/ neue(!) Templates entstehen, die die Bedingungen des HTML-Grundberüstes entsprechen (Bilder/ Texte) - wie eben CPs Bilder/ Bilder<DIV>/ Bilder special/ Text.
Die Krönung wäre, wenn dann noch mit SHOW_CONTENT andere CP-Konstrukte in diesem Slider mitlaufen (Siehe JCONTENSLIDER)

Da jQuery bereits im Hintergrund mitrubelt und dort entsprechende DOM-Manipulationen durchgeführt werden könnte, ist ein solcher Lösungsansatz denkbar, um bestimmte Teile aus der Information in Bilder/ Bilder>DIV> etc. auszulesen und dann an entsprechender Stelle wieder einzubauen. Ich möchte die Gestaltung des Sliders variable halten, um damit für verschiedene Nutzer in Aussehen und Ablauf variable Ergebnisse anbieten zu können. Und hier wäre halt eine Uni-Slider-Template von OG interessant, wo man solche Eingaben für data-in/ out, data-time, data-position, data-fixed, data-delay, data.easy-in/out und data-special nur anklickt und bestenfalls noch mit Parametern versieht.

Einen UniSlider-Content-Type könnte man sich im Grundgerüst so vorstellen.



Beim Klick auf ein data-Element wird dieses (Eingabe kommasepariert) zum entsprechenden Contenttype dazugefügt und steht für den Slider zur Verfügung. Die data-ease-in/out-Bezeichnungen findet man an dieser Stelle ! und data-in/out an dieser Stelle

Gleiches noch für separaten Text, den man dafür gebrauchen kann ... dann wäre alles schon in Sack und Tüten.
Es kommt jetzt bestimmt die Antwort "Keine Zeit, kein Geld, keine ..." von OG.
Trotzdem aber meine Anfrage, ob Oliver nicht die Notwndigkeit sieht oder davon überzeugt ist, einen solchen Uni-Slider-CP bereitzustellen

Wird fortgeführt

[Oliver Georgi]

Du hast schon recht, einen universellen Slider wird es von mir nicht geben, da die Anforderungen zu vielfältig sind, die Wünsche zu verschieden und auch die Sau permanent aufs Neue durchs Dorf getrieben wird. Keep it simple. Eine HTML-Vorlage sollte reichen. Man kann auf Basis einer Teaser-/Bildgalerievorlage so vieles machen, Der hier oft exzessiv vorgeschlagene Einsatz von SHOW_CONTENT ist suboptimal.

[kukki]

Ja, gut - dann wären solche Layer-Slider für diejenigen unter uns, die solche auf einer Website intergeirten wollen ein reines handmade-Produkt, schwierig in der Pflege/ Wartung, u.U. teuer für den Kunden ... da hat dann "breitsch" den besseren Weg ( ), ein normales Modul, das dann mit den einfachsten Einstellungen arbeitet und halt auch mal an eine neuere Release-Version angepasst werden muss.

[update]

ein normales Modul

http://www.phpwcms-howto.de/wiki/doku.p ... s-download
Nur der Vollständigkeit halber
Supercool!
Erst recht die PRO-Version!

[Uwe367]

Supercool!
Erst recht die PRO-Version!

Absolut richtig. Das Modul in der PRO Version ist spitze, aber auch die Free Version ist nicht zu verachten.

[update]

Es sollte bei der jetztigen Modul-Anlage durchaus möglich sein, den parallaxen fractionslider da zu implementieren (z.B. in der PRO). Die ganzen data-in/out/quer/längs- Angaben ließen sich bequem per Hand reinmalen. Css-Möglichkeiten gibt's ja schon jetzt für jedes einzelne Bild und und...
Aber das sollte sich ruhig breitsch erst mal anschauen.
Wäre aber schon 'ne perfekt-schicke Sache, auch einen "Parallaxer" an der Hand zu haben ...

[Oliver Georgi]

so, alles klar nun, warum ich nichts mache

[Uwe367]

so, alles klar nun, warum ich nichts mache

Hm.. nicht wirklich Oliver.
Ein Modul ist, wie der Name schon sagt, eine Erweiterung die mit dem Core von phpwcms nichts zu tun hat. Sicher wäre es für das Verständnis aber einfacher, wenn ein Slider im Core des Systems mit einem dazugehörigen Template fest eingebaut wäre. Es ist den meisten Usern ja nicht damit getan daß es funktioniert, sondern man möchte wissen wie es funktioniert um daraus evtl. eigene Ableitungen schaffen zu können.

[update]

also, phpwcms ist mehr ein framework als eben mal eine outtabox-Lösung. Deshalb gehört so ein slider eben eher in ein Modul als in den Core. Dennoch stellt der Core genau die Funktionen zur Verfügung, um eben solche Lösungen zu ermöglichen. Oliver hat da schon recht.
Und was kukki sucht, ist ein eiersauender Wollmilchleger - aber den gibt's gar nicht (wie soll denn z.B. data-in wissen, wohin es gehört: zum div, p oder wie und welchem?). Vom Ansatz ok, aber keine Grenze gezogen...
Also würde es auch Handarbeit bleiben, alles hübsch feinzutunen - selbst mit einem so feinen Modul:

so, alles klar nun, warum ich nichts mache

Naja, nun, ja, klar

[kukki]

WOW, wow ... hoffentlich gibt es kein böses Blut - auch wenn vielleicht ein paar Spitzen gemacht werden.
Klar, wir sind doch alle erwachsene Leute....

Und was kukki sucht, ist ein eiersauender Wollmilchleger - aber den gibt's gar nicht (wie soll denn z.B. data-in wissen, wohin es gehört: zum div, p oder wie und welchem?). Vom Ansatz ok, aber keine Grenze gezogen...

Dem ist nicht so, ich wünsche mir ein Slider-CP (Text und Bild), dass die Erzeugung unterstützt. Handarbeit wird schon notwendig sein, das ist klar! Aber im wesentlichen kann ich doch ein Template dazu selber zusammenstellen (vorausgesetzt, es werden wirklich mal die einzelnen Template-Parameter preisgegeben/ erläutert ), so dass solche data-Notationen in MEINEM *.tmpl ganau dahinkommen, wo ich Sie haben will. Bilder aus dem Datenverzeichnis, Texte mittels TEXT-CPs ... (siehe grafischer Ansatz-Vorschlag) ...

Bild0 mit CP-Slider, klick auf data-fixed, Größe bestimmen, fertig ... Hintergrund steht.
Bild1 ...., klick auf data-position, Angabe kommasepariert, data-in/out ....... fertig, erstes Layer steht!
Bild2 ...., klick auf data-position, Angabe kommasepariert, data-in/out ....... fertig, zweites Layer steht!
Text1 ... klick auf data-postion, Angabe css-klasse, fertig ... einfliegender Text ist erledigt u.s.w.

Und sooo viele brauchbare LayerSlider gibt es ja nicht!

Ich weiß schon was ich will, wenn alle an einem Strang ziehen und den Bogen dabei nicht überspannen, kommt bestimmt eine gangbare Lösung zustande!

Das, was "breitsch" uns zur freien Nutzung hingelegt hat, ist eine Sache. Wenn ich PHP-Programmierer wäre, hätte ich das auch versucht hinzulegen, aber ich gehe in fast 7 Jahren in Rente, da tue ich mir das nicht mehr an.

Ich habe mit breitsch schon vor längerer Zeit Kontakt aufgenommen. Allerdings scheint er ein reisefreudiger User zu sein. Leider hat er sich noch nicht wieder gemeldet. ABer - ich bleibe dran und investiere dazu auch ein paar €uronen. Es hängt da eine super Idee mit dran, die ich vor zwei Tagen nun auch hardwaretechnisch auf dem Papier in Griff bekommen habe. Deswegen auch meine vergangenen Anfragen, die leider nie erschöpfend beantwortet sind - um nur einige zu nenen ...

1. automatisches Abspielen einer Website u.d.gl.
2. Schleifen in der Templatesteuerung
3. Dokumentation für CP-Templates auf Basis jQuery

Es sollte bei der jetztigen Modul-Anlage durchaus möglich sein, den parallaxen fractionslider ...Css-Möglichkeiten gibt's ja schon jetzt für jedes einzelne Bild und und... Wäre aber schon 'ne perfekt-schicke Sache, auch einen "Parallaxer" an der Hand zu haben ...

Dem stimme ich voll zu

Vielleicht legen wir zusammen?

[update]

WOW, wow ... hoffentlich gibt es kein böses Blut - auch wenn vielleicht ein paar Spitzen gemacht werden.

Nein, nein, keine Sorge!
Der fractionslider ist schon prima, keine Frage!