Lightbox + Image Slide Show
#1
Posted 21/08/2009, 17:30
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á.
#2
Posted 21/08/2009, 18:26
#3
Posted 24/08/2009, 11:28
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.
#4
Posted 24/08/2009, 11:47
<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">
#5
Posted 24/08/2009, 11:53
abs
#6
Posted 24/08/2009, 12:02
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
Edição feita por: DeeK, 24/08/2009, 12:08.
#7
Posted 24/08/2009, 12:08
Abs
#8
Posted 24/08/2009, 12:09
Tenta ae agora
#9
Posted 24/08/2009, 12:13
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.
#10
Posted 24/08/2009, 12:27
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 -
#11
Posted 24/08/2009, 13:47
Você testou aí e conseguiu ?
#12
Posted 24/08/2009, 14:12
Aqui dá certo.
Veja
www.salcam.com.br
Clica em Localização, e depois clica na imagem.
#13
Posted 24/08/2009, 15:20
#14
Posted 01/09/2009, 22:18
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.
1 user(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)