2

Eu baixei a biblioteca jQuery do Masonry e implementei-a no meu código e algumas outras bibliotecas que tenho. Ela ate roda mas ela fica zuada uma por cima da outra e é preciso dar vários F5 na página para ela ficar certinha.

Eu acho que tem algum conflito nas bibliotecas, já usei a função noconflict() e nada, continua o mesmo.

Aqui esta o código da pagina inteira:

<!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>
3
  • 1
    Dá-te algum erro na consola?
    – Sergio
    Commented 17/07/2015 às 6:52
  • nd de erro so fica bugado ai se eu ficar att a pagina ele fica certinho Commented 17/07/2015 às 6:55
  • Sugiro preparar um trecho de HTML sem PHP (por exemplo, salvando o código fonte gerado por este PHP, abrindo-o no navegador) e subindo num jsfiddle ou codepen para facilitar os testes.
    – Nighto
    Commented 4/08/2015 às 18:46

1 Resposta 1

1

Das duas uma: ou redefines o jQuery (mais uma vez) ou só defines uma vez.

Aqui tens pelo menos 3 definições, melhora esta parte:

    <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>

Senão te apetecer melhorar as tua dependencias podes sempre redefinir mais uma vez. Este código faz override do jQuery qualquer página:

javascript: if (!window.jQuery || confirm('Overwrite\x20current\x20version?\x20v' + jQuery.fn.jquery))(function(d, s) {
  s = d.createElement('script');
  s.src = 'http://code.jquery.com/jquery.js';
  (d.head || d.documentElement).appendChild(s)
})(document);

A definição do jQuery deve vir sempre no topo da página.

There are some edge cases, however, where you may experience page flickering or other artifacts during page load which can usually be solved by simply placing your jQuery script references in the tag without the defer attribute. These cases include jQuery UI and other addons such as jCarousel or Treeview which modify the DOM as part of their functionality.

Source

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .