我的 Javascript/jQuery 画廊仅适用于本地主机

Question

我的 Javascript/jQuery 画廊只能在本地主机上使用。一旦我尝试在我的网站的服务器托管版本上查看相同的画廊，它就会显示图片和图片的部分，但它们并没有像本地主机版本的网站画廊那样彼此对齐。

Good Gallery

Wrong Gallery

这是我的页面代码：

<!DOCTYPE>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="styles/bvstyle.css">
    <link rel="stylesheet" href="styles/plugins.css">
    <link rel="stylesheet" href="styles/recepten.css">


    <title>Bani - Recepten</title>
</head>
<body>

<!--banner en logo-->
<div id="banner-wrapper">
    <img class="logo" src="images/logo.png"><img  class="banner" src="images/banner2.png" style="width: 1777px">
</div>

<!--Begin navbar-->
<div class="navigatiebar">
<nav class="navbar navbar-expand-md bg-light navbar-light "> <!--Navigatie balk die uitbreid wanneer het scherm medium of groter is. achtergrond is wit met een licht thema. Navigatiebalk zit vast aan de bovenkant van het scherm.-->

    <!--Toggler/collapsible Button-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><!--navigatieknopje als het scherm kleiner is dan medium.-->
        <span class="navbar-toggler-icon"></span> <!--3 streepjes onder elkaar.-->
    </button>

    <!--Navbar links-->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="index.php">Home
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="shop.php">Producten</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link disabled" href="recepten.php">Recepten
                    <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="contact.php">Contact</a>
            </li>
        </ul>
    </div>
</nav><!--Einde navbar-->
</div>

<!--Achtergrond en sfeer-->
<img src="images/recepten_banner.jpg" style="border-style: solid none solid none; border-width: 5px; border-color: yellow">


<!--Content-->


<!--Recepten galerij-->

<section id="portfolio" class="portfolio">
    <div class="box">
        <h2 class="section-title pull-left">Recepten</h2>
        <div id="filters-container" class="cbp-l-filters-alignRight pull-right">
            <div data-filter="*" class="cbp-filter-item-custom btn cbp-filter-item-custom-active"> Alles
                <div class="cbp-filter-counter">12</div>
            </div>
            <div data-filter=".voorgerecht" class="cbp-filter-item-custom btn"> Voorgerecht
                <div class="cbp-filter-counter">3</div>
            </div>
            <div data-filter=".hoofdgerecht" class="cbp-filter-item-custom btn"> Hoofdgerecht
                <div class="cbp-filter-counter">3</div>
            </div>
            <div data-filter=".nagerecht" class="cbp-filter-item-custom btn"> Nagerecht
                <div class="cbp-filter-counter">3</div>
            </div>
            <div data-filter=".tussendoortje" class="cbp-filter-item-custom btn"> Tussendoortje
                <div class="cbp-filter-counter">3</div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div id="grid-container" class="cbp-l-grid-masonry cbp cbp-chrome cbp-caption-fadeIn cbp-animation-quicksand cbp-ready cbp-cols-3" style="height: 702px;">
            <ul class="cbp-wrapper">
                <li class="cbp-item frame voorgerecht" style="width: 350px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a href="recepten/avocadosoep.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/nachosoep.jpg" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Avocadosoep met nacho's</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame voorgerecht" style="width: 350px; transform: translate3d(360px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a  href="recepten/erwtensoep.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/erwtensoep.jpg" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Erwtensoep</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame hoofdgerecht" style="width: 350px; transform: translate3d(720px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a href="recepten/spaghetti.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/pasta_gehaktbal.jpg" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Spaghetti met gehaktballetjes</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame hoofdgerecht" style="width: 350px; transform: translate3d(0px, 178px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a href="recepten/wokschotel.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/wokschotel.jpg" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Thaise wokschotel met pittige biefstukreepjes</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame hoofdgerecht" style="width: 350px; transform: translate3d(360px, 178px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a  href="recepten/bamisoep.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/bamisoep.jpg" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Bamisoep</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame tussendoortje" style="width: 350px; transform: translate3d(360px, 178px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a href="recepten/avocadotosti.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/avocado.jpg" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Avocado-tosti</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame nagerecht" style="width: 350px; transform: translate3d(0px, 354px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a href="recepten/frambozencake.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/framboos.png" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Chocolade-frambozenijscake</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame nagerecht" style="width: 350px; transform: translate3d(360px, 356px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a  href="recepten/cheesecake.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/cheesecake.png" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Cheesecake met dadels</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame tussendoortje" style="width: 350px; transform: translate3d(360px, 178px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a  href="recepten/snackpeper.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/snackpeper.png" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Snackpeper</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame nagerecht" style="width: 350px; transform: translate3d(720px, 356px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a href="recepten/nutella.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/nutella.jpg" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Nutella-mascarponetaart</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame nagerecht" style="width: 350px; transform: translate3d(360px, 178px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a  href="recepten/regenboog.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/regenboog.jpg" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Regenboogtoetje</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame voorgerecht" style="width: 350px; transform: translate3d(0px, 531px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a href="recepten/maaltijdsalade.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/salade.jpg" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Maaltijdsalade met tonijn en feta</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame hoofdgerecht" style="width: 350px; transform: translate3d(360px, 533px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a href="recepten/nasispeciaal.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/nasi.jpg" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Nasi Speciaal</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame tussendoortje" style="width: 350px; transform: translate3d(720px, 534px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a href="recepten/borrelworst.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/borrelworst.jpg" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Borrelworst met abrikozenchutney</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame tussendoortje" style="width: 350px; transform: translate3d(720px, 534px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a href="recepten/yoghurtbar.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/yoghurtbar.png" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Yoghurtbar met granola</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
                <li class="cbp-item frame voorgerecht" style="width: 350px; transform: translate3d(0px, 531px, 0px) scale3d(1, 1, 1); opacity: 1;"><div class="cbp-item-wrapper"> <a href="recepten/tomatensoep.php" class="cbp-caption cbp-singlePage">
                            <div class="cbp-caption-defaultWrap"> <img src="images/recepten/tomatensoep.PNG" alt=""> </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignCenter">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Snelle Tomatensoep</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div></li>
            </ul>
        </div>
        <!-- /cbp-l-grid-masonry -->
    </div>
    <!-- /box -->
</section>

<!--/Recepten galerij-->


<footer class="footer">
    <img src="images/logo.png" height="58" width="116">
    <a href="#" style="padding-left: 100px; color: black;">Algemene voorwaarden</a>
    <a href="#" style="padding-left: 100px; padding-right: 100px; color: black;">Privacy en Cookies</a>
    &copy; 2019 Tristan de Muijnck
</footer>

<!--Scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.themepunch.tools.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/plugins.js"></script>
<script src="js/scripts.js"></script>

</body>
</html>

Answer 1

由于某些页面可以正常工作，我认为它与图像有关，因此您可以尝试

您正在多次加载 jQuery ，清除您的代码并只留下一个 jQuery
正如我看到的，有些图像在那里，所以通过在浏览器中输入它们的路径来检查服务器计算机是否存在所有图像

www.domain.com/images/sample-image.jpg

Answer 2

删除不必要的 jQuery 库并重写损坏的 css 文件解决了问题。

我的 Javascript/jQuery 画廊仅适用于本地主机

My Javascript/jQuery gallery only works on localhost

javascript

jquery

localhost

image-gallery