[Resolvido] LigthBox - Colocar botao Closed no topo

[snake_rox 0]

Olá galera, estou com um duvida...uso o LigthBox que por sinal me ajuda demais...e gostaria de colocar o Closed na parte superior na direita. Pois de default veem na parte inferior direita.

 

Ja procurei em mtos lugares e ate o momento não achei.

 

Se alguem puder me ajudar eu ficarei grato.

 

att

SnAkE

[Anderson Ferminiano 2]

poste o código fonte...

[snake_rox 0]

lightbox.css Creio eu que esteje aqui a solução. Só que não achei

#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;}

#nextLink { right: 0; float: right;}

#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; }

E ele tambem contem + 5 arquivos .js !!!

 

Se precisar eu posto aqui tambem.

 

att

Eleno

[srnetcave 1]

function set_interface

 

esta assim... pode ver que a parte a DIV id lightbox-container-image-data-box esta sendo criada depois da DIV lightbox-container-image-box...."a parte em negrito do primeiro codigo"

function _set_interface() {
// Apply the HTML markup into body tag
$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div></div>');

você tem q deixar assim...oq você precisa fazer e apenas colocar a DIV data-box antes da DIV container-image-box...

so vai ficar meio estranho, pois ao inves da DIV data deslizar para baixo e a imagem ficar parada na tela...oq vai acontecer vai ser que a imagem ira deslizar para baixo quando a chama a function _show_image_data(). pois esta esta fazendo isso

$('#lightbox-container-image-data-box').slideDown('fast');

...entende fazendo com q a imagem deslize ao aparecer...

function _set_interface() {
// Apply the HTML markup into body tag
$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div></div>');

[snake_rox 0]

Primeiramente obrigado pela ajuda!!

 

Entao amigo, não teria como arrumar isso, tipo tirar esse "deslizar" e colocar o fechar lá em cima?

 

att

Eleno

[snake_rox 0]

Tópico resolvido.

 

Obrigado a todos!

[hargon 64]

Que bom que resolveu. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Se possível poste a solução, pois poderá ajudar outros membros com a mesma dúvida.

[snake_rox 0]

Que bom que resolveu. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Se possível poste a solução, pois poderá ajudar outros membros com a mesma dúvida.

Na verdade não resolvi essa questão e sim mudei de alternativa, estou a procura agora de como abrir o Ligthbox desde o topo da tela.

 

att

SnAkE