Anzeige

probleme mit jquery

probleme mit jquery | PSD-Tutorials.de

Erstellt von susiH, 08.03.2011.

  1. susiH

    susiH Aktives Mitglied

    Dabei seit:
    04.12.2008
    Beiträge:
    267
    Geschlecht:
    weiblich
    probleme mit jquery
    hi,
    ich möchte auf meiner startseite eine jquery slideshow einbinden. das problem ist aber, das nur ein smaler streifen des bildes angezeigt wird und auch nur ein einziges bild, obwohl mehrere bilder eingebunden sind. außerdem sollen die bilder in der höhe immer bildschirmfüllend sein, aber die werden immer zu groß angezeigt.

    hier mal der html code
    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4.  
    5. <link rel="stylesheet" type="text/css" href="style.css">
    6.  
    7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    8. <title>artdreamers</title>
    9.  
    10. <!-- slider -->
    11. <script type="text/javascript" src="js/jquery.js"></script>
    12.     <script type="text/javascript" src="js/easySlider1.7.js"></script>
    13.     <script type="text/javascript">
    14.         $(document).ready(function(){    
    15.             $("#slider").easySlider({
    16.                 auto: true,
    17.                 continuous: true  
    18.     });            
    19. });
    20.     </script>
    21. <!-- ende slider -->
    22. <link href='http://fonts.googleapis.com/css?family=Puritan:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
    23. </head>
    24.  
    25. <div id="container">
    26. <div id="content">
    27. <div id="slider">
    28. <ul>
    29. <li><img src="bilder/7.jpg" /></li>
    30. <li><img src="bilder/8.jpg" /></li>
    31. <li><img src="bilder/9.jpg" /></li>
    32. <li><img src="bilder/10.jpg" /></li>
    33. </ul>
    34. </div><!-- slider -->
    35. </div> <!-- content -->
    36. </div> <!-- container -->
    37.  
    38.  
    39. <div id="menu">
    40.     <div id="slidemenu">
    41.             <div class="titel"><a href="#">shootings</a></div>
    42.                 <div class="links"><a href="#">name</a></div>
    43.                 <div class="links"><a href="#">name</a></div>
    44.                 <div class="links"><a href="#">name</a></div>
    45.                 <div class="links"><a href="#">name</a></div>
    46.                 <div class="links"><a href="#">name</a></div>
    47.                 <div class="links"><a href="#">name</a></div>
    48.                 <div class="links"><a href="#">name</a></div>
    49.             <div class="titel"><a href="#">grafikdesign</a></div>
    50.                 <div class="links"><a href="#">name</a></div>
    51.                 <div class="links"><a href="#">name</a></div>
    52.                 <div class="links"><a href="#">name</a></div>
    53.                 <div class="links"><a href="#">name</a></div>
    54.                 <div class="links"><a href="#">name</a></div>
    55.                 <div class="links"><a href="#">name</a></div>
    56.                 <div class="links"><a href="#">name</a></div>
    57.     </div>
    58. </div>
    59.  
    60.  
    61.  
    62.  
    63. </body>
    64. </html>
    65.  
    66.  
    und die css
    HTML:
    1.  
    2. html, body
    3.     {
    4.     font-family: 'Puritan', arial, serif;
    5.     width:100%;
    6.     height:100%;
    7.     background-color:#ffffff;
    8.     margin: 0;
    9.     padding: 0;
    10.     overflow: hidden;
    11.     }
    12. img
    13.     {
    14.     border:0;
    15.     }
    16.    
    17. #menu
    18.     {
    19.     position:fixed;
    20.     top:250px;
    21.     padding:25px;    
    22.     width:100px;
    23.     height:auto;
    24.     background-color:#FFF;
    25.     opacity:.7;
    26.     z-index:100;
    27.     }
    28.    
    29. #slidemenu
    30.     {
    31.     color:#333;    
    32.     }
    33.    
    34. .links
    35.     {
    36.     margin-left:25px;
    37.     font-size:14px;
    38.     line-height:1.5;
    39.     }
    40.    
    41. .links a:link    
    42.     {
    43.     color:#333;
    44.     text-decoration:none;
    45.     }
    46.  
    47. .links a:active    
    48.     {
    49.     color:#33cc33;
    50.     text-decoration:none;
    51.     }
    52.  
    53. .links a:hover    
    54.     {
    55.     color:#33cc33;
    56.     text-decoration:none;
    57.     }
    58.  
    59. .links a:visited    
    60.     {
    61.     color:#333;
    62.     text-decoration:none;
    63.     }
    64.    
    65. .titel
    66.     {
    67.     margin-top:10px;
    68.     }
    69.    
    70. .titel a:link    
    71.     {
    72.     color:#333;
    73.     text-decoration:none;
    74.     }
    75.  
    76. .titel a:active    
    77.     {
    78.     color:#33cc33;
    79.     text-decoration:none;
    80.     }
    81.  
    82. .titel a:hover    
    83.     {
    84.     color:#33cc33;
    85.     text-decoration:none;
    86.     }
    87.  
    88. .titel a:visited    
    89.     {
    90.     color:#333;
    91.     text-decoration:none;
    92.     }
    93.    
    94.        
    95. #container
    96.     {    
    97.     width:100%;
    98.     height:100%;
    99.     margin: 0;
    100.     padding: 0;
    101.     position:relative;
    102.     text-align:left;
    103.     background:#fff;
    104.     z-index:1;        
    105.     }    
    106.    
    107. #content    
    108.     {
    109.     z-index:2;
    110.     }
    111.    
    112. #slider ul, #slider li,
    113.     {
    114.     margin: 0;
    115.     padding: 0;
    116.     list-style:none;
    117.     z-index:3;        
    118.     }
    119.    
    120. #slider li
    121.     {
    122.        width:100%;
    123.     height:100%;
    124.     margin: 0;
    125.     padding: 0;
    126.     overflow:hidden;
    127.     z-index:4;        
    128.     }    
    129.    
    130. #prevBtn,
    131.     {
    132.     display:block;
    133.     vertical-align:middle;
    134.     position:absolute;
    135.     left:50px;
    136.     z-index:1000;
    137.     }    
    138.  
    139. #nextBtn
    140.     {
    141.     display:block;
    142.     position:absolute;
    143.     right:50px;
    144.     vertical-align:middle;
    145.     z-index:1000;
    146.     }    
    147.    
    148.  
    149.  
    danke schon mal für eure mühe
     
    #1      
  2. rockscientist01

    rockscientist01 Nicht mehr ganz neu hier

    Dabei seit:
    10.08.2008
    Beiträge:
    232
    Geschlecht:
    männlich
    probleme mit jquery
    AW: probleme mit jquery

    ich hab auch den easySlider 1.7 auf einer site von mir, vielleicht hilft Dir der quelltext weiter
    elite music
    wenn du einen link zu deiner site postest, kann ich da auch mal schauen.

    Gruß
    AO
     
    #2      
  3. susiH

    susiH Aktives Mitglied

    Dabei seit:
    04.12.2008
    Beiträge:
    267
    Geschlecht:
    weiblich
    probleme mit jquery
    AW: probleme mit jquery

    oh sorry, das hab ich ganz vergessen...

    artdreamers
     
    #3      
  4. michas

    michas Nicht mehr ganz neu hier

    Dabei seit:
    27.03.2007
    Beiträge:
    199
    Geschlecht:
    männlich
    Ort:
    Halle
    Software:
    GIMP, PDT Eclipse, Inkscape
    probleme mit jquery
    AW: probleme mit jquery

    Du verwendest jQuery 1.2.3 als Version.

    Bitte aktualisiere mal auf eine neuere :)

    Desweiteren musste Du meines Wissens nach das slow in Hochkommas setzten. Es sei denn, Du hast es irgendwo als Variable definiert.
    Code (Text):
    1.  
    2. $('#slidemenu').animate({width:'toggle'},'slow');
    3.  
    Und noch was: Das Blockelement "div" ist nicht zulässig innerhalb von "ul" oder "ol".

    Versuche es doch mal eher so
    Code (Text):
    1.  
    2. <div id="container">
    3. <div id="content">
    4. <div id="slider">
    5. <ul>
    6. <li><img src="bilder/7.jpg" /></li>
    7. <li><img src="bilder/8.jpg" /></li>
    8. <li><img src="bilder/9.jpg" /></li>
    9. <li><img src="bilder/10.jpg" /></li>
    10. </ul>
    11.  
    12. </div><!-- slider -->
    13. </div> <!-- content -->
    14. </div> <!-- container -->
    15.  
    16.  
    Gruß
     
    Zuletzt bearbeitet: 09.03.2011
    #4      
  5. susiH

    susiH Aktives Mitglied

    Dabei seit:
    04.12.2008
    Beiträge:
    267
    Geschlecht:
    weiblich
    probleme mit jquery
    AW: probleme mit jquery

    ähm, ich hab doch garkein slidemenu drin...
    der slider für die bilder ist eiegtnlich der hier
    HTML:
    1.  
    2. <!-- slider -->
    3. <script type="text/javascript" src="js/jquery.js"></script>
    4.     <script type="text/javascript" src="js/easySlider1.7.js"></script>
    5.     <script type="text/javascript">
    6.         $(document).ready(function(){    
    7.             $("#slider").easySlider({
    8.                 auto: true,
    9.                 continuous: true  
    10.     });            
    11. });
    12.     </script>
    13. <!-- ende slider -->
    14.  

    das slidemenu soll mal das menu auf der linken seite werden. das habe ich bisher nur schon mal angelegt.
     
    #5      
  6. michas

    michas Nicht mehr ganz neu hier

    Dabei seit:
    27.03.2007
    Beiträge:
    199
    Geschlecht:
    männlich
    Ort:
    Halle
    Software:
    GIMP, PDT Eclipse, Inkscape
    probleme mit jquery
    AW: probleme mit jquery

    Ja, kann sein, dass es noch nicht drin ist, der Fehler ist es aber. :)

    Nun zu Deinem Slider-Problem.
    Wenn Du Deine Listen Elemente aus 100% breite per CSS stylest, dann nehmen Sie natürlich die Gesamtbreite des Elternelementes an. Wie sollen die da noch sliden können?

    Entferne mal die Eigenschaft width : 100% aus Deiner Style.css Datei.

    Gruß Micha
     
    #6      
  7. susiH

    susiH Aktives Mitglied

    Dabei seit:
    04.12.2008
    Beiträge:
    267
    Geschlecht:
    weiblich
    probleme mit jquery
    #7      
  8. michas

    michas Nicht mehr ganz neu hier

    Dabei seit:
    27.03.2007
    Beiträge:
    199
    Geschlecht:
    männlich
    Ort:
    Halle
    Software:
    GIMP, PDT Eclipse, Inkscape
    probleme mit jquery
    AW: probleme mit jquery

    nun hast Du aber alle Bilder in einem <li></li> tag... das kann es nicht sein :)
     
    #8      
  9. susiH

    susiH Aktives Mitglied

    Dabei seit:
    04.12.2008
    Beiträge:
    267
    Geschlecht:
    weiblich
    probleme mit jquery
    AW: probleme mit jquery

    und diese schusselfehler sind es, die es alles kaputt machen :(
    weißt du vielleicht auch, wie ich es hinkriege, dass die bilder immer auf bildschirmhöhe angepasst werden?? und immer nur ein bild auf dem bildschritm zu sehen ist??
     
    #9      
  10. michas

    michas Nicht mehr ganz neu hier

    Dabei seit:
    27.03.2007
    Beiträge:
    199
    Geschlecht:
    männlich
    Ort:
    Halle
    Software:
    GIMP, PDT Eclipse, Inkscape
    probleme mit jquery
    AW: probleme mit jquery

    Leider habe ich diese Woche keine Zeit mehr, mir das anzuschauen.

    Wenn ich nächste Woche ein paar freie Minuten finde, kann ich Dir sicher eine Lösung nennen. Allerdings solltest Du bei der Aufgabenstellung eher auf ein fixes Seiten-Layout setzten. Sonst wirds ngleich komplizierter.

    Gruß Micha
     
    #10      
  11. michas

    michas Nicht mehr ganz neu hier

    Dabei seit:
    27.03.2007
    Beiträge:
    199
    Geschlecht:
    männlich
    Ort:
    Halle
    Software:
    GIMP, PDT Eclipse, Inkscape
    probleme mit jquery
    AW: probleme mit jquery

    Also ich habe es mir noch einmal angesehen.
    Folgendes:
    1. bei dem letzten Link ist immer noch nur ein <li> tag um alle Bilder
    2. Anpassung der Bilder an den Bildschirm geht bei fließenden Layout eigentlich nicht schön. (Da jeder Bildschirm anderen Größen / Seitenverhältnisse hat) ich bspw. sitze an einem 24Zoll Bildschirm. Da müssten die Bilder schon verdammt groß sein, damit nur "nur ein bild auf dem bildschritm zu sehen ist".

    Ergo: Definiere ein fixes Layout (oder einen fixen Bereich) in dem die Slideshow stattfinden soll. Anschließend kann ich Dir da helfen.

    Gruß Micha
     
    #11      
x
×
×