Ergebnis 1 bis 1 von 1

Thema: automatischer slider

  1. #1
    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 automatischer slider

    da ja hier schon des öfteren danach gefragt wurde, hab ich grad mal auf fix nen slider geschrieben, der bilder aus nem ordner ausliest und dann sliden lässt.

    is nich schön getrennt, weil ich so fehler beim copy und paste vermeiden will, man muss ja alles dau-sicher machen.
    also damit das ding funzt muss man sich jquery saugen und als script-tag einfügen, wie im quellcode unschwer zu erkennen ist
    die konfiguration steht im code mit kommentaren, ich denke das ding is eindeutig
    zum einbinden in die eigene seite muss man lediglich die slider.php an der entsprechenden stelle includen

    code: slider.php
    PHP-Code:
    <?php
        error_reporting
    (E_ALL);
        
    ini_set("display_errors"true);
        
        
    /*Konfiguration*/
        /*hier wird einfach nur der pfad zum bilderordner gesetzt mehr net :o)*/
        
    $bildpfad 'slides'//Pfad zum Ordner mit den bildern -  der letzte slash entfällt!
        
    $sliderSpeed 1500;  //Die Geschwindigkeit beim wechsel von einem Bild zum anderen
        
    $pause 5000;          //Pause in Milisekunden zwischen den Bildwechseln    
        
    $extension 'jpg';    //Dateiendung der anzuzaigenden bilder
        /*Konfiguration Ende*/
        
        
    $path $bildpfad.'/*.'.$extension;
        
    $arrPicturePaths glob($path);
        
    $strHTMLimg '';
        
    $arrImageDimensions = array();
        
    $intMaxWidth 0;
        
    $intImageHeight 0;
        
    $intImageWidth 0;
        
        
    $x=0;
        foreach(
    $arrPicturePaths as $value){
            if(
    $x count($arrPicturePaths)-1){
                
    $strHTMLimg .= '<img src="'.$value.'" alt="" />';
            }else{
                
    $strHTMLimg .= '<img src="'.$value.'" alt="" /><img src="'.$arrPicturePaths[0].'" alt="" />';
            }
            
            
    $arrAktDimensions getimagesize($value);
        
            
    $intMaxHeight $arrAktDimensions[1];
            
    $intImageHeight $intMaxHeight;
            
    $intImageWidth $arrAktDimensions[0];
            
    $arrImageDimensions[$value] = $arrAktDimensions;
            
    $intMaxWidth $intMaxWidth+$arrAktDimensions[0];
            
            
    $x++;
        }
        
    $intMaxWidth $intMaxWidth+$intImageWidth;

    ?> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>

    <head>
    <title>automatischer JPG-slider</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript">
            var darfSliden = true;

            function sperre(zustand){
                darfSliden = zustand;
            }

            function slide(sDiv, direction, imgWidth, duration){
                if(darfSliden){
                    var obj = $('#' + sDiv);
                    var dirMod;
                    var width = parseInt(obj.css('width'));
                    var lPosition = parseInt(obj.css('left'));
                    var imgWidth = parseInt(imgWidth);
                    if(direction == "left"){
                        if(lPosition <= -1*(width-imgWidth)){
                            obj.css('left', 0);
                            lPosition = 0;
                        }
                        dirMod = lPosition - imgWidth;        
                    }else{    
                        if(lPosition >= 0){
                            obj.css('left', -1*(width-imgWidth));
                            lPosition = -1*(width-imgWidth);
                        }
                        
                        dirMod = lPosition + imgWidth;

                    }
                    
                    sperre(false);
                    $('#' + sDiv).animate({left: dirMod + "px"}, duration, 'swing', function(){
                        sperre(true);
                    });
                    sperre(false);
                }
                return obj;
            }


            $(document).ready(function(){
                $('#btnprev').click(function(){
                        slide('slideWrapper', 'right', <?php echo $intImageWidth?>, 1500);
                });
                $('#btnnext').click(function(){
                        slide('slideWrapper', 'left', <?php echo $intImageWidth?>, 1500);
                });
                var Timer = window.setInterval('slide("slideWrapper", "left", <?php echo $intImageWidth?><?php echo $sliderSpeed?>)', <?php echo $pause?>);
            });
            
        </script>
        <style type="text/css">
        body{
            background:black;
        }
            #slideWrapper{
                width: <?php echo $intMaxWidth?>px;
                height: <?php echo $intImageHeight?>px;
                position:absolute;
                left:0;
                z-index:10;
            }
            #show{
                width: <?php echo $intImageWidth?>px;
                height: <?php echo $intImageHeight?>px;
                overflow:hidden;
                position:relative;
                z-index:20;
            }
            #btnprev{
                position:absolute;
                width: <?php echo $intImageWidth/2?>px;
                height: <?php echo $intImageHeight?>px;
                top:0;
                left:0;
                cursor:pointer;
                z-index:30;
            }
            #btnnext{
                position:absolute;
                width: <?php echo $intImageWidth/2?>px;
                height: <?php echo $intImageHeight?>px;
                top:0;
                right:0;
                cursor:pointer;
                z-index:30;
            }
        </style>
    </head>
    <body>

    <div id="show">
        <div id="btnprev" title="prev"></div>
        <div id="slideWrapper">
            <?php echo $strHTMLimg?>    
        </div>
        <div id="btnnext" title="next"></div>
    </div>                            
    </body>
    </html>
    edit: das ding ist derzeit hier: http://revelation-of-evil.de/ im einsatz zu begutachten
    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 synaptic (18.01.2011 um 10:11 Uhr) Grund: sourcecode modded
    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

Ähnliche Themen

  1. Hilfe bei Javascript Slider
    Von Unregistrierter Gast im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 09.06.2010, 20:18
  2. Flash Slider/Textfeld
    Von JesseJames im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 09.07.2007, 15:39
  3. XML News Slider/Ticker
    Von mgraf im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 20.11.2006, 00:55
  4. yugop slider
    Von GreenRover im Forum Flash Forum
    Antworten: 2
    Letzter Beitrag: 03.11.2006, 11:29
  5. Slider (Schieberegler)
    Von Jörn im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 05.05.2006, 09:27

Stichworte

Berechtigungen

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