Tutorial CSS ImageSlider mit Upload Funktion für die Bilder

von Werner-Zenk.de. Hier die Version vom 24.11.2016 in NOF integriert. Dieser Slider ist in der Original-Version responsive oder auch automatisch anzuwenden. Die Anwendung verwendet eine SQLite-Datenbank, die als portable Datei im Download gleich mit dabei ist. Ihr müsst an der Datenbank keinerlei Änderungen vornehmen.

Bitte ladet Euch die Skript beim Werner herunter und entpackt die ZIP-Datei. Ihr erhaltet ein Verzeichnis:

  • css-imageslider

Lest zunächst die Datei lies_mich.txt aufmerksam durch.

Die Bilder für den Slider können direkt über den Admin-Bereich auf den Server geladen, gelöscht, sortiert und ausgetauscht werden.

Öffnet das Verzeichnis “css-imageslider” und Ihr findet die Startseite sowie das Verzeichnis

  • index.php
  • cssslider

Öffnet das Verzeichnis “cssslider” und editiert dort die Datei

  • slider_einstellungen.php

Fügt Euren Benutzer-Namen und Euer Passwort oben in diese Datei ein. Zum Testen könnt Ihr nun bereits das gesamte Verzeichnis “css-imageslider” mal auf den Server kopieren und die Datei “anmeldung.php” im Verzeichnis

  • /css-imageslider/cssslider/anmeldung.php

im Browser aufrufen. Jetzt könnt Ihr bereits die Beispielfotos sehen und auch löschen, Eure eigenen Fotos hochladen, editieren und austauschen. Achtet bei Euren Fotos darauf, dass diese alle die gleichen Abmessungen haben. Ihr könntet nun auch diesen Slider in einem Iframe anzeigen lassen.

 

Einbindung des Sliders direkt in NOF:

Stellt den Zeichensatz Eurer Seite auf “UTF-8” und die Dateiendung auf .php.

Kopiert das gesamte Verzeichnis:

  • cssslider

in das Verzeichnis auf Eurem Server, in dem auch die NOF-Seite liegt, auf der Ihr den Slider einbauen wollt.

Bei mir ist das ebenfalls die Startseite “index.php”.

Ich habe hier die CSS-Dateislider_style.css” vom Slider lediglich an meine Farben der Seite angepasst, die Ihr ebenfalls im Verzeichnis “cssslider” findet.

Fügt die Verlinkung zu dieser CSS-Datei in die HTML vom Layout “Zwischen Head Tags” ein und passt die relative Pfadangabe gegebenenfalls an.

<link rel="stylesheet" href="cssslider/slider_style.css">

Zur Anzeige des Sliders zieht Ihr Euch ein Textfeld auf und fügt den PHP-Teil von <?php bis ?> aus der Original-Datei “index.php” vom Werner in den HTML-Code Editor des Textfeldes ein.

> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code einfügen

<?php
/*
 * CSS-ImageSlider - index.php (utf-8)
 * - https://werner-zenk.de
 */

// Pfad der Fotos
$fotopfad = "cssslider/images/"; // cssslider/images/

// Pfad zur Datenbank
$db = new PDO('sqlite:' . "cssslider/slider_daten.sqt"); // cssslider/slider_daten.sqt


// Fotos auslesen und ausgeben
$select = $db->query("SELECT `id`, `nr`, `text`, `photo` FROM `cssslider` ORDER BY `nr` ASC");
$fotos = $select->fetchAll(PDO::FETCH_ASSOC);
$anzahl = count($fotos);
define('NL', "\n");
echo '<!-- cssSlider -->' . NL . '<div class="cssSlider">' . NL;
for ($i = 1; $i <= $anzahl; $i++) {
 echo ' <input name="slider" id="slide0' . $i . '" type="radio"';
 if ($i == 1) echo ' checked="checked"';
 echo '>' . NL;
}
echo NL . '<ul class="sliderElements">' . NL;
foreach ($fotos as $foto) {
 echo '<li>' . NL . ' <figure>' . NL .
 '  <img src="' . $fotopfad . $foto["photo"] . '" alt="">' . NL .
 '  <figcaption>' . $foto["text"] . '</figcaption>' . NL . ' </figure>' . NL . '</li>' . NL;
}
echo '</ul>' . NL . NL . '<ul class="sliderNavi">' . NL;
foreach ($fotos as $i => $foto) {
 echo '<li><label for="slide0' . ($i+1) . '" title="' . ($i+1) . '. ' . $foto["text"] . '">&bull;</label></li>' . NL;
}
echo '</ul>' . NL . '</div>' . NL . '<!-- /cssSlider -->' . NL;
?>

Um den Slider zu editieren und neue Fotos hochzuladen, ruft ihr die Original-Skripte aus dem Verzeichnis “cssslider” direkt im Browser auf.

Hier eine Ansicht der Upload-Funktion:

CSS-ImageSlider Upload

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik