Siga-nos em...
Follow us on Twitter Follow us on Facebook Watch us on YouTube
Registro

Alpha Servers
Resultados 1 a 6 de 6

Tópico: Imagens ampliada

  1. #1

    Avatar de kingrox
    Data de Ingresso
    Sep 2009
    Localização
    Mogi Guaçu SP
    Idade
    36
    Posts
    917
    Agradecido
    47
    Agradeceu
    39
    Peso da Avaliação
    25

    Smile Imagens ampliada

    Olha não sei o nome disso mas queria saber como se faz equele sistema de img q o aprendiz usa vc clica na imagem e ela amplia na tela, quem souber da uma força vlw

  2. #2

    Avatar de GhostMutante
    Data de Ingresso
    Sep 2009
    Localização
    between 'Brazil' and 'Japan'
    Idade
    42
    Posts
    7
    Agradecido
    1
    Peso da Avaliação
    0

    Padrão

    Manda uma url de exemplo, o endereço do site que tem o efeito que vc deseja.
    Acho que postar url não é permitido, me mande por MP.

  3. #3

    Avatar de GhostMutante
    Data de Ingresso
    Sep 2009
    Localização
    between 'Brazil' and 'Japan'
    Idade
    42
    Posts
    7
    Agradecido
    1
    Peso da Avaliação
    0

    Padrão

    Isso se chama LightBox.
    Uma UI em JavaScript.

    Uma breve dica de como utilizá-lo:

    Faça o download do arquivo: [Somente usuários registrados podem vem os links. ]


    Adicione o CSS e o JS contidos no arquivo acima, em sua página.
    Código:
    <link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="lightbox.js"></script>

    Para a imagem ser aberta com o efeito de modal, adicione no link a tag rel="lightbox", assim:
    Código:
    <a href="GhostMutante.jpg" rel="lightbox" title="GhostMutante"><img src="GhostMutante_thumb.jpg" /></a>

    Pronto.


    Espero ter ajudado, abraços!

  4. #4

    Avatar de kingrox
    Data de Ingresso
    Sep 2009
    Localização
    Mogi Guaçu SP
    Idade
    36
    Posts
    917
    Agradecido
    47
    Agradeceu
    39
    Peso da Avaliação
    25

    Padrão

    quando eu clico de vez ela ampliar ela abre em outra janela =/
    Obrigado a Ingredion Brasill
    Hidden Content
    Bem Vindo Nicholas, Deus te Abençoe!
    O Senhor é o meu Pastor, nada me faltará.

  5. #5

    Avatar de GhostMutante
    Data de Ingresso
    Sep 2009
    Localização
    between 'Brazil' and 'Japan'
    Idade
    42
    Posts
    7
    Agradecido
    1
    Peso da Avaliação
    0

    Padrão

    Citação Postado originalmente por kingrox Ver Post
    quando eu clico de vez ela ampliar ela abre em outra janela =/
    Isso não é difícil, se você tiver uma noção de javascript entenderá.

    Vamos lá.


    Certifique-se de que os arquivos lightbox.css e lightbox.js
    estejam na mesma pasta que a pagina o utilizará. As imagens que acompanham o arquivo também. Pode trocar a estrutura, mas lembre-se de respeitar isso quando adicionar o link do css e o scripit do js.


    Dentro da TAG Head adicione as linhas:
    Código:
    <link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="lightbox.js"></script>

    E, em toda TAG A (link) adicione a propriedade rel="lightbox", como no exemplo:
    Código:
    <a href="Temple_of_Love___Updated_by_Timmetrius.jpg" rel="lightbox" title="GhostMutante"><img src="180px-ArthasLichKingMerge.jpg" border="0"

    Fiz um teste enquanto postava:

  6. #6

    Avatar de CRASHADM
    Data de Ingresso
    Oct 2009
    Localização
    Brasilia
    Idade
    32
    Posts
    23
    Agradecido
    0
    Agradeceu
    0
    Peso da Avaliação
    0

    Padrão

    kingrox Como eu nao vi ele falar nada.
    se vocer quizer montar tipo uma galeria.
    vc tem que por o rel igual nas fotos da galeria.

    exemplo.
    Foto 1<a href="Temple_of_Love___Updated_by_Timmetrius.jpg" rel="lightbox" title="GhostMutante"><img src="180px-ArthasLichKingMerge.jpg" border="0"></a>

    Foto 2<a href="Temple_of_Love___Updated_by_Timmetrius02.jpg " rel="lightbox" title="GhostMutante"><img src="180px-ArthasLichKingMerge02.jpg" border="0"></a>
    Isso server quando vc tem uma foto é em vez de fechar a janela pra abrir outra e so aperta Next.

    <a href="Temple_of_Love___Updated_by_Timmetrius.jpg" rel="lightbox1" title="GhostMutante"><img src="180px-ArthasLichKingMerge.jpg" border="0"></a>
    as imagem poderao estar na mesma pagina mais nao irar parra da lightbox para lightbox1
    Espero que tenha ajudado e que tenha entendido.

 

 

Informações de Tópico

Usuários Navegando neste Tópico

Há 1 usuários navegando neste tópico. (0 registrados e 1 visitantes)

Tópicos Similares

  1. |Pedido| SLIDER COM VARIAS IMAGENS ?
    Por Reck no fórum Flood Livre
    Respostas: 2
    Último Post: 25-06-2015, 06:36 PM
  2. |Pedido| Imagens Shopping Daldegam
    Por StaticX no fórum Dúvidas|Pedidos
    Respostas: 2
    Último Post: 16-08-2012, 01:43 PM
  3. |Vídeo-aula| Teoria das Imagens
    Por nifle no fórum Vídeo-aulas
    Respostas: 0
    Último Post: 16-10-2011, 11:37 PM
  4. |Humor| Imagens engraçadas !
    Por GryphoN no fórum Humor
    Respostas: 0
    Último Post: 16-11-2010, 06:30 PM

Marcadores

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •