Bilder Vorschau

ProOfNoobs · 1. Mai 2019

Hi, ich habe mir nun mittels php eine Webseite erstellt, welche mir eine Bilder Kollage ausgibt ( Die Bilder nimmt sie aus einem Ordner welcher zusammen mit der Seite gespeichert ist )

Hier der Code dazu:

PHP

<?php
$verzeichnis = ".";
if (is_dir($verzeichnis))
{
if ( $handle = opendir($verzeichnis) )
{
while (($file = readdir($handle)) !== false)
{
if ( filetype( $file) == "file"
AND substr( $file, -4) == ".jpg")
{
$bilderdateinamen[] = $file;
}
}
closedir($handle);
}
}
foreach ( $bilderdateinamen AS $dateiname )
{
echo ' <div class="rahmen">';
echo' <span> <font size="3.5">';
echo'</font></span>';
echo "<img src=\"$dateiname\"";
echo " alt=\"";
echo 'width="300" height="225"';
echo '"> ';
echo' </div>';
}
?>

Alles anzeigen

Meine Frage ist nun wie kann ich es machen, dass wenn man einmal auf ein Bild drauf klickt eine kleine Vorschaue des Bildes hat ( vergrößert angezeigt [optional mit ein kleines kreuz zum wieder Schließen] ) ?

basti1012 · 1. Mai 2019

wie meinst du das ? Die Blder werden doch jetzt schon als mittelgroßes Bild angezeigt oder sehe ich das falsch ?

Wenn du sie kleiner haben willst dann lass sie doch gleich kleiner anzeigen ?

Abe ich denke mal das so was suchst oder

http://sebastian1012.bplaced.n…-mit-ueberblendeffekt.php

oder das

http://sebastian1012.bplaced.n…und-slider/fancybox-1.php

oder

http://sebastian1012.bplaced.n…query-foto-set-slider.php

Sowas in der Art gibt es 1000 Fach.Doch mehr funktionierende habe ich nicht rumfliegen

Such mal bei Goggel unter Fancybox, da findest du genug. Das ist aber Javascript denk daran. Da must du nur wissen wie dudie Bilder darein bekommst, ist aber kein Problem

Sempervivum · 1. Mai 2019

Ich empfehle gern Fancybox 3 weil es responsiv ist und mit Touch-Gesten bedient werden kann:

https://fancyapps.com/fancybox/3/

ProOfNoobs · 1. Mai 2019

Also ich meinte eigentlich so etwas wie der dritte Link den basti geschickt hatte, wäre schön dazu ein wenig Erklärung zu haben.

Wenn ich das richtig verstanden habe brauche ich für dieses fancyapp eine jQuerry oder ? ( kenn mich mit JavaScript eher weniger aus )

ProOfNoobs · 1. Mai 2019

Ich hab mal ein Bild angehangen von meiner Webseite wie sie momentan aussieht, wenn man nun auf ein Bild anklickt soll dieses vergrößert in der Mitte des Bildschirmes angezeigt werden ( am besten wäre es wenn es sich im Vordergrund schiebt also über allen anderen content )

m.scatello · 1. Mai 2019

Hast du dir auf der verlinkten Seite von Sempervivum den Bereich "Quick start" angesehen? Um Fancybox einzubinden braucht man keinerlei JavaScript-Kenntnisse.

ProOfNoobs · 1. Mai 2019

Ok hab es jetzt geschafft, dass die mit einer Vorschau angezeigt werden Danke für eure Hilfe

Eine Frage hätte ich da jetzt allerdings noch

wie kann ich das machen, dass nur eine bestimmte Anzahl an Bilder angezeigt wird ? ( hab ja jetzt eine Schleife die Alle Bilder im Ordner ausliest und anzeigt ).

Bin mir nicht sicher an welcher Stelle genau ich in meinem Code da so eine Zähler Variable oder ähnliches einbauen müsste.

PHP

<?php
$verzeichnis = ".";
if (is_dir($verzeichnis))
{
if ( $handle = opendir($verzeichnis) )
{
while (($file = readdir($handle)) !== false)
{
if ( filetype( $file) == "file"
AND substr( $file, -4) == ".jpg")
{
$bilderdateinamen[] = $file;
}
}
closedir($handle);
}
}
foreach ( $bilderdateinamen AS $dateiname )
{
echo ' <div class="rahmen">';
echo' <span> <font size="3.5">';
echo'</font></span>';
echo "<a data-fancybox=\"gallery\" href=\"$dateiname\"><img src=\"$dateiname\"";
echo " alt=\"";
echo 'width="300" height="225"';
echo '"> ';
echo '</a>';
echo' </div>';
}
?>

Alles anzeigen

Hier nochmal mein Code mit fancybox zusammen.

Stef · 1. Mai 2019

Hey,

du kannst zum Beispiel das Array mit den Bildern mischen mittels der Funktion shuffle() und dann mit der Funktion array_slice() kürzen. Oder du zählst eine Variable in der While-Schleife hoch und beendest diese wenn ein bestimmter Wert erreicht ist mittels break;

Grüße,

Stef

ProOfNoobs · 1. Mai 2019

~~Hab jetzt versucht da eine zähler variable einzubinden ( shuffle war mir jetzt zu kompliziert wüsste nicht wo und wie ich das einbauen könnte ), dennoch kommt bei mir nun eine Fehlermeldung:~~

Notice: Undefined variable: bilderdateinamen in E:\xampppp\htdocs\images\Foto-Kugler.php on line 50
Warning: Invalid argument supplied for foreach() in E:\xampppp\htdocs\images\Foto-Kugler.php on line 50

~~Was hab ich falsch gemacht ?~~

Keine Ahnung was das Problem war beim Browser neustart ging es plötzlich wieder.

Dann werde ich mir doch noch mal dieses shuffle anschauen.

Stef · 1. Mai 2019

Hey,

ProOfNoobs : schau dir mal deine Klammern an, da sieht man sofort, dass was falsch ist. Außerdem verwechselst du da etwas im if-else.

Du willst, dass bei 15 Bilder die Schleife abgebrochen wird? Pseudobeispiel dazu:

PHP

$i = 0;
while(....){
if($i === 15){
break;
} else{
$bilder[] = $bild;
$i++;
}
}

Alles anzeigen

Stef

ProOfNoobs · 1. Mai 2019

Mal so nebenbei irgendeine Idee wie ich es mache, dass alle Bilder zentriert sind ?

hab schon ausprobiert:

<center>...</center> ( Ich weiß recht veraltet )

Mittels CSS:

display: kollage; justify-content: center; align-items: center;<-- div class="kollage">

hab sogar versucht es in einem <h1 align="center">..</h1>zu umfassen.

Alles vergebens.

Arne Drews · 1. Mai 2019

Kleiner Tipp:

PHP

$bilderdateinamen = glob( './*.jpg' );

ersetzt komplett das:

PHP

$verzeichnis = ".";
if (is_dir($verzeichnis))
{
if ( $handle = opendir($verzeichnis) )
{
while (($file = readdir($handle)) !== false)
{
if ( filetype( $file) == "file"
AND substr( $file, -4) == ".jpg")
{
$bilderdateinamen[] = $file;
}
}
closedir($handle);
}
}

Alles anzeigen

ProOfNoobs · 1. Mai 2019

Arne Drews Habs grad ausprobiert funktioniert, allerdings hab ich da keine Ahnung wie ich es da dann mache, dass wieder nur eine bestimmte Anzahl an Bilder ausgegeben wird ?

ProOfNoobs · 1. Mai 2019

Hab es momentan so:

PHP

<?php
$verzeichnis = ".";
$zähler = 1;
if (is_dir($verzeichnis))
{
if ( $handle = opendir($verzeichnis) )
{
while (($file = readdir($handle)) !== false)
{
if ( filetype( $file) == "file"
AND substr( $file, -4) == ".jpg")
if ( $zähler < 21)
{
{
$bilderdateinamen[] = $file;
$zähler = $zähler + 1;
}
}
else {
break;
}
}
closedir($handle);
}
}
foreach ( $bilderdateinamen AS $dateiname )
{
echo ' <div class="rahmen">';
echo' <span> <font size="3.5">';
echo'</font></span>';
echo "<a data-fancybox=\"gallery\" href=\"$dateiname\"><img src=\"$dateiname\"";
echo " alt=\"";
echo 'width="300" height="225"';
echo '"> ';
echo '</a>';
echo' </div>';
}
?>

Alles anzeigen

funktioniert auch ganz gut ( außer die zentrierung )

Arne Drews · 1. Mai 2019

Du willst also nur die ersten 4 .jpg Bilder haben, die in dem Verzeichnis gefunden werden?

PHP

$bilderdateinamen = array_slice( glob('./*.jpg'), 0, 4);

Wenn ihr PHP entwickeln wollt, solltet ihr immer ein Blick auf php.net haben

ProOfNoobs · 1. Mai 2019

Danke

Wie kann ich nun mit deiner Methode dieses shuffle() einbauen?

( Damit nicht immer die selben Bilder angezeigt werden )

Arne Drews · 1. Mai 2019

Einfach eine Zeile später shuffle($bilderdateinamen); ausführen...

Bitte etwas mitdenken...

ProOfNoobs · 1. Mai 2019

wow ja sorry da hab ich wohl wirklich ein klein wenig nicht nachgedacht xD

basti1012 · 1. Mai 2019

ProOfNoobs schrieb:

Mal so nebenbei irgendeine Idee wie ich es mache, dass alle Bilder zentriert sind ?

hab schon ausprobiert:

<center>...</center> ( Ich weiß recht veraltet )

<div align="center">..</div>

Bitte nicht.

Kuck dir dazu Flexbox an.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Damit kriegst du das auch responsiv hin und mit @mediaqueries kannst du das auch für Handys schöner machen

Arne Drews · 2. Mai 2019

Bzgl. der Zufallsbilder noch ein kleiner Hinweis.

Du berücksichtigst alle Bilder in shuffle(), wenn Du zuerst alle Bilder lädst und nach dem Würfeln die ersten X Bilder holst:

PHP

$aImages = glob( './*.jpg' );
shuffle( $aImages );
$aImageFileNames = array_slice( $aImages, 0, X ); // <-- X: Anzahl der Bilder, die Du verwenden möchtest

Bilder Vorschau

Ähnliche Themen

Bilderupload - Script zu langsam?

File API Dateiupload - bin ich zu blöd?

Portfolio-Galerie mit Responsive Grid, einer Filterfunktion and Onclick Lightboxes

Frage zu Mysql-Datenbank

Tags