2
I downloaded the jQuery library at Masonry and I’ve implemented it into my code and a few other libraries that I have. It even spins but it gets screwed one over the other and you need to give several F5 on the page to make it straight.
I think there’s some conflict in the libraries, I’ve used the function noconflict() and nothing, remains the same.
Here is the code of the entire page:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Estúdio de Imagem Photography - Eventos</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!--
Flex Template
http://www.templatemo.com/preview/templatemo_406_flex
-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/templatemo_misc.css">
<link rel="stylesheet" href="css/foto.css">
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<!--<audio id="audio" autoplay loop controls preload="metadata">
<source src="audio/a thousand years - Cristina Perry.mp3" type="audio/mp3"/>
</audio>-->
<div class="site-main" id="sTop">
<div class="site-header">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<ul class="social-icons">
<li><a href="https://www.facebook.com/estudiodeimagem?pnref=lhc" class="fa fa-facebook" target="_blank"></a></li>
<li><a href="https://instagram.com/estudiodeimagem/" class="fa fa-instagram" target="_blank"></a></li>
</ul>
</div> <!-- /.col-md-12 -->
</div> <!-- /.row -->
</div> <!-- /.container -->
<div class="main-header">
<div class="container">
<div id="menu-wrapper">
<div class="row">
<div class="logo-wrapper col-md-4 col-sm-2 col-xs-8">
<img src="images/logo-adm/logo_site.png">
</div> <!-- /.logo-wrapper -->
<div class="col-md-8 col-sm-10 col-xs-4 main-menu text-right">
<ul class="menu-first hidden-sm hidden-xs">
<li><a href="index.php">Home</a></li>
<li><a href="index.php">O Fotógrafo</a></li>
<li><a href="index.php">Portfolio</a></li>
<li class="active"><a href="#ultimos">Últimos Eventos</a></li>
<li><a href="index.php">Contato</a></li>
<li><a href="index.php">Área do Cliente</a></li>
</ul>
<a href="#" class="toggle-menu visible-sm visible-xs"><i class="fa fa-bars"></i></a>
</div> <!-- /.main-menu -->
</div> <!-- /.row -->
</div> <!-- /#menu-wrapper -->
<div class="menu-responsive hidden-md hidden-lg">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="index.php">O Fotógrafo</a></li>
<li><a href="index.php">Portfolio</a></li>
<li class="active"><a href="#ultimos">Últimos Eventos</a></li>
<li><a href="index.php">Contato</a></li>
<li><a href="index.php">Área do Cliente</a></li>
</ul>
</div> <!-- /.menu-responsive -->
</div> <!-- /.container -->
</div> <!-- /.main-header -->
</div> <!-- /.site-header -->
</div> <!-- /.site-main -->
<div class="content-section" id="ultimos">
<div class="container" id="container">
<div class="row">
<div class="heading-section col-md-12 text-center">
<h2>Ultimos Eventos</h2>
</div> <!-- /.heading-section -->
</div> <!-- /.row -->
<?php
require_once("classe/conexao.class.php");
$c = new Conexao();
$c->Conecta();
$c->SelecionaBase();
$titulo = $_GET['ti'];
$sql = mysql_query("SELECT * FROM ultimos_eventos WHERE nome_fotos = '$titulo'");
while($aux = mysql_fetch_assoc($sql)){
$nome = $aux['nome_fotos'];
$imagem = $aux['img'];
$id = $aux['id'];
$_SESSION['id'] = $id;
print"
<div class=\"row1\">
<div class=\"portfolio-item col-md-3 col-sm-6\">
<div class=\"portfolio-thumb\">
<img src=\"ultimos/$imagem\" alt=\"$nome\">
<div class=\"portfolio-overlay\">
<h3>$titulo</h3>
<a href=\"ultimos/$imagem\" data-rel=\"lightbox\" class=\"expand\">
<i class=\"fa fa-search\"></i>
</a>
</div> <!-- /.portfolio-overlay -->
</div> <!-- /.portfolio-thumb -->
</div> <!-- /.portfolio-item -->
</div>
";
}
mysql_close();
?>
</div>
</div>
<script src="js/vendor/jquery-1.11.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/bootstrap.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.masonry.js"></script>
<script type="text/javascript">
var $JQuery = jQuery.noConflict()
$JQuery(document).ready(function() {
$JQuery('#container').masonry({
itemSelector: '.portfolio-item'
});
});
</script>
</body>
</html>
Give yourself some error on the console?
– Sergio
nd error only gets bugged there if I stay att the page it gets straight
– Leonardo Costa
I suggest to prepare a snippet of HTML without PHP (for example, saving the source code generated by this PHP, opening it in the browser) and climbing one jsfiddle or codepen to facilitate the testing.
– Nighto