Ich hab hier ein kleines Problem mit dem Mootools Content Slider, den ich für eine Catalog-Galerie verwenden möchte.
Ich hab die CSS und das Script soweit auf die Catalog-Ausgabe angepasst. Für das Script hab ich mir eine moo_catalog_slider.xhtml angelegt, die ich im Seitenlayout einbinde.
HTML-Code:
<div class="layout_full_work" id="item_container">
<div class="slide_item first even">...</div>
<div class="slide_item odd">...</div>
<div class="slide_item last even">...</div>
</div>
Code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function() {
//slider variables for making things easier below
var itemsHolder = $('item_container');
var myItems = $$(itemsHolder.getElements('.slide_item'));
//controls for slider
var theControls = $('slideControl');
var numNavHolder = $(theControls.getElement('ul'));
var thePlayBtn = $(theControls.getElement('.play_btn'));
var thePrevBtn = $(theControls.getElement('.prev_btn'));
var theNextBtn = $(theControls.getElement('.next_btn'));
//create instance of the slider, and start it up
var mySlider = new SL_Slider({
slideTimer: 6000,
orientation: 'none', //vertical, horizontal, or none: None will create a fading in/out transition.
fade: false, //if true will fade the outgoing slide - only used if orientation is != None
isPaused: true,
container: itemsHolder,
items: myItems,
numNavActive: true,
numNavHolder: numNavHolder,
playBtn: thePlayBtn,
prevBtn: thePrevBtn,
nextBtn: theNextBtn
});
mySlider.start();
});
//--><!]]>
</script>
Im Frontend läuft das auch alles fast so, wie es soll. Außer, dass für das aktive .slide_item die visibility nicht auf visible gesetzt wird, sondern auf hidden bleibt. Somit sehe ich auch kein Bild. Wenn ich die visibility mit !important für jedes .slide_item erzwinge, dann sehe zwar das aktive Bild, aber es liegt im Prinzip immer das letzte .slide_item über allen anderen. So das auch immer die Bild-Verlinkung vom letzten .slide_item oben liegt. Klingt kompliziert, ist aber so
HTML-Code:
<div class="slide_item first even" style="position: absolute; left: 0px; top: 0px; opacity: 1; visibility: hidden;">...</div>
<div class="slide_item odd" style="position: absolute; left: 0px; top: 0px; opacity: 0; visibility: hidden;">...</div>
<div class="slide_item last even" style="position: absolute; left: 0px; top: 0px; opacity: 0; visibility: hidden;">...</div>
Wenn mir hier jemand helfen mag, dem kann ich gern per PM einen Zugang fürs Frontend geben.
Danke
Lesezeichen