Bilder Vorschau

  • 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:

    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] ) ?

  • 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

  • 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 )

  • 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 )

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

    Alles unter dem Strich ist eine Signatur!


    Die Deutsche Rechtschreibung ist Freeware, sprich, du darfst sie kostenlos nutzen. Allerdings ist sie nicht Open Source, d.h. du darfst sie nicht verändern oder in veränderter Form veröffentlichen!


    Zitat von Dieter Nuhr: "Wenn man keine Ahnung hat, einfach mal Fresse halten". Wie recht er doch hat...

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


    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.

    Hier nochmal mein Code mit fancybox zusammen.

  • 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.

  • 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:



    Stef

  • 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>


    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.

  • Kleiner Tipp:

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

    ersetzt komplett das:

  • Hab es momentan so:

    funktioniert auch ganz gut ( außer die zentrierung )

  • 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

  • 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
    1. $aImages = glob( './*.jpg' );
    2. shuffle( $aImages );
    3. $aImageFileNames = array_slice( $aImages, 0, X ); // <-- X: Anzahl der Bilder, die Du verwenden möchtest