Diashow-2
Gesucht ist ein Programm zur Darstellung von Bildern in Form einer Diashow. Mit dieser Diashow soll das Programm aus „Bilder publizieren“ erweitert werden.
Zuerst soll der Focus auf dem Ablauf der Diashow liegen.
Bilder
Die Bilder seien in einer Variablen Images. Zum Testen werden die letzten 10 Titelbilder aus diesem Blog verwendet.
var Images = [
"https://clubcomputer.at/wp-content/uploads/sites/6/2023/09/image-26-400x250.png",
"https://clubcomputer.at/wp-content/uploads/sites/6/2023/09/image-25-400x250.png",
"https://clubcomputer.at/wp-content/uploads/sites/6/2023/09/image-19-400x250.png",
"https://clubcomputer.at/wp-content/uploads/sites/6/2023/09/image-17-400x250.png",
"https://clubcomputer.at/wp-content/uploads/sites/6/2023/09/a1mmbzcf-400x250.jpg",
"https://clubcomputer.at/wp-content/uploads/sites/6/2023/09/image-13-400x250.png",
"https://clubcomputer.at/wp-content/uploads/sites/6/2023/09/whatsapp-2503235_1280-400x250.jpg",
"https://clubcomputer.at/wp-content/uploads/sites/6/2023/09/image-400x250.png",
"https://clubcomputer.at/wp-content/uploads/sites/6/2023/09/applepay-googlepay-400x250.png",
"https://clubcomputer.at/wp-content/uploads/sites/6/2023/08/PXL_20230824_060743839-400x250.jpg"
]Bedienung
Im Grundzustand soll das erste Bild angezeigt werden. Oberhalb des Bildes sollen die Bedienungselemente angeordnet sein. Einerseits soll man sich manuell durch die Bilder bewegen können (also so, wie im Beitrag „Bilder publizieren“, anderseits benötigt man auch einen Start- und Stop-Button für die Diashow.
arrow_back_ios Zurück
arrow_forward_ios Vorwärts
not_started Start
cancel Stop
Code
Den Code gibt es in den Versionen „standalone“ und „embedded“. „standalone“ meint eine selbständige HTML-Seite und „embedded“ meint ein Code-Fragment, das in einer bestehenden Seite (so wie dieser) eingebettet wird. Der Unterschied besteht nur in dem erforderlichen Kopfteil (Einbettungen von Bibliotheken) in der „standalone“-Version und den ebenfalls fehlenden Tags html, head und body.
Auf dieser Clubcomputer-Seite sind häufige Einbettungen auf jeder Seite verfügbar, das sind Bootstrap, jQuery, Google-Symbols und Syntax-Highlighting. Im Anhang können beide Version downgeloadet werden.
Hier dargestellt wird der Standalone-Code.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<style>
.material-symbols-outlined { font-size:24pt;padding-top:3pt; }
.card {background-color:#222; color:white; width: 25rem; text-align:center;}
#title { color:white;}
</style>
<div class="card">
<div class="card-body">
<h5 class="card-title" id="title">Card title</h5>
<div class="btn-group" role="group">
<label class="btn btn-outline-primary paging" title="" id="paging-prev">
<span class="material-symbols-outlined">arrow_back_ios</span>
</label>
<label class="btn btn-outline-primary paging" title="" id="StartStop">
<span id="SymbolStartStop" class="material-symbols-outlined">not_started</span>
</label>
<label class="btn btn-outline-primary paging" title="" id="paging-next">
<span class="material-symbols-outlined">arrow_forward_ios</span>
</label>
</div>
</div>
<img id="Image" src="" class="card-img-top">
</div>
<script>
const PATH = "https://clubcomputer.at/wp-content/uploads/sites/6/2023/09/"
const INTERVALL = 2000
const AUTOSTART = true
var Index = 0
var Images = [
"image-26-400x250.png",
"image-25-400x250.png",
"image-19-400x250.png",
"image-17-400x250.png",
"a1mmbzcf-400x250.jpg",
"image-13-400x250.png",
"whatsapp-2503235_1280-400x250.jpg",
"image-400x250.png",
"applepay-googlepay-400x250.png"
]
function SetImage(i) {
$("#title").html(Images[i].replace(".jpg","").replace(".png",""))
$("#Image").attr("src",PATH + Images[i])
}
function NextImage() {
Index++
if (Index>=Images.length) Index = 0
SetImage(Index)
}
function PrevImage() {
Index--
if (Index<0) Index = Images.length-1
SetImage(Index)
}
var SliderTimer = 0
$("#StartStop").click(function(){
var Symbol = $("#SymbolStartStop").html()
switch (Symbol) {
case "not_started":
SliderTimer = setInterval(function(){
//$("#Image").fadeOut(1000)
NextImage()
//$("#Image").show()
//$("#Image").fadeIn(1000)
}, INTERVALL);
$("#SymbolStartStop").html("cancel")
break
case "cancel":
clearInterval(SliderTimer)
SetImage(0)
$("#SymbolStartStop").html("not_started")
break
}
})
$("#paging-prev").click(function(){
clearInterval(SliderTimer)
PrevImage()
})
$("#paging-next").click(function(){
clearInterval(SliderTimer)
NextImage()
})
SetImage(0)
if (AUTOSTART) $("#StartStop").click
</script>
</body>Konfiguration
PATH="https://lubcomputer.at/wp-content/uploads/sites/6/2023/09/“ ist ein Url zu einem Web-Verzeichnis, in dem sich die darzustellenden Bilder befinden. In diesem Beispiel sind es der Ordner der im September 2023 im Web clubcomputer.at (Site=6) gespeicherten Bilder.
INTERVALL = 2000 Ist der Umschaltzeit zwischen zwei Bildern in ms.
AUTOSTART = true startet die Diashow beim Laden der Seite
Beim Erreichen des letzten Bildes beginnt die Anzeige wieder von vorn.
Ausführung
Card title
Links
- Bilder publizieren (clubcomputer.at)
Franz war pensionierter HTL Lehrer (TGM), Präsident von ClubComputer, Herausgeber der Clubzeitung PCNEWS und betreute unser Clubtelefon und Internet Support. Er war leidenschaftlicher Rapid Wien Fan. Er ist leider Anfang Jänner 2024 nach langer schwerer Krankheit verstorben.
Neueste Kommentare