jQuery Slideshow: Erstellen einer einfachen Bildergallerie

jQuery Slideshow: Erstellen einer einfachen Bildergallerie

jQuery Slideshow: Erstellen einer einfachen Bildergallerie

Für jQuery und bootstrap gibt es bereits jede Menge fertige Slideshow Plugins. Meist sind diese aber völligst überladen oder man traut dem Entwickler nicht so ganz über den Weg. Dann doch lieber selber machen…

Erstellen wir zunächst auf einem Webspace unserer Wahl oder auf einer lokalen XAMPP Installation im htdocs Verzeichnis die Datei index.html. Der Einfachheit halber werden wir in diesem kleinen Tutorial nur diese eine Datei verwenden was natürlich bei einer fertigen Webseite Irrsinn wäre. Erstellen wir zunächst das HTML Gerüst und binden die jQuery Library ein:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Slideshow</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>

</body>
</html>

Der weitere Code wird einfach im <body> Tag geschrieben.
Jetzt bauen wir die eigentliche Slideshow.

<div id="slideshow">
    <div class="sildeshow-inner">
        <div class="slide">
            <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=ONE&w=350&h=150&bg=354651" />
        </div>
        <div class="slide">
            <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=TWO&w=350&h=150" />
        </div>
        <div class="slide">
            <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=THREE&w=350&h=150&bg=354651" />
        </div>
        <div class="slide">
            <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=FOUR&w=350&h=150" />
        </div>
    </div>
    <div class="slide-control">
      <div class="left"></div>
      <div class="right"></div>
    </div>
</div>

Das <div> mit der ID slideshow ist der Wrapper. Die ID slideshow-inner beinhaltet die eigentlichen Slides, d.h. die Container mit den Bildern. Als Bilder verwende ich einfach Platzhalter. Unterhalb des Bildercontainers sind die “nach link” und “nach rechts” Pfeile, mit der man die Bilder hin und her klicken kann.

Jetzt geht’s an die CSS Formatierung:

#slideshow {
    width: 350px;
    overflow: hidden;
    position: relative;
}

.sildeshow-inner {
    display: flex;
    justify-content: flex-start;
}

.slide img {
    min-width: 350px;
    max-width: 350px;
}

.slide-control {
    opacity: 0;
}

#slideshow:hover .slide-control {
    opacity: 1;
}

.slide-control .left, .slide-control .right {
    position: absolute;
    width: 25px;
    height: 40px;
    bottom: 55px;
    cursor: pointer;
    opacity: 0.2;
}

.slide-control .left {
    background: url(left.png);
    left: 10px;
}

.slide-control .right {
    background: url(right.png);
    right: 10px;
}

Ich gehe von einer festen Breite der Bilder aus mit 350px aus. Dementsprechend breit ist auch der Wrapper. overflow: hidden gibt an, dass wirklich nur die angegebene Breite und Höhe des Containers sichtbar ist und der Rest im Hintergrund verschwindet. Zudem werden auch die Scrollbalken verborgen. Auf den Container slideshow-inner setzen wir display: flex (seit CSS3 verfügbar) und justify-content: flex-start und heben damit den Seitenumbruch auf. Die Bilder werden auf die Breite von 350px formatiert.

Jetzt geht’s an die eigentlich Slideshow, den jQuery Teil:

$( document ).ready( function() {
    var slide_width = parseInt($( ".slide img" ).css("max-width")),
        margin = 0,
        slideshow_width = 0,
        animation = false,
        autoslide;

    $( ".slide" ).each( function() {
        slideshow_width += slide_width;
    });
    slideshow_width -= slide_width;
    
    autoslide = setInterval(function(){ slide("right"); }, 3000);


    $( ".slide-control .left" ).click(function(element) {
        slide("left");
    });

    $( ".slide-control .right" ).click(function(element) {
        slide("right");
    });

    function slide( direction ) {
        if (animation) return;
        clearInterval(autoslide);

        if (direction == "left") {
            margin += slide_width;
            if (margin > 0) {
                margin = 0 - slideshow_width;
            }
        } else if (direction == "right") {
            margin -= slide_width;
            if (Math.abs(margin) > slideshow_width) {
                margin = 0;
            }
        }
        animation = true;
        $( ".sildeshow-inner" ).animate( { "margin-left": margin + "px" }, 500, function() { animation = false; });
        autoslide = setInterval(function(){ slide("right"); }, 3000);
    }

    autoslide = setInterval(function(){ slide("right"); }, 3000);

});

Zu den Variablen:

  • slide_width: mittels parseInt wandlen wir die CSS Eigenschaft max-width in ein Integer um, so dass wir später damit Berechnungen durchführen können.
  • margin: der Abstand links
  • slideshow_width: die Gesamtbreite der Slideshow
  • animation: ein Boolean, das angibt, ob gerade eine Amination im Gange ist
  • autoslide: der automatische Slidevorgang

Zunächst berechnen wir anhand der Anzahl der Slides die aktuelle Breite (abzüglich der Breite eines Slides, da sonst ein leeres Feld zu sehen wäre).

$( ".slide" ).each( function() {
    slideshow_width += slide_width;
});
slideshow_width -= slide_width;

Jetzt estellen wir Event Listener für die Navigationspfeile.

$( ".slide-control .left" ).click(function(element) { slide("left"); });
$( ".slide-control .right" ).click(function(element) { slide("right"); });

Jetzt wird die automatische Sildeshow mittels setInterval initialisiert.

autoslide = setInterval(function(){ slide("right"); }, 3000);

Die eigentliche Funktion slide prüft zunächst, ob eine Animation in Gange ist. Sollte dies der Fall sein, wir mittels return eine weitere Verarbeitung innerhalb der Funktion vorzeitig beendet.
clearInterval(autoslide) beendet die automatische Slideshow für die Zeit der Animation.
Anhand des Parameters direction wird die Richtung beschrieben. Je nach Richtung wird das margin, also der Abstand berechnet. Zunächst addieren (links) oder subtrahieren (rechts) wir vom Abstand eine Einheit slide_width. Sollte die Gesamtbreite der Slideshow über- bzw. unterschritten sein, wird margin auf einen festen Wert (Anfang oder Ende) gesetzt.
Jetzt wird animation auf true gesetzt, was bedeuted, dass eine Animation im Gange ist. Sollte jetzt die Funktion slide nochmals aufgerufen werden, wird keine zusätzliche Animation durchgeführt. Das würde zu seltsamen Animationseffekten führen. Die eigentliche Animation wird mittels der jQuery Funktion .animate() durchgeführt. Ist die Animation beendet, wird auch das animate Flag wieder auf false gesetzt und der Weg ist frei für neue Animationen.
Mit der Funktion setInterval wird die Slideshow Animation alle 3 Sekunden durchgeführt.

function slide( direction ) {
    if (animation) return;
    clearInterval(autoslide);

    if (direction == "left") {
        margin += slide_width;
        if (margin > 0) {
            margin = 0 - slideshow_width;
        }
    } else if (direction == "right") {
        margin -= slide_width;
        if (Math.abs(margin) > slideshow_width) {
            margin = 0;
        }
    }
    animation = true;
    $( ".sildeshow-inner" ).animate( { "margin-left": margin + "px" }, 500, function() { animation = false; });
    autoslide = setInterval(function(){ slide("right"); }, 3000);
}

Und schon haben wir eine einfache, gut funktionierende jQuery Slideshow, die ohne viel Aufwand schnell eingebunden werden kann.

Das fertige Konstrukt sieht dann so aus:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery Slideshow</title>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <style>
            #slideshow {
                width: 350px;
                overflow: hidden;
                position: relative;
            }

            .sildeshow-inner {
                display: flex;
                justify-content: flex-start;
            }

            .slide img {
                min-width: 350px;
                max-width: 350px;
            }

            .slide-control {
                opacity: 0;
            }

            #slideshow:hover .slide-control {
                opacity: 1;
            }

            .slide-control .left, .slide-control .right {
                position: absolute;
                width: 25px;
                height: 40px;
                bottom: 55px;
                cursor: pointer;
                opacity: 0.2;
            }

            .slide-control .left {
                background: url(left.png);
                left: 10px;
            }

            .slide-control .right {
                background: url(right.png);
                right: 10px;
            }
        </style>
        <script>
            $( document ).ready( function() {
                var slide_width = parseInt($( ".slide img" ).css("max-width")),
                    margin = 0,
                    slideshow_width = 0,
                    animation = false,
                    autoslide;

                $( ".slide" ).each( function() {
                    slideshow_width += slide_width;
                });
                slideshow_width -= slide_width;

                autoslide = setInterval(function(){ slide("right"); }, 3000);

                $( ".slide-control .left" ).click(function(element) {
                    slide("left");
                });

                $( ".slide-control .right" ).click(function(element) {
                    slide("right");
                });

                function slide( direction ) {
                    if (animation) return;
                    clearInterval(autoslide);

                    if (direction == "left") {
                        margin += slide_width;
                        if (margin > 0) {
                            margin = 0 - slideshow_width;
                        }
                    } else if (direction == "right") {
                        margin -= slide_width;
                        if (Math.abs(margin) > slideshow_width) {
                            margin = 0;
                        }
                    }
                    animation = true;
                    $( ".sildeshow-inner" ).animate( { "margin-left": margin + "px" }, 500, function() { animation = false; });
                    autoslide = setInterval(function(){ slide("right"); }, 3000);
                }
            });
        </script>
    </head>
    <body>
        <div id="slideshow">
            <div class="sildeshow-inner">
                <div class="slide">
                    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=ONE&w=350&h=150&bg=354651" />
                </div>
                <div class="slide">
                    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=TWO&w=350&h=150" />
                </div>
                <div class="slide">
                    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=THREE&w=350&h=150&bg=354651" />
                </div>
                <div class="slide">
                    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=FOUR&w=350&h=150" />
                </div>
            </div>
            <div class="slide-control">
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </div>
    </body>
</html>

 

Bitte bewerten Sie meinen Beitrag

Alexander Jungwirth ist Webentwickler bei einem Ingolstädter Verlagshaus und ist Inhaber der Firma Webdesign Manching. Seine Leidenschaft ist HTML, seine Passion PHP, seine Hingabe CSS und seine Inbrunst jQuery. Alexander lebt in Manching mit seiner liebevollen Frau und seinen wunderbaren Kindern.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.