Моя галерея Javascript / jQuery работает только на localhost - PullRequest
Новая
       29

Моя галерея Javascript / jQuery работает только на localhost

0 голосов
/ 08 октября 2019

Моя галерея Javascript / jQuery работает только на локальном хосте. Как только я пытаюсь просмотреть ту же галерею на размещенной на сервере версии моего сайта, на ней отображаются картинки и разделы картинок, но они не выровнены друг с другом, как в галерее сайта версии localhost.

Хорошая галерея

Неправильная галерея

Вот мой код страницы: 

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

Ответы [ 2 ]

0 голосов
/ 09 октября 2019

Удаление ненужных библиотек jQuery и перезапись поврежденного файла css устранили проблему.

0 голосов
/ 08 октября 2019

Так как некоторые страницы работают, я думаю, что это проблема с изображениями, поэтому вы можете попробовать

  1. Вы загружаете более одного раза jQuery, очистите свой код и оставьте только один jQuery
  2. Как я вижу, некоторые изображения есть, поэтому проверьте на сервере, все ли изображения существуют, введя их путь в браузере

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

...