Anzeige

Nur horizontal Scrollen

Nur horizontal Scrollen | PSD-Tutorials.de

Erstellt von ghost90, 14.08.2008.

  1. ghost90

    ghost90 Noch nicht viel geschrieben

    Dabei seit:
    21.06.2008
    Beiträge:
    29
    Geschlecht:
    männlich
    Nur horizontal Scrollen
    Hallo

    Ich habe einen DIV-Container
    ----------------
    | *Bild* *Bild* |
    | *Bild* *Bild *|
    -----------------

    In dem Bilder sind , aber die bis zum Ende nebeneinander gesetzt und dann geht es darunter weiter, ich möchte aber das ALLES nebeneinander angeordnet sind. Und sich dann irgendwie komfortable von links/rechts nach rechts/links scrollen lassen. Schön wärs wenns automatisch hinundher wandert.Allerdings werden die Bilder via PHP ausgelesen und sind verlinkt.Hat da einer eine Idee ?
     
    #1      
  2. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Nur horizontal Scrollen
    AW: Nur vertial Scrollen

    Na ja es gibt ein paar Javascripte, die das bewerkstelligen können...



    ansonsten:

    css
    Code (Text):
    1.  
    2. #sichtfeld {
    3. width:500px; /* Breite so, wie Anzeige sein soll */
    4. height: 408px; /* Höhe etwa 8px mehr als Bildhöhe wegen Scrollbalken */
    5. overflow:auto;
    6.  
    7. }
    8.  
    9. #bilder {
    10. width:5000px; /* Breite = Summe aller Bilder */
    11. height: 400px; /* Höhe der Bilder */
    12. overflow:hidden;
    13. }
    14.  
    15. #bilder img {
    16. width:500px; /* kann aber auch einzeln für jedes Bild gemacht werden */
    17. height: 400px; /* dito */
    18. border:0;
    19. }
    20.  

    html
    Code (Text):
    1.  
    2. <div id="sichtfeld">
    3. <div id="bilder"><img src="datei"><img src="datei"><img src="datei"><img src="datei"> ... </div>
    4. </div>
    5.  
     
    #2      
  3. ghost90

    ghost90 Noch nicht viel geschrieben

    Dabei seit:
    21.06.2008
    Beiträge:
    29
    Geschlecht:
    männlich
    Nur horizontal Scrollen
    AW: Nur vertial Scrollen

    Danke für die Antwort, hast einer zufällig so ein JS parat (schreib man das so ?)



    die ganzen bilder haben unterschiedliche längen und werden immer mehr
     
    Zuletzt bearbeitet: 14.08.2008
    #3      
  4. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Nur horizontal Scrollen
    AW: Nur vertial Scrollen

    wenn du die Bilder nebeneinander haben willst, sollte es aber horizontal zu scrollen sein,oder?
    Code (Text):
    1.  
    2. <div style="width:100%; overflow:auto">
    3.   <nobr>
    4.     <img src="bild1.jpg" />
    5.     <img src="bild2.jpg" />
    6.     <img src="bild3.jpg" />
    7.     <img src="bild4.jpg" />
    8.     <img src="bild5.jpg" />
    9.     <img src="bild6.jpg" />
    10.     <img src="bild7.jpg" />
    11.     usw...
    12.   </nobr>
    13. </div>
    14.  
     
    #4      
  5. ghost90

    ghost90 Noch nicht viel geschrieben

    Dabei seit:
    21.06.2008
    Beiträge:
    29
    Geschlecht:
    männlich
    Nur horizontal Scrollen
    AW: Nur vertial Scrollen

    horizontal mein ich ja, ich habs nur nicht mehr ändern können...

    ich hab nun eine frage:

    Code (Text):
    1.          /* * * * * * * * * * * * * * * * D I E  V A R I A B L E N * * * * * * * * * * * * * * * * * */
    2. tNews=new Array();
    3.  
    4. //°°°°°°°°°°Die News
    5. tNews.push('Neu bei <a href="http://www.tutorials.de">tutorials.de</a>...noch nen Ticker!');
    6. tNews.push('Der Ticker tickt jetzt nicht mehr,sondern rollt :o)');
    7. tNews.push('im Rahmen der allgemeinen Sparmassnahmen wurde der Code weiter dezimiert');
    8. tNews.push('Update in der Morgend&auml;mmerung:jetzt tickt er auch in Tabellen!');
    9. tNews.push('<em style="color:red">Wir schreiben das Jahr 2007:der Ticker funktioniert jetzt auch im STRICT-Modus:D</em>');
    10.  
    11. //°°°°°°°°°°Delimiter zwischen den einzelnen News
    12. tDelimiter  =' + + + ';
    13.  
    14. //°°°°°°°°°°Interval in ms
    15. tInterval   =10;
    16.  
    17. //°°°°°°°°°°Stop bei mouseover?true:false
    18. tStop       =true;
    19.  
    20. //°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
    21. tRepeat     =2;
    22.  
    23. //°°°°°°°°°°Rahmen
    24. tBorder     ='3px solid green';
    25.  
    26. //°°°°°°°°°°Breite
    27. tWidth      =300;
    28.  
    29. //°°°°°°°°°°Höhe
    30. tHeight     =20;
    31.  
    32. //Abstand Rahmen->Inhalt (top+bottom)
    33. tPadding    =1;
    34.  
    35. //Das Aussehen per CSS anpassbar unter Verwendung des Selectors #ticker
    36.  
    37. /* * * * * * * * * * * * * * * * * * D E R  T I C K E R * * * * * * * * * * * * * * * * * * * * * */
    38. IE  = document.all&&!window.opera;
    39. DOM = document.getElementById&&!IE;
    40.  
    41. if(DOM||IE)
    42.     {
    43.     var tGo,
    44.         tPos  = 0,
    45.         tStop = tStop?'onmouseover="clearInterval(tGo)"'+ 'onmouseout="tGo=setInterval(\'DM_ticken()\','+tInterval+')"':'',
    46.         tTxt  = tDelimiter+tNews.join(tDelimiter),
    47.         tNews = tTxt;
    48.        
    49.         for(i = 1; i < tRepeat; ++i)
    50.           {
    51.             tNews+=tTxt;
    52.           }
    53.          
    54.         document.write('<div style="overflow:hidden;border:' + tBorder +
    55.                        ';width:' + tWidth + 'px;height:' + tHeight + 'px;' +
    56.                        'padding:' + tPadding + 'px 0px ' + tPadding + ' px 0px;">' +
    57.                        '<div style="position:absolute;width:' + tWidth + 'px;height:' + tHeight + 'px;'+
    58.                        'overflow:hidden;clip:rect(0px '+tWidth+'px '+tHeight+'px 0px)">'+
    59.                        '<span id="ticker"style="white-space:nowrap;position:relative;"' + tStop + '>' + tNews +
    60.                        '</span></div></div>');
    61.        
    62.         tObj = IE ? document.all.ticker : document.getElementById('ticker');
    63.    
    64.     function DM_ticken()
    65.       {
    66.         tOffset = tObj.offsetWidth/tRepeat;
    67.         if(Math.abs(tPos) > tOffset)
    68.           {
    69.             tPos=0;
    70.           }
    71.         tObj.style.left=tPos+'px';
    72.         tPos=parseInt(tPos)-1;
    73.       }
    74.    
    75.     tGo=setInterval('DM_ticken()',tInterval);
    76.     }      
    77.  
    und hier mien php
    PHP:
    1. <?php
    2. $path="Bilder";
    3. if ($handle = opendir($path)) {
    4. $i = 0;
    5. while (false !== ($file = readdir($handle))) {
    6. if (is_file($path."/".$file))
    7. {
    8. echo "<div class='thumbnail'>
    9.        <a href='$path/$file' rel='lightbox[roadtrip]'><img src='$path/$file' height='50' border='0' /></a></div>";}
    10. }
    11. }
    12. ?>
    wie kann ich das PHP in den Code oben reinbasteln und wie kann ich das ding aufrufen. ich hab keinen Aufruf der Fkt. gefunden .
     
    #5      
  6. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Nur horizontal Scrollen
    AW: Nur horizontal Scrollen

    Code (Text):
    1.  
    2. <div style="width:100%; overflow:auto">
    3.   <nobr>
    4. <?
    5. $path="Bilder";
    6. if ($handle = opendir($path)) {
    7. $i = 0;
    8.   while (false !== ($file = readdir($handle))) {
    9.   if (is_file($path."/".$file))
    10.   {
    11.     echo "<a href='$path/$file' rel='lightbox[roadtrip]'><img src='$path/$file' height='50' border='0' /></a>\n";}
    12.   }
    13. }
    14. ?>
    15.   </nobr>
    16. </div>
    17.  
     
    #6      
  7. ghost90

    ghost90 Noch nicht viel geschrieben

    Dabei seit:
    21.06.2008
    Beiträge:
    29
    Geschlecht:
    männlich
    Nur horizontal Scrollen
    AW: Nur horizontal Scrollen

    Danke

    jetzt hab ich ein weiteres Problem, ich hab um die bilder einen DIV Container rumgebastelt damit ich nen bilderrahmen hab.

    jetzt:

    http://img223.imageshack.us/img223/5586/123nn4.jpg

    nun bekomm ich den "Spaß" nicht mehr neben einander

    und die css

     
    Zuletzt bearbeitet: 16.08.2008
    #7      
x
×
×
teststefan