jquery - fancybox und easySlider

naggison

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 ? ' &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>

Alles anzeigen

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

synaptic

also was mir direkt auffällt, ist dass du nen div mit breite und höhe 0 hast und dich wunderst, wieso du nichts darin sehen kannst.
die li-elemente floaten left, was gut is, aber das ul-element muss eben etwas breiter sein, als alle li-elemente zusammen mit abständen sind

naggison

Zitat von synaptic

also was mir direkt auffällt, ist dass du nen div mit breite und höhe 0 hast und dich wunderst, wieso du nichts darin sehen kannst.
die li-elemente floaten left, was gut is, aber das ul-element muss eben etwas breiter sein, als alle li-elemente zusammen mit abständen sind

Vielen Dank fuer die Antwort...

Ja, das ist richtig, daran liegt es aber nicht! Das ist der Grund warum ich die Sachen nicht direkt sehe!
Was aber Fakt ist ist, dass selbst wenn alles sichtbar ist der Images nicht die Funktion aufweist die sie sollte. :-/
Genau das ist der Fehler den ich nicht behoben bekomme.

synaptic

also in der kleinen navi tut sich ja was..
evtl liegt die problematik auch am fehlenden doctype. ohne den keine richtige darstellung des boxmodells und ohne des boxmodell haste auch keine anständige animation.

naggison

leider auch nicht :-/
Ich vermute ja ein Problem mit der Fancybox... bzw das da irgendwo was mit den listen settings nicht stimmt?!
Also ich bin echt ratlos!

synaptic

hab grad n bissi getestet.
naja einarmiges testen halt..^^

wenn der container mit display:none, nen display:block bekommt, funzt beides.

ich glaub du solltest den container in ne externe datei auslagern, mit nem ajax-request den kram in die fancy-box laden (da musste ma die doku durchforsten, wie man ins öffnen der fanybox nen callback einbauen kann.
die reihenfolge wäre dann:
öffnen,
als callback den ajax-request
als callback vom ajax das initialisieren des sliders

naggison

Genialer Tipp, besten dank! So klappt es prima!
Jetzt nur noch mit PHP verknuepfen

Besten Dank nochmal!

Tags