Problem with the Masonry jQuery library

Question

Problem with the Masonry jQuery library

Navigation

#1 by (1 votes)

2

I downloaded the Masonry jQuery library and implemented it in my code and a few other libraries I have. It even runs but it gets zapped one over the other and you need to give several F5 on the page to get it right.

I think there is some conflict in the libraries, I have already used the function noconflict() and nothing, it remains the same.

Here is the whole page code:

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

javascript jquery

asked by anonymous 17.07.2015 / 06:55

1 answer

Automatically passing images from a gallery with Opacity effect Tab via Jquery

score 1 · Answer 1

Of the two one: either redefine jQuery (once more) or just define once.

Here you have at least 3 definitions, improve this part:

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

If you do not feel like improving your dependencies you can always redefine once again. This code makes jQuery override any page:

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

The definition of jQuery should always come at the top of the page.

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