Diashow-2

von | Sep 30, 2023 | Fotografie, JavaScript | 0 Kommentare

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
diashowHerunterladen
diashow-fragmentHerunterladen

Kommentar absenden

Zur Werkzeugleiste springen