[pk_noobslide] Sidebuttons (img) neben Content positionieren

Ein "Hallo" in die Runde.

Ich setze bei mir lokal pk_nooblslide ein, was ich dafür nutze, um Content durchsliden zu lassen, herkömmliche Verwendung also. Mein (selbstgeschaffenes) Problem ist nun, dass ich gerne die SideButtons (prev, next; Ausgabe: Zurück | Vorwärts) neben dem Content links und rechts entsprechend positionieren möchte. Außerdem soll die Textausgabe von Zurück und Vorwärts durch zwei versch. Bilder mit Pfeil nach links und rechts ersetzt werden.
Ursprünglich sind diese ja im Template ce_noobslide_stop.tpl verankert durch:

Code:

---

 
<?php if($this->SideButtons): ?>
  <p class="buttons">         
              <span id="prev<?php echo $this->noobHandlesId; ?>"><?php echo $this->previous; ?></span> | <span id="next<?php echo $this->noobHandlesId; ?>"><?php echo $this->next; ?></span>
  </p>
<?php endif; ?>

---

Trenne ich das ganze nun in zwei if-Abfragen, tausche die echo's gegen die zugehörigen img-Tags und positioniere sie jeweils vor und hinter den noobWrapper oder -container, so hat der Pfeil mit der id #prevID die falsche Funktion, slidet die Bilder also vor statt zurück und der Pfeil mit #nextID wird gar nicht angezeigt, bzw. nur ab und an beim Sliden des Bildes durch Autoplay.

Ich bin verwirrt. Kann mir jemand helfen und mir sagen, wie sich dies bewerkstelligen ließe?

Beste Grüße
Alex

Zitat:

---

tausche die echo's gegen die zugehörigen img-Tags

---

Da liegt der Fehler.
Versuche nicht die Buttons durch Bilder zu ersetzen.
Gib ihnen eine feste größe und ein Hintergrundbild und display: block;
dann gib ihnen noch text-indent: -9999px; um den text zu verstecken.

Dann nurnoch per css positionieren oder den kompletten part im template.

Das ganze hat den vorteil das der Text immernoch für Screenreader da ist, und du deine schönen Bildchen hast un du keine Bilder fix in der Code schreiben musst.

Hi psren,

danke für deine Antwort!
Ich habe das ganze nun so umgebaut, wie von dir beschrieben. Mein Problem ist nun nur, dass ich die Buttons ja trennen muss, damit links ein Bild (als Hintergrund nun) und rechts ein Bild neben dem Content angezeigt wird. Heißt, ich habe einmal das vor #noobContainer eingefügt:

Code:

---

<?php if($this->SideButtons): ?> 
              <div id="prev<?php echo $this->noobHandlesId; ?>"><?php echo $this->previous; ?></div>
<?php endif; ?>

---

Und dementsprechend das nach #noobContainer:

Code:

---

 
<?php if($this->SideButtons): ?> 
              <span id="next<?php echo $this->noobHandlesId; ?>"><?php echo $this->next; ?></span>
<?php endif; ?>

---

Doch klicke ich nun auf die Ausgabe von previous (also das Hintergrundbild) geht er nach vorne und nach hinten, das ist ärgerlich. Gleich gilt auch für die next-Ausgabe.

Irgendeine Idee, woran das liegen könnte?

Beste Grüße
Alex


EDIT: Ok, ich nehme alles zurück! Es war ein beschämender Fehler meinerseits. Ich hatte lediglich 2 Elemente eingebunden, weshalb natürlich das ganze ein Kreis war... :-).
Besten Dank, psren!

Ich melde mich hier nochmal zu Wort, da ich leider ein weiteres Problem habe.
Psren's Lösung hat super geklappt, die Buttons sitzen da, wo sie hin sollen, neben dem Content. Links neben dem Content sitzt #prevID und rechts neben dem Content #nextID.Mein Problem ist nun aber, dass #nextID nicht anklickbar ist. Nur 1 Pixel breit ist das Feld, das man anklicken kann, der Rest ist zwar sichtbar aber anscheinend nicht zu klicken.

CSS von #prevID:

Code:

---

#prevID {
    background: url("tl_files/arrow_prev.png") no-repeat scroll left top transparent;
    cursor: pointer;
    display: block;
    float: left;
    height: 40px;
    margin-top: 120px;
    width: 22px;
}

---

CSS von #nextID

Code:

---

#nextID {
    background: url("tl_files/arrow_next.png") no-repeat scroll left top transparent;
    cursor: pointer;
    display: block;
    float: right;
    height: 40px;
    margin-top: 120px;
    width: 22px;
}

---

Erhöhe ich nun width bei #nextID auf z.B. 25, so ist etwas mehr an "anklickbarem Bereich" verfügbar, geht aber nur bis 28, danach rutscht er unter den #noobWrapper.

Jemand eine Idee? Link gibt es leider keinen, da, wie gesagt lokal.

Beste Grüße
Alex

Genau das ist auch mein Problem. Bei allen Content- oder Imageslidern kann man mit CSS die Steuerungsbuttons Vor und Zurück (Next und Prev) wunderbar formatieren. Man setzt sie auf display:block, text-ident:-5000px und gibt ihn ein Hintergrundbild per background... mit.

Leider funktioniert das im pk_noobslide nicht. Sobald man dies durchführt, sind zwar die beiden Vor- und Zurückbuttons optisch wie man sie haben will, aber funktionieren dann nicht mehr. Man kann sich dann totklicken die Funktion next bzw. prev wird nicht mehr ausgeführt.

Vielleicht sollte sich der Entwickler hier nochmal Gedanken machen, denn dies ist für das Layout essentiell.

https://github.com/kaipk/contao-pk_noobSlide/issues/11