slideItMoo - schlanker Elementslider auf Mootools Basis

Hallo Community,

wie schon mal erwähnt arbeiten wir intern an einem neuen Content/Elementslider da wir mit den vorhandenen nicht ganz zufrieden waren und schon lange mit dem slideItMoo Script arbeiten.

Das ganze haben wir nun in eine kleine Extension verpackt und im ER veröffentlicht.

http://www.contao.org/erweiterungsli....10003.de.html

Einsatz der Extension

Nach der Installation ist im Artikel ein neuer Elementtyp verfügbar - "slideItMoo Start" enthält alle Konfigurationsmöglichkeiten:

- Anzahl der sichtbaren Elemente
- Breite und Höhe eines Elements
- Linker und Rechter Abstand eines Elements
- Effektdauer
- Autoplay (Automatische Slideshow aktivieren)
- Navigationsbuttons aktivieren
- etc

Zusätzlich bietet die Extension ein Art Standarddesign das man auswählen kann. Möchte man den Slider ganz alleine stylen kann man das natürlich gerne, einfach das Template garnicht erst aktivieren.

Leider gefällt mir die Ausgabe der Slideshow ohne Javascript noch so garnicht. Das wird auf jeden Fall im nächsten Release verbessert. Desweiteren sind noch weitere Templates geplant und die Option für einen vertikalen Slider.

Feedback ist wie immer gewünscht :)

Ergänzende Information:
SlideItMoo auf Contao-forge:
http://contao-forge.org/projects/slideitmoo

Hallo jared,
vielen Dank dafür :-)

Das Demo auf der Original Seite sieht schon mal ganz gut aus. Und das verhalten ohne JS ist beim 1. Beispiel super: Man sieht den ganzen Inhalt (bei den anderen Beispielen leider nicht).

Viele Grüße

Und dabei immer schön an Barrierefreiheit denken *kann es sich nicht verkneifen* :D

Zitat:

---

Zitat von Nina

Und dabei immer schön an Barrierefreiheit denken *kann es sich nicht verkneifen* :D

---

Ja ich weiß doch :) wir werden versuchen das Thema im Release 2 weiter auszubauen.

Sieht ja shconmal vielversprechend aus. Danke dafür!
Ich komme leider erst in meinen Semesterferien dazu das zu testen.
(Oder ich werde früher Rückfällig und muss es aus Neugier tun und versau deshalb die Prüfungen :P)

Ich hab heute morgen nochmal eine neue Version hochgeladen. Jetzt kann man den Selektor der Elemente innerhalb der Slideshow selbst wählen.

Gibt man keine Klasse ein dann nimmt sich die Extension standardmäßig .block und verwendet diese.

Das trifft sich wunderbar!
Bin aktuell dabei ein Design zu erstellen mit Slider und muss sagen dieser Slider hier gefaellt mir sehr gut.
Erst dachte ich "och noe nicht noch ein slider" aber er macht mehr her als alle anderen im ER! Grossartig! Weiter so!

Danke das hört man gerne.

Uns ist bewusst das es nicht die erste Slider Extension im ER ist aber dieser deckt intern gut 90% aller Fälle ab in der wir einen Slider benötigen. Außerdem ist es ein gutes Testsystem für unsere neuen Mitarbeiter um mal in die Extension Programmierung reinzuschnuppern ;)

Super, dann weiß ich jetzt dass es sich für einen anfänger lohnt auch mal unter die haube zu schauen :P

Klasse Erweiterung!

"Anzahl der sichtbaren Elemente", genau darauf habe ich gewartet.
Kann man in der nächsten Version als Effekt auch "alpha" einstellen?

Wenn ja, wie lang brauchst du noch um das umzusetzen?


Grüße Matthias

Hast du ein Beispiel für Alpha?
Wie genau muss man sich das vorstellen?

Hi,

mit alpha meine ich den Fade Effekt (Weiche Überblendung),
da wird der Alpha Kanal auf 0 bzw auf 100 gesetzt.

Siehe Link: http://stoutlabs.com/demos/class_slider_v2b/fade.htm


Gruß Matthias

Der Slider ist wirklich sehr nett und einfach zu konfigurieren.

Nun aber zu meinem Problem, ich würde im Slider gerne eine Galerie anzeigen lassen. Dazu nutze ich die Contao-interne-Galerie-Funktion mit einem tabellenlosen Design mit folgendem Code:

PHP-Code:

---

<div class="fluidgallery block">

<ul>
<?php foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): ?>
<?php $gallery_item_nr=$gallery_item_nr+1; 
if ($gallery_item_nr % 2 != 0) {
    $even_or_odd = odd;
} else {
    $even_or_odd = even;
}
$class_item = "item$gallery_item_nr $even_or_odd";
?>


<?php if ($col->addImage): ?>
  <li class="<?php echo $class_item; ?>">
  <div class="image_container">
<?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 endif; ?>
  </div>
  
  <?php if ($col->caption): ?><div class="caption"><?php echo $col->caption; ?></div>
            <?php endif; ?>
  </li>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>

</div>

---

Die Anzeige funktioniert auch ohne Probleme, allerdings kann ich den Slider dann nicht mehr wirklich bedienen. Wenn ich nach rechts "sliden" will, dann überspringt der Slider mehrere Einträge und springt dann zum 3. Eintrag (es sind 3 Einträge vorhanden, der Slider springt vom ersten Eintrag über den 2., 3., 1., 2. und dann zum 3.).

Das Template vom Slider habe ich nicht verändert.

Zitat:

---

Zitat von hensmatt

Hi,

mit alpha meine ich den Fade Effekt (Weiche Überblendung),
da wird der Alpha Kanal auf 0 bzw auf 100 gesetzt.

Siehe Link: http://stoutlabs.com/demos/class_slider_v2b/fade.htm

Gruß Matthias

---

Wenn ich das nicht komplett missverstehe dann wird das mit dem Slider nicht ohne weiteres möglich sein. Wir arbeiten ja auch nur mit diesem Script

http://www.php-help.ro/mootools-12-j...-image-slider/

und der nutzt nur die Funktionen die ihm Mootools so bietet (Mootools Transitions). Aber wieso nutzt du nicht dafür die anderen Slider die im ER sind? Einige davon können ja den Alpha Effekt.

Zitat:

---

Zitat von mj1985

Die Anzeige funktioniert auch ohne Probleme, allerdings kann ich den Slider dann nicht mehr wirklich bedienen. Wenn ich nach rechts "sliden" will, dann überspringt der Slider mehrere Einträge und springt dann zum 3. Eintrag (es sind 3 Einträge vorhanden, der Slider springt vom ersten Eintrag über den 2., 3., 1., 2. und dann zum 3.).

Das Template vom Slider habe ich nicht verändert.

---

Ich kenne das Problem und habe es auch mal in einem Testcase in unserer Entwicklungsumgebung behoben. Nur habe ich da ein anderes Galerie-Template genutzt.

Hast du ein Link zu deiner Seite? Dann kann ich mir das nochmal anschauen und sollte dir dann auch eine Lösung präsentieren können.

Meine Installation läuft momentan auf Contao2Go, deswegen kann ich keinen Link weitergeben.

Kann ich dir die Seite bzw. den Quellcode irgendwie anders "servieren"?

Der nonverblaster:hover Mediaplayer funktioniert übrigens bestens. :D

Dann bräuchte ich einmal einen Screenshot vom Backend. Ich muss sehen wie du den Slider konfiguriert hast und das Galerie-Template kann ich mir wahrscheinlich aus dem von dir zitierten PHP Code nehmen oder?

Mootools bietet diesen Effekt, siehe link:
http://mootools.net/docs/core/Fx/Fx.Tween#Element:fade

Hab auch momentan einen anderen, zusätzlichen Slider im Einsatz, ich habe nur Angst das die Performance darunter leidet wenn ich zu viele module auf einer Seite habe.

Grüße Matthias

Zitat:

---

Zitat von jared

Dann bräuchte ich einmal einen Screenshot vom Backend. Ich muss sehen wie du den Slider konfiguriert hast und das Galerie-Template kann ich mir wahrscheinlich aus dem von dir zitierten PHP Code nehmen oder?

---

Genau, das Gallery-Template findest du oben im Code.

Hier 2 Screenshots aus dem Backend:

Zitat:

---

Zitat von hensmatt

Mootools bietet diesen Effekt, siehe link:
http://mootools.net/docs/core/Fx/Fx.Tween#Element:fade

Hab auch momentan einen anderen, zusätzlichen Slider im Einsatz, ich habe nur Angst das die Performance darunter leidet wenn ich zu viele module auf einer Seite habe.

Grüße Matthias

---

Da bringst du aber was durcheinander. Das eine ist die Tween Bibliothek und das andere die Transition Bibliothek

Hallo zusammen,

mal zwischenrein gefragt:

Ich habe den Slider auch schon mal testen wollen, aber:

Ich erhalte bei 5 Inhalteselementen Text auch immer alle 5 Texte untereinander angezeigt, auch wenn ich in den Einstellungen sage, nur ein Element verschieben / anzeigen.

Und ein Startelement legt automatisch ein Endelement an, richtig so?

Welche Einstellungen hast du denn getroffen? Bei Texten ist das etwas anders da die ja immer unterschiedlich hoch sein könnten.. Hast du vielleicht ein Link zu dem System?

Ich werde es heute aber auch nochmal mit Texten ausprobieren.

Hallo jared,

ich poste den Screenshot gleich hier.

Live-Test dieser Einstellungen:
http://www.think-contao.de/slideitmoo.html

Sprich: Muss ich bei Texten eine CSS-Klasse vergeben und Breite und Höhe via CSS zusätzlich definieren?

Hallo planepix,

also im Grunde ist es eigentlich schon fast fertig.
Das Script nimmt standardmäßig immer die Klasse ".block" weil diese einfach jedem Inhaltselement in Contao zugeordnet wird.

Und auch die Höhe und Breite musst du nicht definieren weil die schon via JS gesetzt werden. Das floating übernimmt die CSS-Datei die mitgeliefert wird.

Dein Fehler ist nur das padding das du allen Textelementen in deiner Seite zugewiesen hast:

Code:

---

#main .ce_text.block {
    background-color: #F8F6F5;
    color: #000000;
    font-family: georgia,arial,sans-serif;
    font-size: 1.3em;
    line-height: 1.6em;
    margin: 0;
    padding: 0 245px 20px 80px;
}

---

Wenn ich das padding im Firebug deaktiviere sieht es gut aus :)

Hallo jared,

oh Mann :)

Danke für den Hint :eek:
Genau zu dem Test hab ich natürlich kein extra Seitenlayout angelegt gehabt...

super erweiterung!
@planepix: hmmm, im IE8 seh ich auf deiner demoseite noch immer alle inhaltselemente verschachtelt… woran kann das liegen?

Im IE schein die Erweiterung noch Bugs zu haben, habe im IE8 auch Darstellungsprobleme. Und IE7 sowie IE8 geben beim Seitenaufruf Skriptfehler aus.

Das stimmt so nicht.
Wir haben die Erweiterung in 3 Seiten eingesetzt und haben keinerlei Probleme mit dem Internet Explorer.

Zitat:

---

Zitat von wernergraser

super erweiterung!
@planepix: hmmm, im IE8 seh ich auf deiner demoseite noch immer alle inhaltselemente verschachtelt… woran kann das liegen?

---

Vielleicht weil planepix die CSS noch nicht gefixt hat?
Die Verschachtelung der Inhaltselemente ist in jedem Browser so, das ist kein spezifisches Problem des IE.

Genau ;)

bzw. nicht gelöscht habe...

Ich hab eine neue Version der Extension hochgeladen. Damit sollten auch fehlerhafte User-Konfigurationen im JS abgefangen werden.

Scriptfehler sollten jetzt zumindest nicht mehr auftauchen.

Guten Morgähn jared,
hab deine Extension bei meinen Projekt implementiert, funktioniert super!
Nix da mehr Scriptfehler und auch keine verschachtelte Darstellung im IE!
Danke.

hallo jared!
ich versuchs mit deiner Extension!
leider bekomm ichs mit der Darstellung nicht ganz so hin wie ich es möchte.

hier seht ihr meine testversuche: http://temp.fabride.com
ich hätte gerne die Pfeile überm Bild - wie mach ich das??
in der css sind sie as background-image eingebunden - was brauch ich da stattdessen?
außerdem ist das ganze nach rechts gerutscht - firebug sagt mir da eine CSS-Einstellung: element.style ( width: 935px; ) - woher kommt die? (dies wird nicht angezeigt)

hab noch eine Frage an deine Extension - ist es möglich statt nur ein bild - ein bild + text einzubinden (dh - du siehst in meinem beispiel text über dem foto - würde das lieber statt im bild eingebunden extra machen)

danke
lg
karo

Hallo,

viele Fragen aufeinmal ;)
Ich versuche mal eins nach dem anderen abzuarbeiten.

1. Das die Navigation nicht über dem Bild liegt, scheint ein CSS-Fehler zu sein. Ich werde die CSS-Datei im ER gleich mal aktualisieren, bitte ziehe dir dann das Update. Dann sollte das Problem schonmal erledigt sein.

2. Aber natürlich kannst du Text und Bild getrennt einbinden. Entweder als Text und zusätzlich schaltest du ein Bild dazu oder 2 getrennt voneinander funktionierende Elemente. Leider sind unsere derzeitigen Arbeiten mit der Extension noch nicht online, weswegen ich dir da noch kein Live-Beispiel zeigen kann.

3. Die 935px sind in der Tat ungewöhnlich. Kannst du deinem nächsten Beitrag einen Screenshot deiner slideItMoo Konfiguration im Backend beilegen?

lg

Hallo Jared!

Danke für deine Antworten.

Ich habe einen Screenshot von den EInstellungen angehängt.

1. die pfeile liegen jetzt über den fotos - perfekt danke!

2. hab ich nicht ganz verstanden - was du geschrieben hast - dh das gibt es so noch nicht?

3. so komisch reingerückt wegen der element-style-breite ist es immer noch
(http://temp.fabride.com/)
Ich habe einen Screenshot von den EInstellungen angehängt.

4. noch eine frage :o
ich hab jetzt um die Pfeile auf einen andere Position zu setzten in die Orignal-CSS-Datei eingegriffen - was natürlich nicht der beste weg ist, denn bei jedem update gehen die änderungen dann verloren. Jedoch hab ich es nicht geschafft mit der optionalen CSS-Klasse daran zu basteln.
Ich habe den Code in eine neue CSS-Datei kopiert - meinen CSS-Klasse jeweils davorgesetzt und Änderungen gemacht. (habe aber dabei bei den EInstellungen das TEmplate so belassen wie es jetzt auch im screenshot ist)
ich glaub das problem liegt an der ersten definition (denn ich bekomme die bilder aus der slideshow übereinander angezeigt)

HTML-Code:

---

@media screen,
projection
{
        position:relative;
        display:block;
        margin:0 auto;
        padding:0 0px;
}

---

> bin mir nicht sicher wo ich hier meine klasse hinzufügen muss (davor setzten hat nicht funktioniert)

edit 4. >> hab das gefühl dass die Klasse die man angeben kann gar nicht genommen wird (also einfach ignoriert wird!) übrigens passiert 3. nicht mehr wenn ich eine klasse eingebe!!



DANKESCHÖN!! schönen Tag
liebe grüße
karo

2. das ist möglich und setze ich schon in 3-4 projekten ein.

3. daraus kann ich mir zurzeit leider keinen reim machen, ich schreib dir diesbezüglich gleich mal ne PN

4. bitte niemals die originale css-datei bearbeiten. du kannst die befehle einfach in deiner eigenen css-datei überschreiben. wenn das nicht klappt, versucht es mal mit important

Code:

---

.deine_klasse
{
        background-color:red !important;
}

---

Der Slider ist schon sehr einfach aufgebaut, aber für Veränderungen des Scripts benötigt man rudimentäre Kenntnisse in CSS. Sind diese wirklich vorhanden?

Zitat:

---

Zitat von karo

edit 4. >> hab das gefühl dass die Klasse die man angeben kann gar nicht genommen wird (also einfach ignoriert wird!) übrigens passiert 3. nicht mehr wenn ich eine klasse eingebe!!

---

Die optionale Klasse die man eingeben kann ist nicht für die CSS gedacht sondern für das Script selber. Ich rate dir sie bitte leer zu lassen, dann wird der Slider auch immer funktionieren.

danke jared für deine Bemühungen

leider komm ich bei der Darstellung mit CSS gar nicht weiter.
ansich kapier ich CSS schon .. und wenn ich auf deien orginaldatei eingreife kann ich es auch so ändern wie ich es will...
jedoch wenn ich es nun in einem stylesheet versuche gehts leider gar nicht
ich habe beim Modul "SlideItMoo Start" unten die Möglichkeit eine KLasse bzw. ID einzugeben.
Wenn ich eine neue Klasse eingebe (und noch keine sylesheet definitionen habe) - gehen die Pfeile die angezeigt werden einfach verloren. - sollte doch nicht sein oder? sollte doch das "vorhandene" nehmen??
wenn ich keine ID eingebe kann ich auch nicht mit !important irgendetwas überschreiben - es wird alles ignoriert...

hat jemand eine Slideshow - die er mit einem stylesheet bearbeitet hat und könnte mir mal den LInk schicken damit ich mir das ansehen??

Danke
lg

Wie bereits geschrieben ist die optionale Klasse NICHT dafür da irgendwelche CSS Eigenschaften zu überschreiben. Lasse dieses Feld bitte leer solange du nicht 100% weißt was du tust.

Ein Beispiel wo ich slideItMoo verwendet habe und wo die Pfeile ausgetauscht wurden findest du z.B. auf dieser Seite.

PS: Folgender Code führt auf der oben verlinkten Seite zur Änderung der Pfeile:

Code:

---

  .js-slider .slider .fwd,
  .js-slider .slider .bk {
        background:url(../images/arrow.png) no-repeat;
        height:28px;
        width:25px;
  }
 
  .js-slider .slider .bk {
        background-position:left top;
  }
 
  .js-slider .slider .fwd {
        background-position:right top;
  }

---

Verwende bitte genau diese Klassen, dann muss es funktionieren. Ansonsten liegt das Problem nicht mehr am Script ;)

Vielen vielen Dank für einen Support!!!
hab das jetzt soweit hinbekommen (war wohl zu müde gestern - hab das ganz einfache übersehen)
auch das mit der Breite (schuld daran war im .slide_inner: margin: 0 auto - das auto)

jetzt hab ich noch das problem mit dem überereinander legen von Text und Bild.
gar nicht so leicht ... denn
sobald ich die Schrift mit absolute positioniere sind ALLE Texte die irgendwie in der slide vorkommen übereinander sichtbar und werden auch nicht mehr als Element erkannt (dh ich brauch dann 1sichtbares element und 1es verschieben) > ahja und die bilder obwohl sie nur 1x vorkommen sollten werden 2x angezeigt
(zu sehen derzeit auf temp.fabride.com)

wenn ich beide mit relative positioniere sind sie nebeneinander (bei 2elementen sichtbar) - klar.

mit dem absolute müsst i scho richtig liegen - also bei "normalen" dingen - jedenfalls ist dies bei der Slideshow ein problem - hast du eine Idee wie ich das umgehen kann?
Ich könnte die Bilder natürlich als Hintergrundgrafiken einbauen würde es aber lieber so direkt schaffen (va auch weil die Fotos dann auch als Links funktionieren sollen)

übrigens gilt Überschrift nicht als Element bei "Sichtbaren Elementen" und "zu verschiebenden Elementen" - da hab i a a weile gebraucht um das rauszufinden - habs jetzt als text und wird so erkannt.

schönen Tag
danke!

hi jared,
hätt auch noch eine frage zum slider: ist es möglich/vorgesehen mit einem inserttag wie z.b.: *snipp* {{link_url::ID}}?slideTo=Elementnummer *snapp* möglich?
lgw