👋🏼 🏂🏼 ⚜️ Schreiben eines Bildergalerie-Generators mit integriertem Schieberegler 👦🏾 🔊 🤽🏽

Guten Tag, Freunde!

Anstelle der Einführung (Problemstellung)

Alles begann mit der Untersuchung der Schieberegler anderer Personen (vorgefertigte Lösungen im Netzwerk wie bxslider , owlcarousel und slick ). Eines Tages werde ich detaillierte Tutorials über die Arbeit mit diesen Werkzeugen schreiben (süße Träume). Es bestand der Wunsch, Ihren Schieberegler zu schreiben. Bald jedoch (auch nach dem Lesen mehrerer Artikel über Habré) wurde mir klar, dass nur ein Schieberegler für Weicheier ist. Es wird etwas Radikaleres benötigt.

Als Ergebnis kam mir die folgende Aufgabe: einen adaptiven Galerie-Generator mit einem eingebauten Schieberegler zu schreiben.

Bedingungen:

Möglichkeit zum Hochladen einer beliebigen Anzahl von Bildern (von überall auf Ihrer Festplatte).
Die Galerie besteht aus hochgeladenen Bildern, das Markup wird "on the fly" gemäß der HTML5-Semantik erstellt.
Die Galerie sieht auf Bildschirmen mit unterschiedlichen Auflösungen gleich gut aus.
Wenn Sie auf ein Bild klicken, wird ein Schieberegler generiert.
Beim Generieren eines Schiebereglers wird der Hintergrund abgedunkelt.
Das angeklickte Bild ist die erste Folie.
Die Schiebeschaltung wird über das DOM implementiert.
Folien wechseln reibungslos.
Möglichkeit zur Steuerung des Schiebeschaltens über Tasten und Tastatur.
Die Möglichkeit, durch Klicken auf die aktuelle Folie und Schaltfläche sowie über die Tastatur zur Galerie zurückzukehren.
Reines JavaScript (alle Markups über JS).
Minimaler Code.

Also, lass uns gehen (wie Gagarin sagte, ins All gehen).

Das Markup sieht folgendermaßen aus:

<div class="wrap">
    <input type="file" multiple accept="image/*">
    <button>generate gallery</button>
</div>

Von den interessanten Dingen vielleicht die Mehrfach- und Akzeptanzattribute des Eingabe-Tags. Mit dem ersten Attribut können Sie mehrere Dateien hochladen, mit dem zweiten Attribut wird ein Filter für die Dateitypen festgelegt, die heruntergeladen werden können. In diesem Fall hat accept den Wert "image / *", was bedeutet, dass nur Bilder (beliebige) hochgeladen werden können.

Bringen Sie sofort Schönheit (Stile hinzufügen):

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background: radial-gradient(circle, skyblue, steelblue);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

button {
    padding: 0.25em;
    font-family: monospace;
    text-transform: uppercase;
    cursor: pointer;
}

.darken {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

.slider {
    width: 100%;
    display: inherit;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

figure {
    margin: 0.5em;
    width: 300px;
    display: inherit;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}

figcaption {
    font-size: 1.2em;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 0.25em;
    color: #ddd;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
}

img {
    max-width: 80%;
    max-height: 80vh;
    cursor: pointer;
}

.button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    background: none;
    border: none;
    outline: none;
    filter: invert();
}

.left {
    left: 2em;
}

.right {
    right: 2em;
}

.close {
    top: 2em;
    right: 1em;
}

Es gibt nichts zu reden (.darken - Dimmen).

Weiter ... zu JS.

Wir finden den Knopf und hängen den Hörer daran:

let button = document.querySelector("button");
button.addEventListener("click", generateGallery);

Der gesamte weitere Code befindet sich in der Funktion generateGallery, um "nicht definiert" ohne Rückgabe zu vermeiden:

function generateGallery() {
    //    
}

Wir finden Eingaben, überprüfen, ob sie nicht leer sind, holen eine Sammlung heruntergeladener Dateien ab, löschen .wrap und erstellen einen Container für die Galerie:

let input = document.querySelector("input");
// ,  input  
if(input.files.length == 0) return;
let files = input.files;
//  
let i;

//  .wrap,     
let wrap = document.querySelector(".wrap");
document.body.removeChild(wrap);

//    , ,    gallery
let slider = document.createElement("div");
slider.className = "slider";
document.body.appendChild(slider);

Wir sortieren die Dateisammlung, ermitteln den Namen und die Adresse jeder Datei, erstellen Markups, erstellen Bildunterschriften und die Bilder selbst:

for (i = 0; i < files.length; i++) {
    let file = files[i];
    // URL.createObjectURL         ,         
    // ,   ,       
    //             ,      
    /*let src = URL.createObjectURL(file);*/

    //   
    let name = file.name;

    //   ,      img     
    let src = `img/${name}`;

    //  : figure, figcaption, img
    let figure = document.createElement("figure");
    slider.appendChild(figure);

    let figcaption = document.createElement("figcaption");

    //  ,             ,   
    // (?=\.) -  :     ,    
    //       \w,         
    let regexp = /.+(?=\.)/;
    name = name.match(regexp);
    //   ["", index: 0, input: ".jpg", groups: undefined]
    //    
    figcaption.innerText = name[0];
    figure.appendChild(figcaption);

    //  
    let img = document.createElement("img");
    img.src = src;
    figure.appendChild(img);
}

Wir möchten einen Schieberegler erzeugen, wenn wir auf das Bild klicken. Dazu finden wir die ganze Figur und hängen sie an jeden Hörer:

let figures = document.querySelectorAll("figure");
for (i = 0; i < figures.length; i++) {
    let figure = figures[i];
    figure.addEventListener("click", () => {
        //  ,       figure,   
        generateSlider(figure);
    });
}

Als nächstes arbeiten wir in der Funktion generateSlider:

function generateSlider(figure) {
    //  
}

Verdunkeln Sie den Hintergrund:

darkenBack();
function darkenBack() {
    // ,   
    //  , ,   , 
    if (document.querySelector(".darken") == null) {
        let div = document.createElement("div");
        div.className = "darken";
        document.body.appendChild(div);
    } else {
        let div = document.querySelector(".darken");
        document.body.removeChild(div);
    }
}

Wir zeigen jeweils eine Folie an. Vergessen Sie nicht, dass der Schiebeschalter glatt sein sollte. Dies ist mit Transparenz und einem kleinen Übergang leicht zu erreichen. Daher überlagern wir die Bilder übereinander, platzieren sie in der Mitte und machen alle Bilder mit Ausnahme des „angeklickten“ transparent:

for (i = 0; i < figures.length; i++) {
    if (figures[i].hasAttribute("style")) {
        figures[i].removeAttribute("style");
    } else {
        figures[i].setAttribute("style", "margin: 0; width: auto; position: absolute; opacity: 0;");
    }
}

//      / 
if (figure.hasAttribute("style")) {
    figure.style.opacity = 1;
    generateButtons();
} else generateButtons();

Erstellen Sie als Nächstes Schaltflächen, um die Folien zu wechseln und die Galerie zu schließen. Der Code erwies sich als lang und langweilig (möglicherweise war es keine gute Idee, bei jedem Start des Schiebereglers Schaltflächen zu generieren):

Code zum Erstellen von Schaltflächen:

function generateButtons() {
    if (document.querySelector(".buttons") == null) {
        //    
        let buttons = document.createElement("div");
        buttons.className = "buttons";
        slider.appendChild(buttons);

        //   
        let leftButton = document.createElement("button");
        leftButton.className = "button left";
        let leftImg = document.createElement("img");
        leftImg.src = "https://thebestcode.ru/media/sliderGenerator/buttons/left.png";
        leftButton.appendChild(leftImg);
        buttons.appendChild(leftButton);
        leftButton.addEventListener("click", () => changeSlide("-"));

        //   
        let rightButton = document.createElement("button");
        rightButton.className = "button right";
        let rightImg = document.createElement("img");
        rightImg.src = "https://thebestcode.ru/media/sliderGenerator/buttons/right.png";
        rightButton.appendChild(rightImg);
        buttons.appendChild(rightButton);
        rightButton.addEventListener("click", () => changeSlide("+"));

        //    
        let closeButton = document.createElement("button");
        closeButton.className = "button close";
        let closeImg = document.createElement("img");
        closeImg.src = "https://thebestcode.ru/media/sliderGenerator/buttons/close.png";
        closeButton.appendChild(closeImg);
        buttons.appendChild(closeButton);
        closeButton.addEventListener("click", () => generateSlider(figure));
    } else {
        //   ,  
        let buttons = document.querySelector(".buttons");
        slider.removeChild(buttons);
    }
}

Das Umschalten von Folien wird mit der Funktion changeSlide implementiert, die als Parameter "+" bzw. "-" übergeben wird:

function changeSlide(e) {
    //    
    for (i = 0; i < figures.length; i++) {
        figures[i].style.opacity = 0;
    }
    if (e == "-") {
        //      ,    
        if (figure == figures[0]) {
            figure = figures[figures.length - 1];
        } else {
            figure = figure.previousElementSibling;
        }
    } else if (e == "+") {
        //      ,    
        if (figure == figures[figures.length - 1]) {
            figure = figures[0];
        } else {
            figure = figure.nextElementSibling;
        }
    }
    //    
    figure.style.opacity = 1;
}

Fügen Sie die Möglichkeit hinzu, Folien zu wechseln und die Galerie über die Tastatur zu schließen:

document.addEventListener("keydown", e => {
    //  
    if (e.keyCode == 37 || e.keyCode == 189) {
        changeSlide("-");
    //  
    } else if (e.keyCode == 39 || e.keyCode == 187) {
        changeSlide("+");
    // esc
    } else if(e.keyCode == 27) {
        generateSlider(figure);
    }
});

Das ist alles, der adaptive Galerie-Generator mit dem eingebauten Schieberegler ist fertig. Mission erfüllt. Die Bedingungen sind erfüllt. Gegen Ende wurde mir klar, dass „Mindestcode“ und „Alle Markups werden im laufenden Betrieb mit JS erstellt“ sich widersprechen, aber es war zu spät (ist es zu spät, sich zu entschuldigen, oder was ist mit One Republic?).

Das Ergebnis ist zu sehen, hier .

Beachten Sie, dass wir in Codepen URL.createObjectURL verwenden, um auf Bilder zu verlinken, da Codepen den Ordner img nicht sieht.

Vielen Dank für Ihre Aufmerksamkeit.

Schreiben eines Bildergalerie-Generators mit integriertem Schieberegler

Anstelle der Einführung (Problemstellung)

More articles: