Hallo Forum,
meine Frage ist quasi die Fortsetzung dieses Threads:
http://www.magix.info/de/web-designer-10-und-wow-slider.wissen.1108157.html
Ich habe einen JSSOR-Slider in einem Platzhalter rechts oben auf der Seite platziert und links daneben eine Navigationsleiste. So sieht das aus (der Slider wird in der Enbwicklungsumgebung noch nicht angezeigt):
Wenn ich diese Seite nun aufrufe, sieht das ganze so aus:
Der Slider steht an der richtigen Stelle, aber das aktivierte MouseOver-Element (Start) der Navighationsleiste hat sich auf geheimnisvolle Art und Weise verschoben.
Offensichtlich "stört" etwas im Code des Sliders die Navigation. Aber was?
Der Effekt verändert sich übrigens je nach dem, wie beide Elemente zueinander stehen und wer vor oder hinter dem anderen steht. Es scheint aber immer die MouseOver-Ebene zu betreffen...
Hier der Code des Sliders (ich vermute die rot markierten Zeilen als Übeltäter):
<body style="background:#fff;">
<!-- it works the same with all jquery version from 1.x to 2.x -->
<script type="text/javascript" src="slider/engine/jquery-1.9.1.min.js"></script>
<!-- use jssor.slider.mini.js (40KB) or jssor.sliderc.mini.js (32KB, with caption, no slideshow) or jssor.sliders.mini.js (28KB, no caption, no slideshow) instead for release -->
<!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.js + jssor.slider.js) -->
<script type="text/javascript" src="slider/engine/jssor.js"></script>
<script type="text/javascript" src="slider/engine/jssor.slider.js"></script>
<script>
jQuery(document).ready(function ($) {
//Reference http://www.jssor.com/development/slider-with-slideshow-jquery.html
//Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html
var _SlideshowTransitions = [
//Fade
{ $Duration: 1200, $Opacity: 2 }
];
var options = {
$SlideDuration: 2000, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlayInterval: 6000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
$TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
</script>
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; width: 540px;
height: 120px;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(slider/data/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 540px; height: 120px;
overflow: hidden;">
<div>
<img u=image src="slider/data/header-1.jpg" />
</div>
<div>
<img u=image src="slider/data/header-2.jpg" />
</div>
<div>
<img u=image src="slider/data/header-3.jpg" />
</div>
<div>
<img u=image src="slider/data/header-4.jpg" />
</div>
<div>
<img u=image src="slider/data/header-5.jpg" />
</div>
<div>
<img u=image src="slider/data/header-6.jpg" />
</div>
</div>
Für einen Tipp wäre ich wirklich sehr dankbar!
Herzlichen Dank im Voraus,
Michael