Butoanele NEXT si PREV nu apar in Lightbox!


Lyvyoo


Hello,
M-am chinuit toata noaptea si nu i-am dat de cap problemei. E simplu, cand cineva vede o poza la mine pe site vreau sa apara "next" pe poza curenta si sa poata apasa pt a trece la urmatoarea ( e si cazul lui "prev"). Probabil multi dintre voi folosesc acest script java - Lightbox.
E posibil sa fie din CSS_ul lui lightbox. Eu am incarcat pictogramele in directorul de imagini si am facut localizarea corecta in css:

CODSURSA
#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;background: url(images/prevlabel.gif) left 15% no-repeat;}
#nextLink { right: 0; float: right;background: url(images/nextlabel.gif) right 15% no-repeat;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }    
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}         

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


Nu s-a mai confruntat nimeni cu problema asta?
Link-ul galeriei foto este acesta: http://www.liviufratila.ro/foto.html

Merci mult,
Mr.Jinx
în lightbox.js trebuie să pui calea spre locul unde ai tu imaginile alea, în cazul în care nu sunt în locul default (mai mult ca sigur din moment ce spui că nu le afișează)
 
Lyvyoo
Dar "loading.gif" si "closelabel.gif" fac parte din aceeasi ciorba. Sunt in acelasi loc cu prev si next si sunt afisate. Numai astea doua nu... toate imaginile pe care le am sunt in images/..... deci nu am o problema cu redenumirea folderului sau cu alta cale de directoare.
Am pus si js-ul atasat in caz ca trebuie
Mr.Jinx
auzi, acum am dat un ochi la linkul pus de tine...tu vrei ca pentru toate imaginile alea când deschizi una dintre ele să ai link next/prev bănuiesc. păi în cazul ăsta de ce nu le-ai asociat pe toate ca fiind aceeași galerie?!

scris foarte clar în documentație, pentru image set trebuie ca linkurile să aibă atributul rel la modul:

<a href="images/image-1.jpg" rel="lightbox[nume-set-imagini]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[nume-set-imagini]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[nume-set-imagini]">image #3</a>
Lyvyoo
CITAT (Mr.Jinx @ 3rd November 2009, 14:35) *
auzi, acum am dat un ochi la linkul pus de tine...tu vrei ca pentru toate imaginile alea când deschizi una dintre ele să ai link next/prev bănuiesc. păi în cazul ăsta de ce nu le-ai asociat pe toate ca fiind aceeași galerie?!

scris foarte clar în documentație, pentru image set trebuie ca linkurile să aibă atributul rel la modul:

<a href="images/image-1.jpg" rel="lightbox[nume-set-imagini]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[nume-set-imagini]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[nume-set-imagini]">image #3</a>


Ori esti un geniu ori nu ma prea pricep eu la webdesign smile.gif Cred ca ambele variante sunt valabile smile.gif)
Am mai zis-o, mi-am ridicat pe propriile puteri site-ul dintr-un template. Se vede probabil si din sursa lui varza... Insa pentru ce am eu nevoie e suficient...

Revenind ontopic: A fost neatentia mea intradevar, nu am citit pana la capat instructiunile lightbox. Am respectat codul de mai sus si functioneaza derularea pozelor insa tot nu apare next si prev. Dar daca dau click pe locurile in care ar trebui sa se afle aceste butoane, pozele se deruleaza. Deci functia este implementata insa butoanele sunt invizibile. Mai ai rabdare si pt asta?

A trebuit sa fac si o mica modificare fata de instructiuni unde linia de cod arata ca cele de mai sus. La mine in site, daca inainte de "image #1" adaugam semnul ">" dreamweaver imi colora randul in negru in loc de verde, transformandu-l in scris normal si nu in cod. Acum arata cam asa codul meu: <a href="images/IMG_9690.jpg" rel="lightbox[profi]"image #1 title="Relax"><img src="images/IMG_9690Mic.jpg" border=0 alt=""/></a>
Mr.Jinx
din câte văd eu, nu-ți găsește imaginile la adresele specificate în fișierul css: images/nextlabel.gif și, respectiv, images/prevlabel.gif. deci verifică să fie acolo aceste imagini wink.gif
Lyvyoo
@CuteGuy care imi trimisese PM - Daca sterg linia
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
din css-ul lightbox, nu numai ca tot nu apar butoanele dar se dezactiveaza si functia de a apasa pe poza si a trece la urmatoarea. Deci ajung de unde am plcat.

@Mr. Jinx - iti atasez un screenshot dupa ftp-ul site-ului meu. Sunt prezente butoanele impricinate, alaturi de "close" si celelalte. Am incercat sa schimb in css calea de acces, punand ca in screenshot public_html/images/nextlabel.gif, desi nu e nevoie de prima parte cu public_html. Rezultatul=0 sad.gif

Multumesc pentru eforturi. Nu stiu daca se mia poate face ceva...

LE: Acum am primit si un raspuns de pe alt forum strain, pe care il voi studia imediat:
our link for for the images is incorrect.

transparent url(/images/nextlabel.gif) no-repeat scroll right 15%

The public html folder is just for your ftp.

That goes here
Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;background: url(/public_html/images/prevlabel.gif) left 15% no-repeat;}
#nextLink { right: 0; float: right;background: url(/public_html/images/nextlabel.gif) right 15% no-repeat;}
#prevLink:hover, #prevLink:visited:hover { background: url(/public_html/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/public_html/images/nextlabel.gif) right 15% no-repeat; }


the code you have above is not in your live css.



REZOLVAT!
MULTUMESC MR. JINX SI CUTEGUY PT. SPRIJIN!!!!!
 
Reclama
In curand... autoevolution.ro

Teste, stiri, ghiduri, jurnale, forum si multe altele!
Aceasta este o versiune simplificată a paginii originale. Pentru a vizita versiunea originala click aici.