automatischer slider

synaptic

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

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

Alles anzeigen

edit: das ding ist derzeit hier: http://revelation-of-evil.de/ im einsatz zu begutachten

automatischer slider

Tags

Benutzer online in diesem Thema