Farazi Derviş
Farazi Derviş

Reputation: 1

Isotope buttons not working when upload to site

Isotope buttons work perfectly fine while working with Visual Studio Code. However, after uploading the site to my hosting, the buttons stop working, and all images are displayed on a single page. I want only the images in the filter to be displayed and for my buttons to work. Could you help me identify the problem?

zip file of my site

for those who do not want to download, some of the code:

custom.js

jQuery(document).ready(function ($) {

    // Set the carousel options
    $('#quote-carousel').carousel({
        pause: true,
        interval: 4000,
    });

    // fancybox
    $(".fancybox").fancybox();

    // isotope
    if ($('.isotopeWrapper').length) {
        var $container = $('.isotopeWrapper');
        var $resize = $('.isotopeWrapper').attr('id');
        
        // initialize isotope
        $container.isotope({
            itemSelector: '.isotopeItem',
            resizable: false, // disable normal resizing
            masonry: {
                columnWidth: $container.width() / $resize
            }
        });

        $("a[href='#top']").click(function () {
            $("html, body").animate({
                scrollTop: 0
            }, "slow");
            return false;
        });

        $('.navbar-inverse').on('click', 'li a', function () {
            $('.navbar-inverse .in').addClass('collapse').removeClass('in').css('height', '1px');
        });

        // Initial filter setup for 'guzellik2'
        $container.isotope({ filter: '.guzellik2' });

        $('#filter a').click(function () {
            $('#filter a').removeClass('current');
            $(this).addClass('current');
            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector,
                animationOptions: {
                    duration: 1000,
                    easing: 'easeOutQuart',
                    queue: true
                }
            });
            return true;
        });

        $(window).smartresize(function () {
            $container.isotope({
                // update columnWidth to a percentage of container width
                masonry: {
                    columnWidth: $container.width() / $resize
                }
            });
        });
    }
});

projects.html

<div class="row">
    <nav id="filter" class="col-md-12 text-center">
            <ul>
                <li><a href="#" class="btn-theme btn-small" data-filter=".guzellik2">Güzellik Merkezi #1</a></li>
                <li><a href="#" class="btn-theme btn-small" data-filter=".guzellik1">Güzellik Merkezi #2</a></li>

            </ul>
        </nav>
        <div class="col-md-12">
            <div class="row">
                <div class="portfolio-items isotopeWrapper clearfix" id="3">

        
                    <!-- Güzellik Salonu 1 Başlangıç -->


                    <article class="col-sm-4 isotopeItem guzellik1 ">
                        <div class="portfolio-item">
                            <img src="assets/images/portfolio/59.jpg" alt="" />
                            <div class="portfolio-desc align-center">
                                <div class="folio-info">
                                    <a href="assets/images/portfolio/59.jpg" class="fancybox">
                                        <h5>Resmi Büyüt</h5>
                                        <i class="fa fa-link fa-2x"></i></a>
                                </div>
                            </div>
                        </div>
                    </article>

After uploading the site, I tried clicking on the buttons, but I can't click on them, and all the images are displayed on a single page, causing the page to freeze.

Upvotes: 0

Views: 16

Answers (0)

Related Questions