CarouFredSel - Navi umbauen

Hello,

ich versuche gerade das CarouFredSel ce_caroufredsel.html5 zu vergewaltigen, damit die Thumbnail-Navigation left & right so funktioniert wie in diesem Beispiel: Anhang 11311

Meine Navigation sieht aktuell so aus: Anhang 11313

Mir ist dabei allerdings aufgefallen, dass ich dann die Thumbnails garnicht mehr einzeln anklicken kann, weil ja der Bereich für meine Thumbnail-Navigation (grün markiert im Bild) vollständig den Thumbnail-Wrapper überdeckt.

Hier der Teil der ce_caroufredsel.html5, die ich versucht habe anzupassen.

HTML-Code:

---

<?php if ($this->type != "caroufredsel_stop"): ?>
<div class="<?php echo $this->class; ?> <?php if ($this->type == 'caroufredsel_start') echo 'ce_caroufredsel '; ?>block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<a class="caroufredsel_thumbnails_prev" id="caroufredsel_thumbnails_prev_<?php echo $this->id; ?>" href="#"><span><?php echo $GLOBALS['TL_LANG']['DK_CFS']['previous']; ?></span></a>
<?php if ($this->useThumbnails && ($this->thumbnailsPosition == 'top' || $this->thumbnailsPosition == 'left')): ?>
<div class="caroufredsel_thumbnails_skin" id="caroufredsel_thumbnails_skin_<?php echo $this->id; ?>">
<div class="caroufredsel_thumbnails" id="caroufredsel_thumbnails_<?php echo $this->id; ?>">
<?php echo $this->thumbnails; ?>
</div>
<div class="clearfix"></div>
<div class="caroufredsel_thumbnails_controls" id="caroufredsel_thumbnails_controls_<?php echo $this->id; ?>">
<div class="caroufredsel_thumbnails_navi" id="caroufredsel_thumbnails_navi_<?php echo $this->id; ?>">

<a class="caroufredsel_thumbnails_next" id="caroufredsel_thumbnails_next_<?php echo $this->id; ?>" href="#"><span><?php echo $GLOBALS['TL_LANG']['DK_CFS']['next']; ?></span></a>
</div>
</div>
</div>
<?php endif; ?>

---

Da ich hier aber einfach den <a> Link "caroufredsel_thumbnails_prev"aus dem Control <div> genommen habe und irgendwo wieder reingesetzt habe, geht mir die Funktionalität des Link "prev"-Links verloren.

Wie muss ich denn das ce_caroufredsel.html5 anpassen, damit ich die Thumnail-Navi Links und rechts haben kann wie im 2. Carousel in den Beispielen: http://caroufredsel.dev7studios.com/ ?

Hallo hallo,

um dir genau sagen zu können was du dazu tun mußt, müßte ich das bei mir nachbauen. Dazu habe ich aber keine Muse, weswegen ich nur ein paar Tips geben kann. ;)

Vom Prinzip her kannst du die Struktur aufbauen wie du möchtest. Wichtig ist nur, daß sie mit dem JS-Template zusammen paßt. Wenn du dir das anschaust siehst du dort an einigen Stellen wo ich explizit IDs aus dem HTML-Template anspreche. Wichtig hier sind dabei "#caroufredsel_ID" und "#caroufredsel_thumbnails_ID". Auf diesen wird der Slider erzeugt. Jegliche andere Struktur ist nur "Beiwerk", um mit CSS formatieren zu können. Eine weitere wichtige Sache ist, daß es sich bei den Thumbnails um einen eigenen weiteren Slider handelt. Beide Slider werden über Events miteinander gekoppelt. Die innere Struktur der einzelnen Galerie-Elemente werden in einem anderen (nicht auswählbaren Template) generiert, von daher bleibt auch nach deiner "Vergewaltigung" diese erhalten, so daß die Thumbs an sich den Hauptslider nach wie vor steuern können sollten.

Bzgl. der Buttons verhält es sich ähnlich. Dort wird ebenfalls im JS-Template dem Slider mitgeteilt, welche HTML-Objekte zum Steuern gedacht sind. "#caroufredsel_thumbnails_prev_ID" wäre das für den Zurück-Button. Das sollte ebenfalls irgendwo liegen können. Wichtig ist wie gesagt nur, daß du im JS-Template die gleichen Elemente ansprichst wie sie im HTML-Template vorhanden sind.

Für solche Basteleien mögen die Templates etwas zu umfangreich und unübersichtlich sein. Wenn du keinen Wert auf die Einstell-Möglichkeiten legst, kannst du fast alles aus dem JS-Template rauswerfen und schreibst die Konfiguration manuell hinein.

Viele Grüße...
...Dirk

Gibt es hierzu ein Lösung? Ich hätte nämlich auch gerne die Navigation links und rechts.

äh CSS?! einfach absolut dorthin verschieben wo auch immer du es haben magst...

Danke! Klar, mit CSS kann ich die platzieren. Allerdings sind die dann nicht responsive...

doch klar sind die Responsive. Absolut positionierte Elemente in relativ positionierten Elementen behalten ihre Position im Verhältnis bei. Also Eltern-Element relativ, Navi absolut und alles wird fein. :)

Hm, danke! Das DIV-ELement leigt doch aber unter dem Slider, ich kriege das irgendwie nicht hin...

Dann weise dem absolut positionierten Bedienelement doch einen höheren z-index zu.

Ich meine nicht die Überlappung, sondern die Reihenfolge...

Ich habe bei mir die caroufredsel_navi absolut über den Slider positioniert und darin dann die caroufredsel_pref und caroufredsel_next wiederum absolut positioniert.

<Danke! Ich habe die caroufredsel_navi nun auch absolut positioniert, die caroufredsel_pref und caroufredsel_next dann relative und gefloatet.