Jump to content
lamounier

Galeria através de uma planta de casa

Recommended Posts

Bom dia, tive uma ideia para uma galeria de fotos aonde teria uma planta da casa e quando o usuário passasse o mouse em cima de cada cômodo iria aparecer em uma outra div ou modal a foto do cômodo.

como nessa imagem demonstrativa

 

Spoiler

t3vnd74x.thumb.jpg.fbb22ba572fee5202d21b734144e8872.jpg

 

imagino que ir criando div colocando um hover daria mas para fazer mas iria quebra o layout dependendo da resolução.

Alguém conhece alguma ferramenta que faça isso?

 

 

Share this post


Link to post
Share on other sites

Estude o código fonte neste link para uma galeria.

 

NOTA: Observe que na primeira vez que abre a foto de um cômodo o efeito de abertura é "fade",
mas na segunda vez o efeito não existe. Deixei assim de propósito para que você acrescente javascript com a finalidade de corrigir esse comportamento e obter o efeito "fade" em todas as aberturas de foto.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Alessandro Bodão
      Boa tarde Amigos!
       
      Criei um tema wordpress pro meu cliente e ele precisa de uma galeria de imagens na qual possa administrar e publicar novas imagens, como não tenho muito conhecimento de sistemas, php, etc procurei por plugins... mas não consigo aplicar eles à página de jeito nenhum. To desesperado vcs poderiam me ajudar a criar uma galeria do 0 ou resolver o erro do plugin não funcionar???
    • By helkton
      Olá galera blz com ocêis rss
      seguinte como faço para chamar a galeria e ou a câmera na minha app. Tipo igual o olx tem uma imagem que ao clicar nos da a opção de abrir a câmera e tirar uma foto ou abrir a galeria e escolher uma foto.
      Olhem o que tenho..
      btnCamera.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); startActivityForResult(Intent.createChooser(intent, "Tire uma Foto"), CAMERA_PICTURE); } }); este botão Onclick me chama a câmera pega a foto tirada e me mostra aqui...
      public void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); Bitmap bitmap = (Bitmap)data.getExtras().get("data"); imgProd.setImageBitmap(bitmap); } agora to tentando esse outro botão para abrir a galeria....
      btnGaleria.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(Intent.ACTION_GET_CONTENT); intent.setType("image/*"); startActivityForResult(intent, SELECT_PICTURE); } }); Bom este botão me chama a galeria para eu escolher a imagem porem não me retorna a imagem selecionada como no botão btnCamera acima
      Agora como eu faço para abrir com um único botão ele me dar a opção de escolher tirar uma foto ou pegar da galeria???
      agradeço aos camaradas
    • By Zaelcs
      Olá, esse é meu primeiro post, eu sou MUITO novato com o desenvolvimento de sites, na realidade esse é meu primeiro trabalho sério, sendo que antes a unica coisa que eu programei eram scripts de jogos e algumas coisas pra minecraft haha!

      O meu problema é o seguinte, eu sou um animal  eu preciso criar um site para uma imobiliaria, no qual precisaria incluir uma "biblioteca" de itens onde cada item seria um imóvel com diversas fotos e videos, a "biblioteca" precisaria de uma ferramenta de busca e que pudessem ser separados os itens por tags (n° de quartos, vagas pra carro), além disso seria interessante se houvesse uma interface "user-friendly" para os administradores da imobiliária adicionarem novos imóveis... 
       
      Estou esperançoso de que eu possa fazer tudo isso apenas com html e css, pois eu creio que só necessitaria usar javascript caso precisasse de carrinho de compras e um mecanismo de pagamento... mas não, o contato será feito via telefone ou e-mail entre o comprador e os próprios corretores.
       
      Espero não estar sendo muito folgado... é minha primeira tentativa nesse ramo que eu AMO, mas nunca tive oportunidade de adentrar.
    • By GiselePassoni
      Bom dia a todos do forum.
      Comecei a pouco tempo com laravel e ainda me perco bastante com ele. Preciso desenvolver uma galeria de fotos responsiva para as notícias cadastradas. Ao acessar uma noticia, aparece o texto referente à notícia e sua respectiva galeria de fotos. 
      A listagem de todas as notícias (titulo) com paginação, eu consegui fazer. Minha dúvida é como vou fazer para ao clicar em um dos títulos, abrir a noticia com o texto, etc e a galeria.
      Teria algum curso online que vcs poderiam me indicar? Ou alguma vídeo-aula? Procurei, mas não achei nada que pudesse me ajudar!
      Desde já agradeço!
    • By bia_cabele
      Boa noite, estou criando uma galeria, usando html e css,  e quero fazer uma animação quando clico na miniatura que fica na parte inferior, sendo assim acontece uma animação rolando para baixo automaticamente, para isso é necessário um códico JavaScript e Jquery, mas quando eu coloco o códico não funciona, vou deixar imagens de como estou fazendo e o link de onde fiz.
       
      link do vídeo,-- se colocarem no final vão saber como que eu quero--   tirem espaços : https://ww w .youtube.  com/wat ch?v=Q4odePg5zB8&t=498s
       
      Aqui está o código JavaScript:
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>    

              </script>
              <script type="text/javascript">
                  $(document).ready(function(e) {
                  $('a').click(function(e){
                          $('#rolagem').animate({
                                  scrolltop: $( $.attr(this, 'href') ).offset().top + $('#rolagem').scrolltop()
                          }, 2000);
                          return false;
                  });
          });
              </script>
       
      SOU NOVO AQUI, SE EU FIZ ALGO ERRADO ME AVISE
       
      Agradeço desde já´ :)
       


×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.