Feb 07, 2023

1633

Slideshow bearbeitungsproblem - JQuery - PHP

Hallo Zusammen,

ich hoffe es findet sich jemand der sich meinem Problem annehmen kann. Genau genommen ist es nicht meins, sondern für einen Freund der mich darum gebeten was umzusetzen und er niemanden besseres kennt.

Von HTML, CSS, JQuery kenne ich leider null bis sehr wenig. daher stoß ich hier schnell an meine Grenzen.

Es soll eine Bilder Gallery umgesetzt werden, möglichst simpel.

Was wichtig wäre ist, dass die Bilder automatisch skalieren können.
Weiterhin soll es möglich sein das per Maus hover sich das Icon ändert und man per Klick durch die Bilder kommt.
Letzter Punkt wäre das zu jedem Bild noch ein text sichtbar ist.

Hab mir verschiedensten Code aus dem Internet zusammengesucht und auch erfogreich laufen lassen.
Leider hatte keines davon alle meine Punkte abgedeckt.
Bei dem Code bin ich jetzt hängen geblieben.

    <html lang="en">  
    <head>
    <title>Diashow</title>
     
    <style>
    body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
	.fadein img{
    	position:absolute;
    	width: calc(96%);
        height: calc(94%);
        object-fit: scale-down;
    }
	.fadein { 
    position:relative; height:332px; width:500px; margin:0 auto;
    background: #ebebeb;
    padding: 10px;
     }
	
    </style>
    <script src="jquery-3.6.3.min.js"></script>  
    <script>
	  $(function(){
    	$('.fadein img:gt(0)').hide();  
    	setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);  
    });
	
    </script>
     
    </head>
    <body>
	
    <div class="fadein">  
<?php 
$dir = "./slider/";  
 
$scan_dir = scandir($dir);
foreach($scan_dir as $img):
	if(in_array($img,array('.','..')))  
	continue;
?>
<img src="<?php echo $dir.$img ?>" alt="<?php echo $img ?>">  
<?php endforeach; ?>
</div>
    </body>
    </html>

Das schöne an dem Code ist, dass die Bilder einfach in das entsprechende Verzeichnis abgelegt werden können und man nicht nochmal am html Code ran muss. Die Skalierung funktioniert super.

Allerdings ist hier ein automatisches interval drin und keine möglichkeit die Bilder zu betiteln.

Der PHP Code ist mir soweit klar, da könnte ich noch zur not wie hier bereits gemacht, den Namen des Bildes ($img) dazu verwenden das Bild zu betiteln. Sonst komm ich schon ins grübeln wegen der Schleife....vielleicht nenn Array außerhalb der Schleife anlegen mit den Titeln der Bilder...dann müssten die Bilder wahrscheinlich immer mit 1 .... 2 .... 3 beginnen, damit die zuordnung hin haut.

Titel zu den Bildern habe ich auch mal reinbekommen, dieser war aber immer an einer festen position, was mit den skalierende Bildern nicht klappt.

Bis zu dem Punkt von einer automatischen Gallery auf Klick umzustellen bin ich noch nicht gekommen. Wird wahrscheinlich diese Methode sein "setInterval" die dann weg muss.

Hat jemand bereits eine fertige Lösung für das was ich suche oder kann mir unter die arme greifen?

Please also mark the comments that contributed to the solution of the article

Content-Key: 5902776635

Url: https://administrator.de/contentid/5902776635

Printed on: April 29, 2024 at 13:04 o'clock

13 Comments

Latest comment

<html lang="en">  
<head>
<title>Diashow</title>
<style>
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.fadein img {
	position: absolute;
	width: calc(100%);
	height: calc(100%);
	object-fit: scale-down;
}
.fadein {
	position: relative;
	height: 332px;
	width: 480px;
	margin: 0 auto;
}
.img-subtitle {
	font-family:sans-serif;
	font-size:14px;
	color:#3463d0;
	font-weight:bold;
	text-align:center;
	padding-top:10px;
}
.slideshow-wrapper {
	background: #ebebeb;
	width:500px;
	margin:0 auto;
	padding:20px;
}
</style>
<script src="jquery-3.6.3.min.js"></script>  
<script>
	$(document).ready(function(e) {
		$('.fadein img:first-child').fadeIn().after(function(){  
			$('.img-subtitle').text($(this).attr("title"));  
		});
		$('.fadein img').click(function(e) {  
			let current = $(this);
			let next = current.next('img');  
			current.fadeOut().next('img').fadeIn().after(function(){  
				$('.img-subtitle').text(next.attr("title"));  
			}).end().appendTo('.fadein');  
		});
	});
</script>
</head>
<body>
    <div class="slideshow-wrapper">  
        <div class="fadein">  
<?php 
$dir = "./slider/";  
$scan_dir = scandir($dir);
foreach($scan_dir as $img):
	if(in_array($img,array('.','..')))  
	continue;
?>
 <img style="display:none" title="Hier dein Text für das jeweilige Bild z.B. aus Datenbank oder variable etc." src="<?php echo $dir.$img ?>" />  
<?php endforeach; ?>
        </div>
        <div class="img-subtitle"></div>  
    </div>
</body>
</html>

Top, vielen Dank wurstel.
Text und Bilder sind immer an der richtigen Stelle.

Sieht erstmal gut aus.
Bzgl. der Bildtexte setze ich mich zu einem späteren zeitpunkt noch auseinander, denke aber das schaff ich.

Gibt es noch eine Möglichkeit den Anwender zu zeigen das man die Bildergallery durchklicken kann?
Mein Vorschlag in der Frage war, dass Maus Icon bei Mouseover zu verändern.

dass Maus Icon bei Mouseover zu verändern.

Kannst du ja nach Gusto mit CSS machen.
z.B. mit

.fadein img:hover {
	cursor:pointer;	
}

So hab ich es auch gerade hin bekommen.

img:hover {
cursor: pointer;
}

Ok Top.

Ich markiere dene Antwort als Lösung, sobald alles läuft und kein Problem mehr auftaucht.

Oder du blendest noch transparente divs mit Pfeilen über die Bilder, endless possibilities ...

Ja sowas ähnliches hatte ich schon probiert und dabei quasi alles zerhauen ;)

So wie es jetzt ist reicht es.

Der vollständigkeit halber.
Den teil hab ich bearbeitet für die Texte zu den Bildern.

<?php
$BildTexte = array("Text1","Text2","Text3","Text4","Text5");  
?>

<body>
    <div class="slideshow-wrapper">  
        <div class="fadein">  
<?php 
$dir = "./slider/";  
$scan_dir = scandir($dir);
$i = 0;
foreach($scan_dir as $img):
	if(in_array($img,array('.','..')))  
	continue;
?>
 <img style="display:none" title="<?php echo $BildTexte[$i]?>" src="<?php echo $dir.$img ?>" />  
<?php 
$i++;
endforeach; ?>

Dann musst du das Skript ja auch jedes mal wieder anpassen, pack die Texte bspw. in ne Textdatei und lad die mit file() in dein Array $BildTexte, dann brauchst du es nicht mehr anfassen und es reicht die Textdatei mit den Bildern ins Verzeichnis zu schmeißen. Oder du schreibst die Texte gleich in die EXIF-Tags der Bilder und extrahierst die on the fly, dann wäre auch die Textdatei überflüssig. Again endless possibilities

Dann müssten ja die Exif Tags wahrscheinlich bearbeitet werden. Ist für meinen Freund wahrscheinlich noch umständlicher. ;)

Überlege es mir mal. Die textdatei müsste ich bestimmt noch im Loop skippen.

Zitat von @LordXearo:
Die textdatei müsste ich bestimmt noch im Loop skippen.

Das Einlesen der Textdatei gehört natürlich nicht in den Loop sondern davor.

Ja das ist mir schon klar....aber die darf dann nicht mit im Ordner der Bilder liegen, sonst läuft es einmal zu oft oder ich exlucde sie halt.
Das Program prüft ja nicht, ob die Dateien im Ordner Bilde sind, sosnt würden ja "." und ".." nicht übesprungen.

Ein bisschen programmieren kann ich, nur noch nie mit php gemacht und html css hab ich auch nie etwas mit am hut.

Zitat von @LordXearo:

Ja das ist mir schon klar....aber die darf dann nicht mit im Ordner der Bilder liegen, sonst läuft es einmal zu oft oder ich exlucde sie halt.
Das Program prüft ja nicht, ob die Dateien im Ordner Bilde sind, sosnt würden ja "." und ".." nicht übesprungen.

Entweder das oder du nutzt stattdessen gleich glob() direkt mit Dateifilter ...

$files = glob('*.jpg');

German Question JavaScript PHP HTML CSS

Hotly discussed

End of availability for classic Teams clientDani - 1 Comment

Developer diary: Release 6.1admtech