Ergebnis 1 bis 7 von 7

Thema: jquery - fancybox und easySlider

  1. #1
    Teeny
    Registriert seit
    25.08.2010
    Beiträge
    33
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage 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

    Hier mal ein Link zu einem simplen Aufbau: http://www.naggison.de/forum/forum.html

    HTML-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 ? ' &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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von naggison (27.03.2011 um 18:43 Uhr)

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: jquery - fancybox und easySlider

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    25.08.2010
    Beiträge
    33
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: jquery - fancybox und easySlider

    Zitat Zitat von synaptic Beitrag anzeigen
    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.

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: jquery - fancybox und easySlider

    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.
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    25.08.2010
    Beiträge
    33
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: jquery - fancybox und easySlider

    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!

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: jquery - fancybox und easySlider

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    25.08.2010
    Beiträge
    33
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: jquery - fancybox und easySlider

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

    Besten Dank nochmal!

Ähnliche Themen

  1. jQuery Plugin?
    Von #matthias im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 19.07.2010, 21:37
  2. wordpress jquery
    Von baadshah im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 09.03.2010, 20:23
  3. jQuery Menü
    Von Tobse im Forum Script-Archiv
    Antworten: 0
    Letzter Beitrag: 03.01.2010, 13:21
  4. [JS] jQuery und .submit() !?
    Von Thonixx im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 25.12.2009, 21:03
  5. JQuery-prob
    Von synaptic im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 12
    Letzter Beitrag: 18.04.2008, 20:51

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •