ngi
Threadersteller
Dabei seit: 27.03.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 27.03.2011 16:37
Titel jquery - fancybox und easySlider |
  |
|
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.
| Code: |
<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
Zuletzt bearbeitet von ngi am So 27.03.2011 16:37, insgesamt 2-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
