2
Entering a category does not load six blocks coming from the bank fingered as in "ALL" only those that have already been loaded in all.
I need you to press the same in ALL, for each category load six blocks according to the $menu classes
Look here: somospixel.com/test
in the portfolio tab.
MENU:
<div class="button-group filters-button-group listado">
<button class="button is-checked bttodos" data-filter="todos" onclick="filtrar('todos')">TODOS</button>
<button class="button btnone btc filter" data-filter="visu" onclick="filtrar('visu')">IDENTIDADE VISUAL</button>
<button class="button btnone" data-filter="web" onclick="filtrar('web')">DESENVOLVIMENTO WEB</button>
<button class="button btnone btc" data-filter="grafico" onclick="filtrar('grafico')">MATERIAL GRÁFICO</button>
<button class="button btnone" data-filter="comu" onclick="filtrar('comu')">COMUNICAÇÃO VISUAL</button>
<button class="button btnone btc" data-filter="digi" onclick="filtrar('digi')">MARKETING DIGITAL</button>
</div>
function and building blocks
function pegaDados()
{
var idUltimo = $("#buttonIdUltimoItem").val();
jQuery.ajax
({
url: "pegaPortifolio.php?id="+idUltimo,
dataType: "json", //Tipo de Retorno
success:
function(data) {
console.log(data);
var pt1 = "";
var i = 1;
var ultimo_id = 0;
var size = 0, key;
for (key in data) {
if (data.hasOwnProperty(key)) size++;
}
for(i = 0; i < size; i++){
pt1 +='<div class="element-item filter filtros todos '+data[i].menu+'" data-category="transition"><div style="padding:2.5px;"><div style="border: 1px solid #AAAAAA;"><a href="#portfolioModal54" onclick="portfolioModal('+data[i].id+')" class="portfolio-link" data-toggle="modal"><img src="images/port/mini/'+data[i].imageM+'" alt="project 2"><div class="fundo-port"><h1>'+data[i].tipo+'</h1><h2>'+data[i].nome+'</h2></div></a></div></div></div>';
ultimo_id = data[i].id;
$("#buttonIdUltimoItem").val(ultimo_id);
}
monta_html(pt1);
}
});
filtrar($('#buttonIdUltimoItem').attr('class'));
}
function monta_html(dados){
$(".grid").append(dados); //joga o valor para um elemento html
}
</script>
<div class="wrap">
<div class="grid">
<?php
$servidor = 'localhost';
$banco = '#####';
$usuario = '###';
$senha = '##';
$link = @mysql_connect($servidor, $usuario, $senha);
$db = mysql_select_db($banco,$link);
$idUltimoItem = 0;
if(!$link)
{
echo "erro ao conectar ao banco de dados!";exit();
}
$sql = "SELECT * FROM portfolio ORDER BY id DESC limit 6";
$query = mysql_query($sql);
while($sql = mysql_fetch_array($query)){
$id = $sql["id"];
$idUltimoItem = $id;
$nome = $sql["nome"];
$tipo = $sql["tipo"];
$desc = $sql["desc"];
$menu = $sql["menu"];
$imageM = "images/port/mini/" . $sql["imageM"];
$imageF = $sql["imageF"];
?>
<div class="element-item filter filtros todos <?php echo "$menu";?>" data-category="transition">
<div style="padding:2.5px;">
<div style="border: 1px solid #AAAAAA;">
<!--<a href="#portfolioModal54" class="portfolio-link" data-toggle="modal" id="executaAjax" value="Executa ajax">-->
<a href="#portfolioModal54" class="portfolio-link" data-toggle="modal" onclick="portfolioModal(<?php echo $id;?>)" value="Executa ajax">
<img src="<?php echo "$imageM"?>" alt="project 2">
<div class="fundo-port">
<h1><?php echo "$tipo"?></h1>
<h2><?php echo "$nome"?></h2>
</div>
</a>
</div>
</div>
</div>
<?php
}
?>
</div></div>
<!-- BOTÃO CARREGAR MAIS-->
<div id="rend-more">
<!-- <input type="hidden" value="0" id="ultimo_id"> campo oculto que armazena o valor do ultimo ID buscado no banco -->
<button type="button" id="buttonIdUltimoItem" onClick="pegaDados();" value="<?= $idUltimoItem;?>" style="width: 262px; height: 50px; border: 1px solid rgb(84, 128, 128); position: relative; top: 30%; left: 50%; transform: translateX(-50%); cursor: pointer; background-color: white;" class="todos">
<h2 style="text-align: center;color:#4d8984;font-family: 'Gotham-Thin';float: left;font-size: 25px;padding-left: 30px;padding-top: 5px;">CARREGAR</h2>
<h3 style="padding-left: 5px;float: left;font-size: 25px;color:#4d8984;font-family: 'gotham-bold';padding-top: 5px;">+</h3></button>
</div>
</div>
take Portfolio.php
<?php
function fn_conexao(){
$dbuser = "apixel_admin";
$dbpass = "pixel123";
try {
$pdo = new PDO('mysql:host=localhost;dbname=####', $dbuser, $dbpass);
$pdo -> setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING );
} catch(Exception $e) {
echo 'Erro na conexao: ' . $e->getMessage();
}
return $pdo;
}
function dados($pdo){
try {
if(!isset($_GET['id']) or $_GET['id'] == null){
$id = 0; //se o GET nao for enviado o for enviado como nullo , a variável ID pega o valor de 0
}else{
$id = $_GET['id']; //pega o valor passado via GET
}
$arr = array();
$sql = "ALTER DATABASE portfolio CHARSET = UTF8 COLLATE = utf8_general_ci";
$sql = "SELECT * FROM portfolio WHERE id < $id ORDER BY id DESC LIMIT 6";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$linha = $stmt->fetchAll(PDO::FETCH_ASSOC);
if($stmt->rowCount() >= 1){
return $linha; //retorna o resultado da query
}else {
return 0;
}
} catch(Exception $e) {
print 'Erro ao inserir os dados no banco: ' . $e->getMessage();
$conexao = desconecta($conexao);
}
}
$conexao = fn_conexao();
$dados = dados($conexao);
$dados = json_encode($dados); //converte o resultado para json
print $dados; //imprime os dados na tela
?>