Lightbox navigation modifizieren

umfundisi

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

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Simbo

welches Lightbox Script benutzt du denn? Gibt ja mittlerweile ein dutzend Klone...

am besten auch nen Link zu deiner Seite...

umfundisi

lightbox 2

benutze lightbox 2

hier der link zu meiner Seite :
Anton Steenbock » Foto BÃ¼cher

hoffe das hilft dir weiter

Simbo

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

var objHoverNav = document.createElement("div");
objHoverNav.setAttribute('id','hoverNav');
[COLOR=Red]objImageContainer[/COLOR].appendChild(objHoverNav);


var objPrevLink = document.createElement("a");
objPrevLink.setAttribute('id','prevLink');
objPrevLink.setAttribute('href','#');
objHoverNav.appendChild(objPrevLink);


var objNextLink = document.createElement("a");
objNextLink.setAttribute('id','nextLink');
objNextLink.setAttribute('href','#');
objHoverNav.appendChild(objNextLink);

Alles anzeigen

Wobei du [COLOR=Red]objImageContainer[/COLOR] 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

umfundisi

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

Simbo

Zitat von umfundisi

du scheinst dich damit anschein ja schon beschäftigt zu haben ...hast du eventuell schon einen fertigen code für die lightbox ?

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

var [COLOR="Red"]objImageDetails[/COLOR] = document.createElement("div");
objImageDetails.setAttribute('id','imageDetails');
objImageData.appendChild(objImageDetails);


var objHoverNav = document.createElement("div");
objHoverNav.setAttribute('id','hoverNav');
[COLOR="Red"]objImageDetails[/COLOR].appendChild(objHoverNav);


var objPrevLink = document.createElement("a");
objPrevLink.setAttribute('id','prevLink');
objPrevLink.setAttribute('href','#');
objHoverNav.appendChild(objPrevLink);


var objNextLink = document.createElement("a");
objNextLink.setAttribute('id','nextLink');
objNextLink.setAttribute('href','#');
objHoverNav.appendChild(objNextLink);

Alles anzeigen

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

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #prevLink {  width: 66px; height:20px; float: left;  margin-bottom: 0.7em; background: url('../images/prevlabel.gif') no-repeat top left;}
#imageData #nextLink {  width: 66px; height:20px; float: right;  margin-bottom: 0.7em; background: url('../images/nextlabel.gif') no-repeat top right; }
#imageData #caption{ font-weight: bold; clear:both; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}

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.

umfundisi

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

var objImageDataContainer = document.createElement("div");
        objImageDataContainer.setAttribute('id','imageDataContainer');
        objImageDataContainer.className = 'clearfix';
        objLightbox.appendChild(objImageDataContainer);


        var objImageData = document.createElement("div");
        objImageData.setAttribute('id','imageData');
        objImageDataContainer.appendChild(objImageData);
    
        var objImageDetails = document.createElement("div");
        objImageDetails.setAttribute('id','imageDetails');
        objImageData.appendChild(objImageDetails);
    
    var objHoverNav = document.createElement("div");
objHoverNav.setAttribute('id','hoverNav');
objImageDetails.appendChild(objHoverNav);
    
    var objPrevLink = document.createElement("a");
        objPrevLink.setAttribute('id','prevLink');
        objPrevLink.setAttribute('href','#');
        objHoverNav.appendChild(objPrevLink);
        
        var objNextLink = document.createElement("a");
        objNextLink.setAttribute('id','nextLink');
        objNextLink.setAttribute('href','#');
        objHoverNav.appendChild(objNextLink);
        
        var objCaption = document.createElement("span");
        objCaption.setAttribute('id','caption');
        objImageDetails.appendChild(objCaption);
    
        var objNumberDisplay = document.createElement("span");
        objNumberDisplay.setAttribute('id','numberDisplay');
        objImageDetails.appendChild(objNumberDisplay);
        
        var objBottomNav = document.createElement("div");
        objBottomNav.setAttribute('id','bottomNav');
        objImageData.appendChild(objBottomNav);
    
        var objBottomNavCloseLink = document.createElement("a");
        objBottomNavCloseLink.setAttribute('id','bottomNavClose');
        objBottomNavCloseLink.setAttribute('href','#');
        objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
        objBottomNav.appendChild(objBottomNavCloseLink);
    
        var objBottomNavCloseImage = document.createElement("img");
        objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
        objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
    },
    
    //

Alles anzeigen

Simbo

Ich glaub das hat nix mit Javascript zu tun. Entferne mal den folgenden Block aus deiner lightbox.css:

Code

#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}

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

no64

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

umfundisi

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

umfundisi

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

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Lightbox navigation modifizieren

Jetzt mitmachen!