Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia, eu novamente me questionando... ainda estou no projeto da professora lá, e ela quer uma "galeria de fotos". sugeri o lightbox, mostrei para ela como ficava e ela gostou. bem, só que no momento, ela me pediu para cortar um pedaço da imagem dela, e por como imagem frontal no ligthbox.
Para entender melhor, fiz duas imagens :
/applications/core/interface/imageproxy/imageproxy.php?img=http://img138.imageshack.us/img138/2141/profgina.png&key=05d8e7965562df35e4abd71595e7dfadd0947d16e417cb17740925ff6ecccb55" alt="Imagem Postada" />
/applications/core/interface/imageproxy/imageproxy.php?img=http://img840.imageshack.us/img840/2842/dfvgbnm.png&key=bbe9699333a98f5aa010caf6de8851664a7f3fb9934e2332711d27426e33f656" alt="Imagem Postada" />
Bem, se vcs entendem, o que quero fazer, é que quando a pessoa está visitando esta página, veja apenas uma parte da foto dela, e que quando clicasse na imagem, ela abrisse inteira. a questão é que não sei qual tag devo por na imagem pequena, que vai ficar no layout, e qual seria a outra tag que 'pegaria', a imagem inteira do arquivo...
vcs podem me ajudar ?
Grata.
Hmm.. e como ficaria a tag? eu gostaria de por um 'pedaço' da imagem, isso mesmo, e que quando o usuário clicasse, o lightbox carregasse com a imagem inteira, não aquele 'pedaço' somente;
<a href="pedaçodaimagem" img src="imagemtotal" rel="lightbox[roadtrip]">image #1</a>assim ficaria ?
Não não querida,
html é bem simples...
a ancora ( <a> ) direcione para a imagem completa
assim: <a href="imagemcompleta.jpg" rel="lightbox">e dentro da ancora coloque a imagem cortada normalmente:
<img src="imgcortada.jpg" alt="imgcortada" />
Só isso... lightbox é simples simples.... se quiser um mais bonitinho eu gosto muito de usar fancybox
fancybox.net se não me engano
;)
Veja se ajuda.
Você pode utilizar a mesma imagem tanto no LightBox quanto na página mostrar apenas parte dela, para isso, utilize um elemento com tamanho definido e um "overflow:hidden", ex:
.slice {
width:400px;
height:60px;
overflow:hidden;
}<div class="slice">
<a href="imagem.jpg" rel="lightbox"><img src="imagem.jpg" width="400" height="400" /></a>
</div>Desta forma, mostrará na div apenas 60px de altura da imagem. Att.
Existem alguns "problemas" no que o amigo ai de cima disse:
A imagem no tamanho real demora mais para carregar a pagina ( uma imagem pequena pode chegar a menos de 10kb )
Limitar dentro de uma div vai fazer com que você tenha que colocar mais código dentro da sua pagina e apenas da maneira que ele especifica não será possível escolher por exemplo a parte central da imagem... apareceria somente a parte superior esquerda ( os primeiros 400x60 px ), que para pode selecionar qualquer parte entraria mais código complicando ainda mais sua vida...
EU acredito que o mais fácil seria abrir a imagem no photoshop ( ou qualquer editor que você use ) deixar a imagem do tamanho desejado com o recorte desejado, salva-la e pronto use a miniatura na pagina e direcione o href para a imagem completa.
Ahhhh!
assim então :
<a href="imagemgrande.png" rel="lightbox" title="imagemgrande"><img src="imagempequena.png"/> </a>
?
acho que é. vou tentar (:
e gostei daquele Fancybox - bem legal (:
Isso mesmo!
;)
posta ai qualquer duvida ou encerra o topico se estiver ok. abraços!
Não entendi muito bem...
mas se na miniatura ( onde voce clica para abrir o lightbox ) voce quer que a imagem fique cortada ou até mesmo outra imagem, não tem problema... apenas utilize um href para o link da imagem que ao abrir o lightbox a imagem vai abrir completa.