13 replies to this topic

[marcoo]

Opa galera, beleza?

Seguinte, não sei se existe uma galeria que tenha a propriedade dessas duas que estou tentando combinar, se alguem souber por favor me diga, enfim, vamos ao problema:

Estava querendo o modo de passar as fotos desta: http://www.dhtmlgood...lideshow-5.html (aplicação em http://www.dhtmlgood...ge-slideshow-5)

Só que em vez dela ampliar em um quadro ao lado, eu daria um display none na div do quadro, e gostaria que ela ampliasse como se ampliam com lightbox.

Tem alguma maneira ou terei que procurar outra galeria?

Grande abraço e muito obrigado desde já.

[Alex Hiroshi]

Eu olhei por cima, e pelo que vi, é só tirar o onclick dos links que chama a função showPreview() e colocar um rel="lightbox". Normalmente é com o atributo rel que os lightbox funcionam.

[marcoo]

Opa Alex, beleza?
Tentei botar normalmente como você falou, tirando o onclick e botando o rel do lightbox, mas não funcionou =(
Se souber alguma maneira de fazer ele funcionar ficaria muito agradecido, abs.

[Alex Hiroshi]

Chegou a escurecer a página? Uma coisa que eu vi agora, o link usando a galeria é assim:

<a href="#" onclick="showPreview('images/image10_big.jpg',this);return false;">

Eu falei apenas para adicionar o rel, mas é preciso colocar o caminho da imagem no href, assim:

<a href="images/image10_big.jpg" rel="lightbox">

[marcoo]

Sim, não chega nem a escurecer, não acontece nada =|
abs

[DeeK]

Mano tenta esse

salva esse arquivo "lightbox.css" abaixai separado
te mandei como anexo outras coisas que são usadas tbm no lightbox
salve eles numa pasta pra ficar tudo junto, mais facil
coloca isso pra chamar as funções e os scripts na página

<link rel="stylesheet" href="css-js/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="css-js/prototype.js"></script>
<script type="text/javascript" src="css-js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="css-js/lightbox.js"></script>

lightbox.css

#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(../imagens/prevlabel.gif) left 15% no-repeat; }#nextLink:hover, #nextLink:visited:hover { background: url(../imagens/nextlabel.gif) right 15% no-repeat; }#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: visible; 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; }

depois na imagem vc coloca

<a href='endereco_da_imagem' rel="lightbox"><img src='endereco_da_imagem'></a>

Attached Files

•  css_js.rar   44.18KB   5 downloads

Edição feita por: DeeK, 24/08/2009, 12:08.

[marcoo]

Tentei aqui e nada fera, acredito que não seja um problema de CSS, e sim uma incompatibilidade entre esses dois scripts. Como não entendo muito de javascript não faço idéia se seria mais fácil arrumar outra galeria ou solucionar essa incompatibilidade.
Abs

[DeeK]

Eu editei o tópico, tinha me esquecido de umas coisas
Tenta ae agora

[marcoo]

Amigo, vc alterou algo nos scripts ?
Porque aqui está tudo certinho, os scripts são chamados, o css também.
Se você alterou algo dentro de algum script aí pode ser.
Abraçao.

[DeeK]

Nao nao, alterei no tópico
tinha me esquecido de fazer upload dos arquivos
mas veja direito se o nome da pasta está certo
se no link vc ta chamando corretamente
eu uso ele, eh pra dar certo sim
e pode tirar da tag que chama o arquivo css o media='screen' adapte de acordo com sua pagina

qqr coisa, poste o que vc ta fazendo

vc pode ver que pra chamar os scripts na pagina está "css-js"

mas o nome do arquivo está "css_js"

vai ver vc extraiu com o mesmo nome do arquivo zipado

dae a pasta ficou com _ e na chamada deles o -

[marcoo]

Ele carrega tudo normalmente, eu vejo pelo firebug. O problema é que um script 'atrapalha' o outro.
Você testou aí e conseguiu ?

[DeeK]

Como assim um atrapalha o outro ??

Aqui dá certo.
Veja
www.salcam.com.br
Clica em Localização, e depois clica na imagem.

[marcoo]

mas não tem o image slide show alí amigão.

[Édipo Costa Rebouças]

Eu consegui fazer isso, mas com outros scripts, foram:

jquery
jquery.lightbox -> balupton edition
jquery.jcarousellite.js

O segredo foi dexar o lightbox carregar por ultimo( com o atributo defer ), pois o carousel clona os links, mas não clona os eventos. se vc deixar o lightbox por utimo, ele vai atribuir os eventos para os objetos já clonados.

só não mostro o site, pois ainda não foi pro ar.

Edição feita por: Édipo Costa Rebouças, 01/09/2009, 22:27.