1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Lightbox navigation modifizieren

Dieses Thema im Forum "Design" wurde erstellt von umfundisi, 26. Oktober 2007.

  1. umfundisi

    umfundisi Active Member

    Registriert seit:
    11. März 2007
    Beiträge:
    25
    Zustimmungen:
    0
    hallo
    ich hab schon ewig rum gegoogelt und gesucht aber bin leider nicht fündig geworden ....!
    Ich würde gerne die Lightbox navigation also die pfeil grafiken bei der diashow(für next image und previous image)die meiner meinung nach etwas unscheinbar beim rollover erscheinen, permanent unter die Fotos platzieren.
    hört sich eigendlich sehr simple an aber mit css hab ichs nicht hin bekommen ....
    das einzige was geht ist über die % zahl die Pfeilgrafiken inherlab der Fotos horizontal zuverscheiben dann verdecken sie aber logischerweise immer noch einen kleinen Teil des fotos .

    hat jemand eine lösung wie man es schaffen könnte die navigation z.b neben den close button zu setzen?

    danke
    umfundisi
     
    #1 umfundisi, 26. Oktober 2007
  2. Simbo

    Simbo Well-Known Member

    Registriert seit:
    6. September 2006
    Beiträge:
    134
    Zustimmungen:
    0
    welches Lightbox Script benutzt du denn? Gibt ja mittlerweile ein dutzend Klone...

    am besten auch nen Link zu deiner Seite...
     
    #2 Simbo, 26. Oktober 2007
  3. umfundisi

    umfundisi Active Member

    Registriert seit:
    11. März 2007
    Beiträge:
    25
    Zustimmungen:
    0
    #3 umfundisi, 26. Oktober 2007
  4. Simbo

    Simbo Well-Known Member

    Registriert seit:
    6. September 2006
    Beiträge:
    134
    Zustimmungen:
    0
    So...

    Also die beiden A-Elemente #prevLink und #nextLink sind ja Unterelemente des DIV-Elements #hoverNav, das wiederum ein Unterelement von DIV#imageContainer ist.
    DIV#imageContainer ist immer so groß wie das angezeigt Bild.

    A#prevLink und A#nextLink haben jeweils die Höhe 100% (die Höhe des Elternelements DIV#imageContainer abzüglich dessen padding), also kann deren Hintergrundbild nicht über DIV#imageContainer hinausgehen.
    Man könnte die die Höhe von den beiden A-Elementen auf z.B. 110% erhöhen und die Hintergrundbild mit "bottom" nach unten ausrichten. Allerdings kannst du dann nicht genau positionieren, da ja die Höhe des Bildes immer variiert.
    Ausserdem bezweifle ich, dass das Javascript, das die Größe von DIV#imageContainer anpasst, zulässt, dass der Inhalt von DIV#imageContainer über die Größe des Bildes hinausgeht.

    Alternativ könnte man die Elemente #prevLink und #nextLink bereits bei der Erstellung der Lightbox-Elemente an eine andere Stelle verschieben, beispielsweise als Unterelement von DIV#imageData oder DIV#bottomNav (in diesem Element ist auch der Close-Link enthalten).
    Das heisst aber auch, dass der User nicht einfach auf die linke oder rechte Hälfte des Bildes klicken kann um zwischen den Bildern zu navigieren sondern wirklich nur auf die Navigations-Icons.

    Zum Verschieben von DIV#hoverNav musst du in der Datei lightbox.js in deinem Lightbox-Plugin Verzeichnis folgende Zeilen anpassen und an die jeweilige Stelle verschieben:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wobei du objImageContainer dann durch das jeweilige Objekt ersetzen musst, in das du DIV#hoverNav einfügen möchtest.
    Das CSS musst du dann natürlich auch noch entsprechend anpassen (alles was #hoverNav, #prevLink, #nextLink betrifft).

    ...anscheinend bin ich grade in Schreiblaune...
    Ich hoffe das hilft dir weiter...

    Gruß

    Simon
     
    #4 Simbo, 26. Oktober 2007
  5. umfundisi

    umfundisi Active Member

    Registriert seit:
    11. März 2007
    Beiträge:
    25
    Zustimmungen:
    0
    jo danke erstmal für die ausführliche hilfe ....
    ich schaff es aber trotzdem nicht das beide also prev und next link nebeneinander zentriert unterm bild stehn ......

    irgendwie lassen sie sich nicht gut positionieren ..... zwar hab ichs jetzt nach deinen tipps geschafft das zumindest schon mal den next link unters bild zu kriegen aber auch nicht wirklich an die richtige stelle .... der prev link bleibt leider immer noch im imagecontainer .....

    scheint ja doch etwas schwieriger zu sein als ich gedacht hätte ...hehe

    das objekt im JS zu vertauschen ,hat nicht hingehauen ..sowie ich dich verstanden habe sollte man einfach wenn man dann die prev und next divs z.b als unter elemente von imagedata hat , objImagecontainer duch objImagedate ersetzen....

    ich muss zugenben das meine css kenntnisse wohl nicht wirklich ausreichen ....von js ganz zuschweigen ....
    du scheinst dich damit anschein ja schon beschäftigt zu haben ...hast du eventuell schon einen fertigen code für die lightbox ?

    danke

    anton
     
    #5 umfundisi, 27. Oktober 2007
  6. Simbo

    Simbo Well-Known Member

    Registriert seit:
    6. September 2006
    Beiträge:
    134
    Zustimmungen:
    0
    Ne, hab ich nicht, hab nur bei dir kurz drübergekuckt... :)

    Den oben genannten JavaScript-Block musst du im Quelltext unter das Objekt verschieben, an das es angehängt werden soll (weil das Eltern-Objekt schon existieren muss).
    Ich würds nicht bei imageData mit rein, sondern in dessen Unterobjekt imageDetails.
    In deinem Code müsste das dann so aussehen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    In deinem Stylesheet hast du ja schon was angepasst, aber da ist noch ein Block für #prevLink,#nextLink - der muss raus.

    Die Zeilen weiter unten im CSS müssten dann so aussehen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Gruß

    Simon

    [edit]

    achja, #prevLink und #nextLink brauchen dann natürlich auch ne feste Höhe im CSS. Keine Ahnung wie hoch dein Bild ist, ich habs mal auf 20px gesetzt.
     
    #6 Simbo, 28. Oktober 2007
    Zuletzt bearbeitet: 28. Oktober 2007
  7. umfundisi

    umfundisi Active Member

    Registriert seit:
    11. März 2007
    Beiträge:
    25
    Zustimmungen:
    0
    hat soweit hingehauen

    yeah ! super hat soweit hingehauen nur geht der naviclose button nich mehr !? (irgend etwas musste ja noch schief gehn heheh )
    alos hab schon mal n bischen rum probiert aber mit JS is das bei mir echt nur try and error ...wobei der error teil wohl der auschlaggebende ist ....

    ich dachte es lieg daran das nun das Hovernav objekt zwischen bottomnave und imagedata steht .... aber naja wie gesagt ..error error error ..heheh

    vielleicht kannst du mir ja noch n letztes mal auf die sprünge helfen .....
    danach hast e auf jdenfall ne paar bier bei mir gut !

    hier noch mal mein js code ....

    gruss und danke

    anton

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #7 umfundisi, 31. Oktober 2007
  8. Simbo

    Simbo Well-Known Member

    Registriert seit:
    6. September 2006
    Beiträge:
    134
    Zustimmungen:
    0
    Ich glaub das hat nix mit Javascript zu tun. Entferne mal den folgenden Block aus deiner lightbox.css:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Durch die absolute positionierung und 100% höhe/breite überlagert #hovernav sonst einfach die Close-Links.
    Ohne die CSS Anweisungen müsste es gehen.

    Die Navigationslinks sind dann auch innerhalb des weissen Kastens und nicht wie jetzt am linken/rechten Bildschirmrand.

    Gruß

    Simon
     
    #8 Simbo, 1. November 2007
  9. no64

    no64 Well-Known Member

    Registriert seit:
    21. April 2007
    Beiträge:
    54
    Zustimmungen:
    0
    ich habe zwar hier nichts hinzuzufügen....
    ...nur eine kleine Frage zu der Lightbox integration bei Umfundisi - ist das ein Galerie Plugin, das du da auf deiner Seite benützt, mit Anzeige der Thumbnails?
    Ich bin nämlich auf der Suche nach einem Plugin oder so, damit ich Galerieen anlegen und die Thumbnails in einen Beitrag setzen kann.

    Danke
     
    #9 no64, 5. November 2007
  10. umfundisi

    umfundisi Active Member

    Registriert seit:
    11. März 2007
    Beiträge:
    25
    Zustimmungen:
    0
    hi simon
    jetzt läufts perfekt danke nochmal !!
    der closebottom funkzioniert und die pagenavigation ist auch im fenster mitintigriert ,ich musst nur noch mal die reihen folge im JS ändern ...damit das fenster sich nicht nach unten auslegt.


    ...ich pack hier nochmal den kompletten js code und das css als zip zum runterladen auf den server ....., für alle die sich nicht erst durch den post kämpfen wollen ....


    gruss

    anton
     
    #10 umfundisi, 6. November 2007
  11. umfundisi

    umfundisi Active Member

    Registriert seit:
    11. März 2007
    Beiträge:
    25
    Zustimmungen:
    0
    ihc benutz das imagebrowser plugin das ist zum thumpnail erstellen ganz gut....
    um es benutzen zu können musst du bei bei wordpress unter "Benutzer"
    den : Beim Schreiben den WYSIWYG-Editor benutzen. button ausschalten

    gruss

    anton
     
    #11 umfundisi, 6. November 2007
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden