Hilfe für Ansatz - Erweiterbarer Slider (gelöst)

[ralf.schlott]

Hallo!

Vielleicht könnt ihr mir helfen!?
Ich möchte einen jQuery Slider in Redaxo als Modul integrieren. Wie ich das mit der Übernahme der eingegebenen Daten mache (REX etc) ist mir klar. Der Slider soll aber beliebig erweiterbar sein. Nun sagte mir jemand aus dem Forum pauschal "löse das doch über Artikel". Klingt auch sinnvoll. Wie mache ich das aber? Ich habe bisher noch kein Modul gefunden, das ich als Vorlage nehmen kann. Wenn jemand hier einen Hinweis hat, wäre ich sehr dankbar!

Gruß Ralf

Gelöst hier: http://www.redaxo.org/de/forum/module-a ... tml#p99624

[Oliver.Kreischer]

Hi Ralf,

lass uns mal morgen telefonieren...

Die Lösung posten wir dann hier.

LG
Oliver

[ralf.schlott]

Hi Oli!
Frohes neues und vielen Dank. Letztendlich meinte ich auch dich, der mir den Tip gab... Aber ich finde es immer fair Module zu teilen!
Freu mich denn!

Gruß Ralf

[jdlx]

Der Slider soll aber beliebig erweiterbar sein. Nun sagte mir jemand aus dem Forum pauschal "löse das doch über Artikel". Klingt auch sinnvoll.

Machbar, nur wozu? Ist imho komplizierter als nötig.. ein Modul reicht denk ich vollkommen.
Was genau willst du denn in deinen slider Instanzen anzeigen?

lg,
Jan

[ralf.schlott]

Mit REX20 sind 3 Slider schnell voll, es müsste halt dynamisch erweiterbar sein, damit man so 6 Slider haben kann. Ausserdem wird der Inhalt ggf. öfter geändert.

[jdlx]

Mit REX20 sind 3 Slider schnell voll..

Ich meinte nicht alles aus einem Modul zu prügeln, sondern mehrere Instanzen eines Slider-Moduls.

lg,
Jan

[ralf.schlott]

Jeder Lösungsansatz ist mir willkommen. Was schlägst du denn vor?

Ich hatte für den Slider Feature List mal ein Modul gebaut. Zeige ich gerne. Daran kann man sehen, dass hier nicht mehr als 3-4 Slider passen.

Code: Alles auswählen

<p>Bild 1</p>
<p class="name"><label>&Uuml;berschrift Bild 1: </label><input name="VALUE[1]" value="REX_VALUE[1]" /></p>
<p class="name"><label>Unter&uuml;berschrift: </label><input name="VALUE[7]" value="REX_VALUE[7]" /></p>
<p class="desc"><label>Bild: </label>REX_MEDIA_BUTTON[1]</p>
<p class="desc"><label>Detailbeschreibung mit Link: </label><textarea name="VALUE[4]" rows="5">REX_VALUE[4]</textarea></p>
<p class="desc"><label>Verlinkung mit Artikel: </label>REX_LINK_BUTTON[1]</p>
<br />
<hr>
<p>Bild 2</p>
<p class="name"><label>&Uuml;berschrift Bild 2: </label><input name="VALUE[2]" value="REX_VALUE[2]" /></p>
<p class="name"><label>Unter&uuml;berschrift: </label><input name="VALUE[8]" value="REX_VALUE[8]" /></p>
<p class="desc"><label>Bild: </label>REX_MEDIA_BUTTON[2]</p>
<p class="desc"><label>Detailbeschreibung mit Link: </label><textarea name="VALUE[5]" rows="5">REX_VALUE[5]</textarea></p>
<p class="desc"><label>Verlinkung mit Artikel: </label>REX_LINK_BUTTON[2]</p>
<br />
<hr>
<p>Bild 3</p>
<p class="name"><label>&Uuml;berschrift Bild 3: </label><input name="VALUE[3]" value="REX_VALUE[3]" /></p>
<p class="name"><label>Unter&uuml;berschrift: </label><input name="VALUE[9]" value="REX_VALUE[9]" /></p>
<p class="desc"><label>Bild: </label>REX_MEDIA_BUTTON[3]</p>
<p class="desc"><label>Detailbeschreibung mit Link: </label><textarea name="VALUE[6]" rows="5">REX_VALUE[6]</textarea></p>
<p class="desc"><label>Verlinkung mit Artikel: </label>REX_LINK_BUTTON[3]</p>

/////Ausgabe

<div id="feature_list">
		<ul id="tabs">
				<li>
					<a href="javascript:;">
						<h3>REX_VALUE[1]</h3>
						<span>REX_VALUE[7]</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<h3>REX_VALUE[2]</h3>
						<span>REX_VALUE[8]</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<h3>REX_VALUE[3]</h3>
						<span>REX_VALUE[9]</span>
					</a>
				</li>
				
				
			</ul>
			<ul id="output">
				<li>
					<img src="'.$REX['HTDOCS_PATH'].index.php?rex_resize=950c__630h__REX_FILE[1]" alt="REX_VALUE[1]" title="REX_VALUE[1]" />
					<a href="REX_LINK[1]">REX_VALUE[4]</a>
				</li>
				<li>
				    <img src="'.$REX['HTDOCS_PATH'].index.php?rex_resize=950c__630h__REX_FILE[2]" alt="REX_VALUE[2]" title="REX_VALUE[2]" />
					<a href="REX_LINK[2]">REX_VALUE[5]</a>
				</li>
				<li>
					<img src="'.$REX['HTDOCS_PATH'].index.php?rex_resize=950c__630h__REX_FILE[3]" alt="REX_VALUE[3]" title="REX_VALUE[3]" />
					<a href="REX_LINK[3]">REX_VALUE[6]</a>
				</li>
				
			</ul>

</div><!-- Feature List -->

Einen ähnlichen Slider möchte ich jetzt gerne noch ein wenig bequemer in der Benutzung erstellen.

[jdlx]

Jeder Lösungsansatz ist mir willkommen. Was schlägst du denn vor? .. Daran kann man sehen, dass hier nicht mehr als 3-4 Slider passen.

Nochmal: das Slider-Modul macht die Ausgabe für _eine_ Slider Instanz.. d.h. du hast 20 REX_VALUES (und Konsorten..), für den Inhalte _eines_ slides, sprich das reicht meilenweit, zumal man ja auch Textile benutzen kann..

Knackpunkt ist ein bischen der wrapper um die Slider-Instanzen.. den macht man entweder manuell (per Modul oder raw Code), oder vollautomatisch aus dem SliderModul heraus, wobei (m)ein Automatismus halt etwas auf die Performance schlägt, da das Modul über OOArticleSlice(DB Zugriffe) ermitteln muß ob es das erste oder letzte einer Reihe ist, und dann entsprechend den wrapper auf/zu macht.. muß man halt abwägen: Komfort/DAU-proof vs. max. performance..

Hab leider grad keine live Demo an der Hand: eine ist noch nicht-öffentlich, und eine erst am enstehen, aber: es geht problemlos, glaub mir. ;) Den wrapper Automatismus kann ich dir aber schon mal verraten (die HTML Elemente sind logischerweise beliebig.. hier halt OL):

Code: Alles auswählen

// WRAPPER OPEN/CLOSE
////////////////////////////////////////////////////////////////////////////////
$cur  = OOArticleSlice::getArticleSliceById('REX_SLICE_ID','REX_CLANG_ID',0);
$prev = $cur->getPreviousSlice();
$next = $cur->getNextSlice();
$open = $close = '';

if(!is_object($prev) || $cur->getModuleId() != $prev->getModuleId())
  $open = PHP_EOL.'<ol class="liststyle">'.PHP_EOL;

if(!is_object($next) || ($cur->getModuleId() != $next->getModuleId()))
  $close = '</ol>'.PHP_EOL;

lg,
Jan

[ralf.schlott]

Hallo Jan,

das ist ja nett. Da muss man immer "um die Ecke denken". Für mich ist es noch ein wenig schwierig zu folgen.
D.h. du fügst den Slider aus mehreren "Blöcken" zusammen? Also vorne ein Block, in der Mitte die Slider, dann das Ende?

Du scheinst dich ja auch damit zu beschäftigen, bin ebenfalls gespannt, was du realisieren wirst.

Gruß Ralf

[jdlx]

D.h. du fügst den Slider aus mehreren "Blöcken" zusammen?

Genau..

Also vorne ein Block, in der Mitte die Slider, dann das Ende?

Das wäre die manuelle Variante.. mit obigem Code im Slider-Modul spart man sich die extra Wrapper-Blöcke vor und hinter den eigentlich slide-Blöcken, weil das slide-Modul eben selber weiß was es zu tun hat.

Bezügl. bestem/universellstem script für so ziemlich jedwede Art von slide bin ich nach längerer Recherche bei http://malsup.com/jquery/cycle/ gelandet.. das is in der Hinsicht eierlegende Wollmilchsau, und wie ich finde auch recht simpel zu implementieren..

lg,
Jan

[Oliver.Kreischer]

Hallo,

hm. Eigentlich wollte ich ja mal anhand eines jQuery Sliders beschreiben wie so etwas in eine Redaxo Seite eingebunden werden kann. Leider habe ich dafür momentan auch sehr wenig Zeit.

Ich entwickel die Slider meist so, dass einzelne Artikel augewählt werden können und aus dieser Auswahl eine UL LI Liste erstellt wird.

Um weiterzukommen ist sicherlich das Wichtigste das Modul. Die jQuery Slider Einbindung sollte sicherlich soweit klar sein.

Hier mal ein Beispielmodul (Verbesserungen sidn willkommen!):

Eingabe:

Code: Alles auswählen

Artikel auswählen<br/>
REX_LINKLIST_BUTTON[1]

Ausgabe:

Code: Alles auswählen

<?php
// Anfang der Liste
echo '<ul>';

	foreach(explode(',', 'REX_LINKLIST[1]') as $article_id) {
	   	$article = OOArticle::getArticleById($article_id);
	
	echo '<li>';
        echo '<a href="'.rex_getUrl($article->getValue('id')).'">Link zum Artikel</a><br/><br/>';
	echo '<b>Bild aus den Metadaten</b><br/><br/>'.$article->getValue(art_file).'<br/>';
	echo '<b>Artikelbezeichnung</b><br/><br/>'.$article->getValue('name').'<br/>';
	echo '<b>Description aus den Metadaten</b><br/><br/>'.$article->getValue('art_description').'<br/><br/>';
	echo '</li>';

}

// Ende der Liste
echo '</ul>';

?>

Hier habe ich mal Beispielsweise einige Infos aus den Metainfos anzeigen lassen.
Selbstverständlich können auch individuelle Metafelder abgefragt werden.

Hoffe es hilft!

LG
Oliver

[jdlx]

Ich entwickel die Slider meist so, dass einzelne Artikel augewählt werden können und aus dieser Auswahl eine UL LI Liste erstellt wird.

Hm.. das ist insofern elegant, daß man sich um das Wrapper Gedöns keinen Kopp machen muß. Andererseits finde ich ganze Artikel, Metadaten usw. persönlich auch wieder etwas umständlich. Aber basierend auf dem Ansatz könnt ich mir folgendes vorstellen: Keine ganzen Artikel beziehen, sondern alles slices eines Slide-Quell-Artikels, wobei die slices jeweils ein slide ergeben.

Oder evtl. auch so (ungetestet): diese slices im selben Artikel, aber so gecoded, daß sie ihren Inahlt nur preisgeben, wenn eine bestimmte Variable gesetzt wird.. das Wrapper-Modul bezieht dann diese slices aus dem Artikel anhand modul_id, setzt die Variable, und die Ausgabe erfolgt innerhlab des Wrappers..

Anyway, da ich recht intensiv auf Textile setze, kann man darüber - plus was man sonst noch braucht (Bilder, Positionierungen, whatever) - eigentlich alles über je eine Modul-Instanz erschlagen ohne weitere Quellen (z.b. Metainfos) anzapfen zu müssen..
(Das Gehampel mit Metadaten finde ich persönlich ja immer wieder lähmend.. spätestens wenn man mal viele Artikel dahingehend bearbeiten muß..)

lg,
Jan

[Oliver.Kreischer]

Hi Jan,

auch in den Metainfos kann ich ja Textile verwenden wenn ich das bei der Ausgabe berücksichtige. Bei mir war es bis jetzt meist so, dass ein Teaser auch auf einen Artikel verlinkt. Und wenn ich die Matainfos benutze habe ich alle relevanten Daten an dem Artikel und muss diese Daten nicht noch irgendwo anders pflegen...

Naja. Es gibt viele Lösungen für das (optisch) gleichge Ergebnis.

LG
Oliver

[jdlx]

Bei mir war es bis jetzt meist so, dass ein Teaser auch auf einen Artikel verlinkt.

Ah, ok.. dann macht das natürlich Sinn, verstehe. Die Wege des Herrn..

lg,
j.

[ralf.schlott]

Hallo Oliver,

ich danke dir und probiere das morgen mal aus. Manchmal packt man es nicht alles an einem Tag...

Gruß und Dank
Ralf

[ralf.schlott]

Fällt mir gerade auf, dass ich das ja mal gelöst hatte:

Beispielhafter Slider über Metabild:

Eingabe:

Code: Alles auswählen

Artikel auswählen<br/>
REX_LINKLIST_BUTTON[1]

Ausgabe:

Code: Alles auswählen

<?php
// Anfang der Liste
echo '<ul id="slider1">';

   foreach(explode(',', 'REX_LINKLIST[1]') as $article_id) {
         $article = OOArticle::getArticleById($article_id);
		 $pic = $article->getValue('art_file');
		 $link = $article->getValue('art_url');
		 $artikel = $article->getValue('name');
		 
   
   echo '<li>';
   echo '<span class="headline">'.$artikel.'</span>';
   echo '<a href="'.rex_getUrl($article->getValue('id')).'"><img src="'.$REX['HTDOCS_PATH'].'index.php?rex_resize=948c__240h__'.$pic.'" alt="'.$artikel.'" /></a><br/>';
   
   echo '<a href="http://www.'.$link.'">'.$link.'</a><br/>';
   echo '<span class="description">'.$article->getValue('art_description').'</span>';
   
   echo '</li>';

}

// Ende der Liste
echo '</ul>';

?>

Ich glaube das war der BX-Slider. Guckt euch einfach den Code des Sliders an. Es ist recht einfach zu lösen. Die Dateien des Sliders müsst ihr natürlich noch in den Head einbauen.