jquery - fancybox und easySlider

[ngi]

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.

<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 ? '  &nbsp; ' + 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

 

[mermshaus]

Willkommen im Forum.

So als Tipp: Wenn das jemand testen wollte, müsste er sicher erstmal eine halbe Stunde Vorarbeit leisten, um JavaScripts zu suchen/einzubinden und Grafiken zu erstellen.

Außerdem sehe ich die HTML-Elemente, die in den jQuery-Selektoren angesprochen werden, überhaupt nicht im Code.

 

[ngi]

Willkommen im Forum.

So als Tipp: Wenn das jemand testen wollte, müsste er sicher erstmal eine halbe Stunde Vorarbeit leisten, um JavaScripts zu suchen/einzubinden und Grafiken zu erstellen.

Außerdem sehe die HTML-Elemente, die in den jQuery-Selektoren angesprochen werden, überhaupt nicht im Code.

Korrekt, war ein wenig zu schnell :mrgreen:

Test

Da mal ein link mit einem simplen aufbau!

Vielen Dank und beste Grueße