Bilder mit Hover und Originalgrösse

  • Hallo


    Ich suche was speziales. :rolleyes:


    Ich habe ein paar Bilder (ca. 20) -aber später kommen noch ein paar weitere...


    Es sollte Standardbilder auf der Seite angezeigt werden. Wenn ich über das Standardbild mit Maus gehe, dann sollte eine zweite Bild angezeigt werde und wenn ich das Bild anklicke, dann sollte (wenn möglich) im Lightbox meine Standardbild in Originalgrösse angezeigt werden.


    Wie geschrieben, später folgen dann noch welche, wie kann ich das am besten machen, wenn ich später weitere einfügen will.


    Vielen Dank.

  • Spontan würd ich sagen die Bilder in einem Array speichern oder von Anfang an numerisch durchnummerieren.(Bild, Bild2,Bild3)


    Dann diese per for Schleife auslesen lassen :)

  • Hey,


    Wo ist da jetzt genau dein Problem??


    Das ist sogar mit rudimentärem JavaScript zu schaffen. Einen fertigen Code wird dir hier niemand schreiben ;)
    Einfacher ist es meiner Meinung nach mit jQuery. Aber prinzipiell suchst du einfach nach den Events onclick, onmouseover, onmouseout... (normales JS)
    Hier gibts genauere Infos


    MfG Kanu

  • Ja, aber ich würde gerne immer wieder zusätzliche Bilder hochladen ..und immer die Code zu ändern bzw. einfügen macht nicht sinn..


    Würde gerne so machen, wie ein CMS ..und dann können die Bilder hochgeladen werden ..und wenn jemand die Seite besucht und sich die Bilder anschauen will...dann wird bei Mausbewegung Bild geändert und bei click öffnet sich Originalgrösse.


    :)

  • Was mich noch intressieren würde ist, wer die Bilder denn hochlädt. Werden die von dir immer wieder neu hochgeladen oder von den Nutzern der Seite?


    Vorgehensweise wäre es wohl bei beiden per PHP die Datein des Ordners auslesen und in einem Array abspeichern. Diesen dann an Js übergeben und damit die Seite aufzubauen.( Bei größeren Mengen am besten über JSON gehen.


    Wo brauchst du denn konkret Hilfe? :)

  • Danke für deine Antw.


    Die Bilder werden von mir aber auch von eine andere Person hochgeladen dh. 2 Personen.


    Kennst du einen Tutorial, wie soll ich vorgehen ...ich erwarte keine Code, aber ein Tutorial wäre gar nicht so dumm :)

  • Willst du die Bilder in beiden Formaten hochladen oder soll das Script sie Kleinrechnen & soll immer ein Bestimmtes Bild als 2. Bild angezeigt werden oder einfasch irgendeins aus dem Bilder Pool?

  • Kommt drauf an was ist die besserer Wahl ?



    Ich kann zb. die Bilder skalieren (auf meine Grösse) oder wenn es einfacher ist, dann sollte die Script selber Kleinrechnen :)


    Es sollte nicht immer nur ein bestimmtes Bild angezeigt werden (bei hover) sonder, es gibt für jedes Bild "quasi" das doppelte, einmal eine lustige Bild und einmal eine normale Bild.

  • Also für die Anzeige habe ich hier ein Script..:


    In dem Besipiel Script müssen die Bilder im Ordner 'img' liegen und jeweils 'g1_t2.png' heißen <- Beispielname für das 2. Thumbnail in der 1. Beisüiel 'Gallerie'
    EDIT: in meinem order img sieht es so aus:

    Code
    g1_t1.png <- Thumbnail 1 für gallerie g1
    g1_t2.png <- Thumbnail 2 für gallerie g1
    g1_os.png <- Orginal für gallerie g1
    
    
    
    
    g2_t1.png <- Thumbnail 1 für gallerie g2
    g2_t2.png <- Thumbnail 2 für gallerie g2
    g2_os.png <- Orginal für gallerie g2


    Raus kommt dann sowas:

  • Ein bischen CSS und schon Geht beim Hovern alles klaro:


    EDIT: Habe nochmal was am CSS verändert..!

  • Machs dir nicht unnötig schwer und lass die Namen(bei großen Mengen) per PHP auslesen.


    Hier mal ein kleines Beispiel:



    PHP
    //Erlaubte Endungen in Array speichern
    	$allowedExtensions = ['.jpg', '.jpeg', '.gif', '.png'];
    
    	//Links in ein Array auslesen
    	$imagesLinks = glob('.verzeichnisname/der/bilder/*{'. implode('|', $allowedExtensions). '}', GLOB_BRACE);



    Übergabe an Javascript(im Script-Bereich)


    PHP
    //PHP-Array einem JS-Objekt übergeben
    			var bilder = '<?php echo json_encode($imagesLinks); ?>';
    			console.log(bilder);


    Ist jetzt alles nicht perfekt gelöst, ich will dir nur einen Überblick geben, wie das gehen könnte :)


    Und nun nur noch mit den entsprechenden Handlern für Hover/Click die Funktion bereitstellen :)

  • Und jetzt sortier mal bitte ganz einfach die Bilder nach Gallerie :D
    Ich hab auch daran gedacht aber so ist es dann schwierig das zeuch auseinander zu halten..


    WIESO javascript? ehrlich, es gibt Dinge die brauchen JS (nicht unbedingt aber hier ist es gerechtfertigt, z.B. Klick events aber hover ist via css eindeutig effizienter..



    Irgendwie muss er mitteilen was zu was gehört und in welcher reinfolge es angezeigt werden soll
    a) Dateiname
    b) in array fest gespeichert
    Fazit, es gibt keine Lösung die es ohne Aufwand löst!



    Deine Idee (nitamund) ist ein Großer Bild-Pool aus dem random Bilder gezogen und verarbeitet werden, dass ist aber nicht das was er will. Er will genau ein Bestimmtes mit einem Anderen Zusammen haben und ein drittes als Klick Bild..


    -einzige Möglichkeit ( und die ist seehr dirty ) wäre immer die drei Bilder in jeweils einen Ordner zu schmeißen und dann jeweils einen anderen Dateityp zu verwenden (eins gif, eins jpg und eins png) aber das gleicht sich meiner Meinung nach das weniger Arbeit durch Bilder konvertieren mit dem veranstalteten Pfusch keinesfalls aus!

  • Und jetzt sortier mal bitte ganz einfach die Bilder nach Gallerie :D
    Ich hab auch daran gedacht aber so ist es dann schwierig das zeuch auseinander zu halten..


    Hm,


    wenn man mehrere Galerien will muss man doch nur für jede einen eigenen Ordner haben den man in einem Array hinterlegt und dann per
    foreach für jede in einem mehrdimensionalen Array die Bilder ablegen. Und man hat dann einen Objekt/einen Assoziativen Array mit den
    Galerienamen als Schlüsseln , die die Pfade enthält.


    Zitat


    WIESO javascript? ehrlich, es gibt Dinge die brauchen JS (nicht unbedingt aber hier ist es gerechtfertigt, z.B. Klick events aber hover ist via css eindeutig effizienter..


    Natürlich ist beim hover Css schneller, aber das was er zudem plant ist ja eine Lighbox
    für die JavaScript benötigt wird. Und wenn beim hover immer ein andres Bild angezeigt werden soll,
    ist das mit reinem Css doch auch nicht möglich.(oder ??)


    Zitat


    Deine Idee (nitamund) ist ein Großer Bild-Pool aus dem random Bilder gezogen und verarbeitet werden, dass ist aber nicht das was er will. Er will genau ein Bestimmtes mit einem Anderen Zusammen haben und ein drittes als Klick Bild..



    Ich habe das oben ein wenig anders verstanden als du, ich habe geglaubt er will eine Art Slider dessen Bilder man beim klick in einer Lightbox
    vergrößert abbilden kann. Von einer fixen Zuordnung mit immer jeweils 3 Bildern habe ich nichts mitbekommen. Würd mich interessieren,
    was der Autor nun wirklich plant, den bei einem fixen Verhältnis von 3 Bildern ist das oben nicht sehr nützlich :D

  • Probier mal mein Beispiel aus.. dann siehst du wie ich es verstanden habe.. bis auf das noch keine Lightbox beim Klick (für das 3. Bild) zu verfügung steht..


    Wenn er einen Slider will. dann ahst du natürlich vollkommen recht das es Unnötig wäre sich so ein Aufwand zu machen.. :)


    Wie ich es Vestanden habe:
    Gannze viele Bilder nebeneinander
    Beim hovern über eins der Bilder soll ein dazugehöriges anderes statt dem 1. gezeigt werden.
    Wenn man draufklickt, soll das 1. Bild in Orginalgröße erscheinen.
    -meine Interpretation :D


    Zitat


    Es sollte Standardbilder auf der Seite angezeigt werden. Wenn ich über das Standardbild mit Maus gehe, dann sollte eine zweite Bild angezeigt werde und wenn ich das Bild anklicke, dann sollte (wenn möglich) im Lightbox meine Standardbild in Originalgrösse angezeigt werden.

  • Da haben wir beide ein wenig was andres reininterpretiert^^


    Aber wenn es so wie du meinst immer Gallerien zu je 3 Bildern sind, ist deine Variante
    natürlich eindeutig vorzuziehen. Würde dort nur noch der Ordnung halber für jede Galerie
    einen Ordner anlegen in denen dann je 3 Standardnamen existieren, aber das ist ja
    Geschmackssache ;)

  • Das mit den Ordnern hatte ich mir auch überlegt und ist ja auch kein Problem, aber ich dachte mir, wenn er schon die Bilder via PHP pusht ist es einfacher alles in eins und außerdem, wenn man via Dateiname sortiert, kommt alles nach Galerien gelistet... :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!