Hallo Zusammen,
ich habe gerade ein paar kleine Probleme wo ich nicht genau weiss was da falsch laeuft.
Ich wuerde gerne Fancybox (inline) und darin easySlider einbinden. Problem dabei ist nur, dass wenn sich die fancybox oeffnet, die Images nicht sliden sondern untereinander stehen
Hier mal ein Link zu einem simplen Aufbau: http://www.naggison.de/forum/forum.html
HTML
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#slider").easySlider({
auto: true,
continuous: true
});
/*
* Examples - images
*/
$("a#example1").fancybox();
$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
$("a#example5").fancybox();
$("a#example6").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});
$("a#example7").fancybox({
'titlePosition' : 'inside'
});
$("a#example8").fancybox({
'titlePosition' : 'over'
});
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
/*
* Examples - various
*/
$("a.various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none',
'overlayOpacity' : 0.9
});
$("#various2").fancybox();
$(".various3").fancybox({
'width' : '100%',
'height' : '100%',
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="sliderimg/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="sliderimg/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="sliderimg/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="sliderimg/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="sliderimg/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>Kann mir da mal wer sagen wo ich den Fehler gemacht habe? Ich schau da nun schon 2 Stunden rund drueber!
Vielen Dank und beste grueße
