CSS Botões de banco de dados com imagem num site

Juliana Sphynx · 1 de novembro de 2018

Olá povo!

Alguem pode me ajudar? Tenho um site simples que queria colocar imagens no lugar das palavras do menu, mas por ser em banco de dados não estou conseguindo fazer com que as imagens ali funcionem como botões.

O site é o seguinte: http://www.aves.jsphynx.com

Segue aqui o código do menu:


   
    <!-- Portfolio -->
    <section id="portfolio" class="page">
      <div class="container">
		<div class="row">
          <div class="col-md-12 title-page text-center build">
            <h2>Ordens</h2>
            
          </div>
        </div>  
		<div class="row">
			<div class="metro">
				<div class="col-md-10 col-md-offset-1">
				<div class="build">
					<ul id="filterOptions" class="clearfix">
<li class="cur"><a class="btn btn-link linear" href="#" data-group="all">Todas</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Accipitriformes">Accipitriformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Anseriformes">Anseriformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Apodiformes">Apodiformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Caprimulgiformes">Caprimulgiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Cariamiformes">Cariamiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Cathartiformes">Cathartiformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Charadriiformes">Charadriiformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Ciconiiformes">Ciconiiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Columbiformes">Columbiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Coraciiformes">Coraciiformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Cuculiformes">Cuculiformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Eurypygiformes">Eurypygiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Falconiformes">Falconiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Galbuliformes">Galbuliformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Galliformes">Galliformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Gruiformes">Gruiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Nyctibiiformes">Nyctibiiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Opisthocomiformes">Opisthocomiformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Passeriformes">Passeriformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Pelecaniformes">Pelecaniformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Phaethontiformes">Phaethontiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Phoenicopteriformes">Phoenicopteriformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Piciformes">Piciformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Podicipediformes">Podicipediformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Procellariiformes">Procellariiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Psittaciformes">Psittaciformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Rheiformes">Rheiformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Sphenisciformes">Sphenisciformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Steatornithiformes">Steatornithiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Strigiformes">Strigiformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Suliformes">Suliformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Tinamiformes">Tinamiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Trogoniformes">Trogoniformes</a></li> 
<li class="cur"><a class="btn btn-link linear" href="#" data-group="Hibridas">Híbridas</a></li> 
<li class="cur"><a class="btn btn-link linear" href="#" data-group="Ameacadas">Ameaçadas</a></li> 
</div>
				</div><!--end-col-->
            </div><!--end-col-->
		</div>
  <div class="row">
			<div class="col-md-10 col-md-offset-1">
			<div class="row">
			<div class="main-folio clearfix metro" id="grid">

obs: o site está bem pesado para carregar e por isso quero ocultar todas as fichas de aves e fazer das palavras apenas botões com link para cada grupo de imagens de cada ordem (o problema está apenas em fazer com que o botão funcione sendo uma imagem).

Obrigada!

washalbano · 1 de novembro de 2018

Olá!
Não entendi!
O menu é o 1 ou 2?
As imagens são o 3, né?

Juliana Sphynx · 1 de novembro de 2018

1!

washalbano · 1 de novembro de 2018

Então é só percorrer a variável que contém o resultado da busca ao database, e para cada resultado, gerar um item de menu desses colocando a imagem no lugar do texto.

Juliana Sphynx · 2 de novembro de 2018

1 hora atrás, washalbano disse:

Então é só percorrer a variável que contém o resultado da busca ao database, e para cada resultado, gerar um item de menu desses colocando a imagem no lugar do texto.

Essa é a parte q não sei fazer

DiF · 2 de novembro de 2018

@Juliana Sphynx Olá, sinceramente? As letras renderizadas em forma de texto são mais leves e mais rápidas ao serem carregadas, comparada a imagens.

Mas se você faz questão de usar imagens, você precisa criar um campo extra na sua tabela que contem estes nomes. Este campo extra terá a URL da imagem ou o nome da imagem. assim você pode percorrer sua tabela e colocar as imagens.

Veja um exemplo bem hipotético.

Tabela:

ID menu_nome  menu_imagem
1   Cachorros  cachorro.jpg
2   Gatos      gato.jpg
3   Lobos      lobo.jpg
4   Ursos      urso.jpg

Veja que a tabela contém o nome do menu e imagens.

Aí bastaria percorrer desta forma:

<ul class="menu">
<?php
$consulta = mysqli_query($conexao,"SELECT id, menu_nome, menu_imagem FROM tabela")
while($menu = mysqli_fetch_object($consulta)):
   //concatena a pasta das imagens com o nome da imagem no banco de dados
   $imagem = "imagens/" . $menu->menu_imagem; 
   echo "<li><img src='$imagem' alt='$menu->menu_nome'/> </li>"; 
endwhile;

?>
</ul>

Veja que a iteração da tabela coloca o elemento <li> em um loop colocando a imagem em cada elemento e como "alt" o nome do menu.

Basicamente é isso que você precisa fazer.

Mas pense, é realmente necessário carregar em imagens? você disse que são muitas, muitas imagens diminuem o desempenho.

Então o que eu acho é que você deveria manter o menu em texto, mas fazer com que o conteúdo seja carregado dinamicamente, somente quando o usuário requisitar.

Juliana Sphynx · 2 de novembro de 2018

@DiF eu pensei nessa parte tb de colocar apenas os nomes mesmo, mas nem isso estou fazendo direito. Não sei como apenas esconder as fotos da home e deixar elas aparecendo apenas quando chamadas pelo menu

<!DOCTYPE html>
<html lang="en">
  <head>
  <link rel="icon" href="images/icone.png" type="image/icone.png" />
<link rel="shortcut icon" href="images/icone.png" type="images/icone.png" />

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>JSphynx.com</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Add custom CSS here -->
	 <link href="css/ekko-lightbox.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
        <style type="text/css">
<!--
.style1 {color: #000000}
-->
        </style>
</head>

  <body>
  <div id="boxWrapp">
    <a href="http://www.jsphynx.com" class="logo-wrapp"><img src="img/logo.png" alt="logo" class="logo" /></a>
    <!-- Side Menu -->
    <a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <a id="menu-close" href="#" class="btn btn-clear pull-right toggle"><img src="img/close.png" alt="close" /></a>
        <li><a href="#home"><i class="fa fa-home"></i>HOME</a></li>
        <li><a href="http://www.jsphynx.com/"><i class="fa fa-picture-o"></i>PORTFÓLIO</a></li>
        <li><a href="#about"><i class="fa fa-user"></i>SOBRE </a></li>
        <li><a href="#about"><i class="fa fa-envelope"></i>CONTATO </a></li>
       
      </ul>
    </div>
    <!-- /Side Menu -->
  
    <!-- Full Page Image Header Area -->
    <header id="home" class="header">
		<div class="title-home">
			<h1>Aves do Brasil</h1>
		</div>
    </header>
    <!-- /Full Page Image Header Area -->
  
  
   
    <!-- Portfolio -->
    <section id="portfolio" class="page">
      <div class="container">
		<div class="row">
          <div class="col-md-12 title-page text-center build">
            <h2>Ordens</h2>
            
          </div>
        </div>  
		<div class="row">
			<div class="metro">
				<div class="col-md-10 col-md-offset-1">
				<div class="build">
					<ul id="filterOptions" class="clearfix">
                      
                      //Todo o menu das ORDENS, do qual queria fazer apenas um ícone para cada um, mas por enquanto vou deixar assim mesmo e apenas tirar as fotografias grandes (está muito lerdo de carregar
                      
<li class="cur"><a class="btn btn-link linear" href="#" data-group="all">Todas</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Accipitriformes">Accipitriformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Anseriformes">Anseriformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Apodiformes">Apodiformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Caprimulgiformes">Caprimulgiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Cariamiformes">Cariamiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Cathartiformes">Cathartiformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Charadriiformes">Charadriiformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Ciconiiformes">Ciconiiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Columbiformes">Columbiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Coraciiformes">Coraciiformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Cuculiformes">Cuculiformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Eurypygiformes">Eurypygiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Falconiformes">Falconiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Galbuliformes">Galbuliformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Galliformes">Galliformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Gruiformes">Gruiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Nyctibiiformes">Nyctibiiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Opisthocomiformes">Opisthocomiformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Passeriformes">Passeriformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Pelecaniformes">Pelecaniformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Phaethontiformes">Phaethontiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Phoenicopteriformes">Phoenicopteriformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Piciformes">Piciformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Podicipediformes">Podicipediformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Procellariiformes">Procellariiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Psittaciformes">Psittaciformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Rheiformes">Rheiformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Sphenisciformes">Sphenisciformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Steatornithiformes">Steatornithiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Strigiformes">Strigiformes</a></li>
<li><a class="btn btn-link linear" href="#" data-group="Suliformes">Suliformes</a></li>	
<li><a class="btn btn-link linear" href="#" data-group="Tinamiformes">Tinamiformes</a></li> 
<li><a class="btn btn-link linear" href="#" data-group="Trogoniformes">Trogoniformes</a></li> 
<li class="cur"><a class="btn btn-link linear" href="#" data-group="Hibridas">Híbridas</a></li> 
<li class="cur"><a class="btn btn-link linear" href="#" data-group="Ameacadas">Ameaçadas</a></li> 

				</div>
				</div><!--end-col-->
            </div><!--end-col-->
		</div>
          
          //Aqui começam as fotografias. Como eu as esconderia da home apenas as deixando aparecer quando clicar no menu?
          
  <div class="row">
			<div class="col-md-10 col-md-offset-1">
			<div class="row">
			<div class="main-folio clearfix metro" id="grid">
					<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all" "Anseriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/anhuma.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/anhuma.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Piciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Aracari-castanho.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Aracari-castanho.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Piciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Aracari-de-bico-branco.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor e caneta hidrocor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Aracari-de-bico-branco.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Piciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Aracari-miudinho.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Aracari-miudinho.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Piciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Aracari-mulato.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor e caneta nanquim em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Aracari-mulato.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Piciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Aracari-poca.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Aracari-poca.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Psittaciformes", "Hibridas"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Arara Catalina.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Arara Catalina.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Psittaciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Arara-caninde.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Arara-caninde.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Psittaciformes", "Ameacadas"]'>
					<div class="thumb-img">
						<a href="img/portfolio/ararajuba.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/ararajuba.jpg" alt="folio" />
					</div>
				</div>
				
				
							<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Psittaciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Arara-vermelha.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Arara-vermelha.jpg" alt="folio" />
					</div>
				</div>
				
					
								<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Apodiformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Beija-flor-azul-de-rabo-branco.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Beija-flor-azul-de-rabo-branco.jpg" alt="folio" />
					</div>
				</div>
				
												<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Apodiformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Beija-flor-de-veste-preta.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Beija-flor-de-veste-preta.jpg" alt="folio" />
					</div>
				</div>
				
				


				
												<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Apodiformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Beija-flor-preto-e-branco.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Beija-flor-preto-e-branco.jpg" alt="folio" />
					</div>
				</div>
				
				
												<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Strigiformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Cabure-acanelado.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Cabure-acanelado.jpg" alt="folio" />
					</div>
				</div>
				
				
																<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Cambacica.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Desenho antigo. Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Cambacica.jpg" alt="folio" />
					</div>
				</div>
				
				
						<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Canario-da-terra.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Desenho antigo. Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Canario-da-terra.jpg" alt="folio" />
					</div>
				</div>
				
								
												<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Anseriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Capororoca.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Capororoca.jpg" alt="folio" />
					</div>
				</div>
				
								
												<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Psittaciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Caturrita.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Caturrita.jpg" alt="folio" />
					</div>
				</div>
				
								
												<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Strigiformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Coruja-da-igreja.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Coruja-da-igreja.jpg" alt="folio" />
					</div>
				</div>
				
								
												<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/crejoa.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/crejoa.jpg" alt="folio" />
					</div>
				</div>
				
				
									<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Pelecaniformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Garca-azul.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Garca-azul.jpg" alt="folio" />
					</div>
				</div>
				
								
												<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Pelecaniformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/garca-branca-pequena.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/garca-branca-pequena.jpg" alt="folio" />
					</div>
				</div>
				
				








				
								<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Gaturamo-bandeira.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Gaturamo-bandeira.jpg" alt="folio" />
					</div>
				</div>
				
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Gaturamo-rei.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Gaturamo-rei.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Gaturamo-verdadeiro.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Gaturamo-verdadeiro.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Pelecaniformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Guara.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Guara.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Accipitriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Harpia.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Harpia.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Psittaciformes", "Ameacadas"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Jandaia-sol.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Jandaia-sol.jpg" alt="folio" />
					</div>
				</div>
				
					<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Galbuliformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/joao-bobo.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/joao-bobo.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Psittaciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Maracana-verdadeira.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Desenho antigo. Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Maracana-verdadeira.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Psittaciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Marianinha-de-cabeca-amarela.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Marianinha-de-cabeca-amarela.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Strigiformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Murucututu.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Murucututu.jpg" alt="folio" />
					</div>
				</div>
				
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Psittaciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Marianinha-de-cabeca-preta.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Marianinha-de-cabeca-preta.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Noivinha.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor e caneta nanquim em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Noivinha.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Papa-piri.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Papa-piri.jpg" alt="folio" />
					</div>
				</div>
				
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Psittaciformes"]'>
                  <div class="thumb-img"> <a href="img/portfolio/Periquitao-maracana.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a> <img src="img/portfolio/Periquitao-maracana.jpg" alt="folio" /> </div>
			  </div>
			  
			  	<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Charadriiformes"]'>
                  <div class="thumb-img"> <a href="img/portfolio/Pernilongo-de-costas-brancas.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a> <img src="img/portfolio/Pernilongo-de-costas-brancas.jpg" alt="folio" /> </div>
			  </div>
			  
			  
			  				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Sphenisciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Pinguim-de-magalhaes.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor e caneta hidrocor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Pinguim-de-magalhaes.jpg" alt="folio" />
					</div>
				</div>
				
			  
				<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Piciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/*****-pau-dourado-escuro.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/*****-pau-dourado-escuro.jpg" alt="folio" />
					</div>
				</div>


<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Sphenisciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Pinguim-rei.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Pinguim-rei.jpg" alt="folio" />
					</div>
			  </div>


<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Charadriiformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Quero-quero.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Quero-quero.jpg" alt="folio" />
					</div>
			  </div>


<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Columbiformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Rolinha-roxa.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Rolinha-roxa.jpg" alt="folio" />
					</div>
			  </div>
			  
			  			  <div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Sabia-laranjeira.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Desenho antigo. Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Sabia-laranjeira.jpg" alt="folio" />
					</div>
			  </div>
			  
			  <div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Sai-azul.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Sai-azul.jpg" alt="folio" />
					</div>
			  </div>
			  
			  			  <div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "CPasseriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Saira-amarela.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Saira-amarela.jpg" alt="folio" />
					</div>
			  </div>


<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes", "Ameacadas"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Saira-apunhalada.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Saira-apunhalada.jpg" alt="folio" />
					</div>
			  </div>
			  
			  <div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Saira-douradinha.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Saira-douradinha.jpg" alt="folio" />
					</div>
			  </div>

<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Saira-sete-cores.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Saira-sete-cores.jpg" alt="folio" />
					</div>
			  </div>

<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Sanhacu-de-fogo.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Sanhacu-de-fogo.jpg" alt="folio" />
					</div>
			  </div>
			  
			  <div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Sete-cores-da-amazonia.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Sete-cores-da-amazonia.jpg" alt="folio" />
					</div>
			  </div>


<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Trogoniformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Surucua-variado.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Surucua-variado.jpg" alt="folio" />
					</div>
			  </div>

<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Passeriformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Tie-sangue.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Tie-sangue.jpg" alt="folio" />
					</div>
			  </div>
			  
<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Psittaciformes", "Ameacadas"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Tiriba-grande.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Tiriba-grande.jpg" alt="folio" />
					</div>
			  </div>

<div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Piciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Tucano-de-bico-preto.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Tucano-de-bico-preto.jpg" alt="folio" />
					</div>
			  </div>
			  
			  <div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Piciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Tucano-grande-de-papo-branco.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Tucano-grande-de-papo-branco.jpg" alt="folio" />
					</div>
			  </div>
			  
			  <div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Piciformes"]'>
					<div class="thumb-img">
						<a href="img/portfolio/Tucano-toco.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a>
						<img src="img/portfolio/Tucano-toco.jpg" alt="folio" />
					</div>
			  </div>
			  
			  <div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["all", "Cathartiformes"]'>
                <div class="thumb-img"> <a href="img/portfolio/Urubu-rei.jpg" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Lápis de cor em papel de impressora"><img src="img/plus.png" alt="folio" /></a> <img src="img/portfolio/Urubu-rei.jpg" alt="folio" /> </div>
		      </div>
			  
			  			  <div class="col-xs-6 col-sm-4 col-md-4 box" data-groups='["Caprimulgiformes", "Cariamiformes", "Ciconiiformes", "Coraciiformes", "Cuculiformes", "Eurypygiformes", "Falconiformes", "Galliformes", "Gruiformes", "Nyctibiiformes", "Opisthocomiformes", "Phaethontiformes", "Podicipediformes", "Procellariiformes", "Rheiformes", "Steatornithiformes", "Suliformes", "Tinamiformes"]'>
                <div class="thumb-img"> <a href="img/portfolio/em_construcao.png" class="thumb-mask" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Volte em breve!"><img src="img/plus.png" alt="folio" /></a> <img src="img/portfolio/em_construcao.png" alt="folio" /> </div>
		      </div>
			  
			</div>
			</div>
		</div>
		
      </div>
	  
	  
    </section>
    <!-- /Portfolio -->

   <!-- Footer Menu -->
   <section class="page footer-menu" id="about">
	<div class="container">
		<div class="row">
			<div class="col-md-10 col-md-offset-1">
				<div class="row">
					

							<article class="wAbout build widget">
								<h3><strong>SOBRE MIM</strong></h3>
								<p align="justify">O projeto Aves do Brasil surgiu pela minha paixão em observar esses animais, com o objetivo de relaxamento, aprendizado e tentativa de cada vez mais conscientizar pessoas de preservá-los livres.
<br /><br />
Página em lenta e constante construção, pois faço todos os desenhos e a arte das imagens, juntamente com as pesquisas sempre citando suas fontes.
<br /><br />
Para saber mais sobre mim acesse o link <a href="http://www.jsphynx.com">portfólio no menu ou mesmo clicando aqui</a>.
<br />
=)</p>
							</article>
			  </div> 
						
						<div class="col-md-4">
							<article class="wContact build widget">
								<h3><strong>CONTATO</strong></h3>
								<p><lable>Localização:</lable> São José - Santa Catarina - Brasil</p>
								<p><lable>Email:</lable> juliana.mello.farias@gmail.com</p>
						  </article>
						</div> 
						
						<div class="col-md-3">
							<article class="wSocial build widget">
								<h3><strong>REDES SOCIAIS</strong></h3>
								<ul class="follow-social">
																<li><a href="http://www.facebook.com/JSphynx" class="fb"><i class="fa fa-facebook-square fa-3x"></i></a></li>
																<li><a href="https://www.linkedin.com/in/julianasphynx" class="in"><i class="fa fa-linkedin-square fa-3x"></i></a></li>
																
																<li><a href="www.instagram.com/julianasphynx" class="db"><i class="fa fa-dribbble fa-3x"></i></a></li>
																		
									
																
									
								</ul>
							</article>
						</div>			</div>		</div>	</div>
   </section>
   <!-- /Footer Menu -->
   
    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="row">
			<div class="col-md-6 col-md-offset-1">
				<div class="cpRight build">
					<p class="style1">&copy;  2014 Pandawa by OmahPSD.com. All Rights Reserved.</p>
				</div>
			</div>
        </div>
      </div>
    </footer>
    <!-- /Footer -->

    <!-- JavaScript -->
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/less-1.7.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.shuffle.js"></script>
    <script src="js/ekko-lightbox.js"></script>
    <script src="js/script.js"></script>

    <!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->

  </div>
  </body>

</html>

Ai ai ai... porque fui inventar de fazer isso né? Eu queria colocar botões bem pequenos só com a sombra do que seria cada ordem ali para facilitar mesmo onde clicar, mas vou acabar seguindo pelo caminho de tirar todas da home (vou tentar isso agora mesmo).

Acha que fica bom?

Obrigadão!

DiF · 2 de novembro de 2018

@Juliana Sphynx Pensando na solução mais prática, acho que seria mais fácil você trocar as imagens das fichas por uma menor e mais simples, como por exemplo só a imagem dos pássaros por volta do tamanho de 100x100 ou 150x150px

Podes deixar eles como background ao invés de inserir como "imagem", no caso o elemento <img>.

O que poderia ser melhorado, aquela janela que abre quando clica na ficha da ave. Percebe que tudo aquilo é uma imagem. Eu dividiria a imagem do pássaro, com o texto, deixando o texto como texto(no html) ao invés da imagem.

Pois com isso ao invés de carregar uma imagem grande e inteira, você carregaria duas imagens pequenas( a ave e o mapa)

Juliana Sphynx · 3 de novembro de 2018

@DiF , o problema é que já está sendo usado como imagem única em outros lugares. Eu não posso partir a imagem já feita. Eu queria realmente tirar da home, pois o número de imagens vai cada vez aumentar mais (cerca de mil pelo menos vão estar ali um dia... seria caótico mesmo com imagens pequenas). Eu queria mesmo tirar as imagens da home para fazer com que abram apenas ao clicar no menu Ordens, mas faz tanto tempo que não faço nada com programação que realmente não sei mais como trabalhar com isso (tenho sido designer).

Eu queria deixar assim:

Ou dessa forma (que para mim seria muito mais didática):

obs: as imagens pequenas são só exemplos (não vão ser essas) e aqui apenas simplifiquei, seriam todos os links com uma imagem pequena antes do nome e que clicando tanto no nome como na imagem levariam para as fichas de animais.

Obrigada pela paciência comigo

DiF · 3 de novembro de 2018

@Juliana Sphynx Entendo. Sei o quão difícil é mudar algo que já está feito e as vezes nem é viável mudar.

Desculpa ser sincero, mas é um dos maiores erros do programador web, usar tudo em imagens. Pois realmente diminui o desempenho.

Não vou insistir que mude o seu projeto. O que nos resta é tentar pensar numa solução que não seja tão radical.

Pela segunda imagem, a ideia é ótima. Se você conseguir os ícones de aves desta forma(todo em preto), a melhor sugestão que posso dar é usar o site iconmoon para transformar os ícones em iconfonts. Desta forma, você pode manipular os ícones de imagens em forma de texto(por exemplo mudar tamanho com a fonte, cor, efeitos e etc), assim ficando bonito e BEM mais leve.

Aí você pode substituir os nomes que estão no menu por estes ícones. Ainda pode, definir um "title" para os ícones, desta forma quando o usuário passar o mouse em cima vai aparecer uma caixinha com o nome da ave

Avalie a possibilidade de fazer um teste com estes iconfonts. Eu já usei em um dos meu projetos e é bem fácil de montar, importar e manípular com css.

Sobre as imagens abrindo pelo menu, tem diversas maneiras de contornar o problema. Como por exemplo, você pode criar um arquivo JSON, contendo um array de todas as imagens. Então por jquery, você faz uma requisição ajax ao arquivo JSON e retorna as imagens que o usuário escolher.

Esta forma, não utiliza banco de dados.

Outra forma, é fazer o que já tinha mencionado em algum post mais acima, que é usar o banco de dados e armazenar neles o nome da imagem ou a url dele. E utilizar o jQuery e o ajax para fazer a requisição assíncrona para um arquivo php, que busca no banco de dados a imagem que quer e insere em um elemento que inicialmente fica vazio.

Enfim, vamos trocando ideias, que uma hora surge a solução mais apropriada!

3 horas atrás, Juliana Sphynx disse:

Obrigada pela paciência comigo

Rsrs eu tenho de sobra, quando as pessoas são educadas.

Juliana Sphynx · 3 de novembro de 2018

@DiF Eu vou desenhar todos os ícones bem minusculinhos como na imagem mesmo, ainda não os fiz, mas é coisa que sai muito rápido (ja que não tem detalhes). Assim posso em seguida os converter no site que citou.

1 hora atrás, DiF disse:

Aí você pode substituir os nomes que estão no menu por estes ícones. Ainda pode, definir um "title" para os ícones, desta forma quando o usuário passar o mouse em cima vai aparecer uma caixinha com o nome da ave

Achei muito legal essa ideia, mas quanto mais tempo estou longe da programação, menos sei fazer qualquer coisa

1 hora atrás, DiF disse:

Sobre as imagens abrindo pelo menu, tem diversas maneiras de contornar o problema. Como por exemplo, você pode criar um arquivo JSON, contendo um array de todas as imagens. Então por jquery, você faz uma requisição ajax ao arquivo JSON e retorna as imagens que o usuário escolher.

Eu não consegui nem as tirar da home ainda! Notei maus um problema: quando clico nela aberta a sequencia que se segue é a mesma da home e não a mesma do grupo de fotos que ela está contida (no caso a Ordem).

Eu não paro de apanhar e acho que cheguei no limite do que me lembro de programação

1 hora atrás, DiF disse:

Sei o quão difícil é mudar algo que já está feito e as vezes nem é viável mudar.

Por isso as vezes penso em refazer tudo!

Eu não lembro como fazer essas coisas. Estou mesmo cogitando refazer o site de forma mais simples possível (ai desde o começo já ter o menu como falei). Vai dar trabalho mas pode ser que eu consiga arrumar tudo. O maior problema ali é o grande número de imagens sendo carregadas logo de cara

Obrigadão novamente!