Question

http://jsfiddle.net/1nLLdfdw/

尝试使fancybox图像可以排序（当点击链接时，它们按照http://isotope.metafizzy.co/过滤），我可以用同位素v1而不是v2进行过滤，我一直在四处寻找晚上和我的main.js文件的多次迭代。我不知道到底出了什么问题，感谢任何帮助。

我的main.js文件：

jQuery(function ($) {
        $(document).ready(function () {
            $(".fancybox")
                .attr('rel', 'gallery')
                .fancybox({
                    afterLoad: function () {
                        this.title = '<a href="' + this.href + '">Download</a> ' + this.title;
                    },
                    beforeShow: function () {
                        if (this.title) {
                            // New line
                            this.title += '<br />';

                            // Add tweet button
                            this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';

                            // Add FaceBook like button
                            this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
                        }
                    },
                    afterShow: function () {
                        // Render tweet button
                        twttr.widgets.load();
                    },
                    helpers: {
                        title: {
                            type: 'inside'
                        }
                    }
                });
        });
        /*----------------------------------------- FancyBox ^ ------------------*/

        $(document).ready(function () {
            // init Isotope
            var $container = $('.isotope').isotope({
                itemSelector: '.item-thumbs',
                layoutMode: 'fitRows'
            });

            // filter functions
            var filterFns = {
                // show if number is greater than 50
                numberGreaterThan50: function () {
                    var number = $(this).find('.number').text();
                    return parseInt(number, 10) > 50;
                },
                // show if name ends with -ium
                ium: function () {
                    var name = $(this).find('.name').text();
                    return name.match(/ium$/);
                }
            };

            // bind filter button click
            $('#filters').on('click', 'button', function () {
                var filterValue = $(this).attr('data-filter');
                // use filterFn if matches value
                filterValue = filterFns[filterValue] || filterValue;
                $container.isotope({
                    filter: filterValue
                });
            });

            // bind sort button click
            $('#options').on('click', 'button', function () {
                var sortByValue = $(this).attr('data-sort-by');
                $container.isotope({
                    sortBy: sortByValue
                });
            });

            // change is-checked class on buttons
            $('.button-group').each(function (i, buttonGroup) {
                var $buttonGroup = $(buttonGroup);
                $buttonGroup.on('click', 'button', function () {
                    $buttonGroup.find('.is-checked').removeClass('is-checked');
                    $(this).addClass('is-checked');
                });
            });
            /*----------------------------------------- Isotope Filters ^ ------------------*/

        });
    });

我的index.html文件：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->
    <link rel="stylesheet" href="_include/css/normalize.css">
    <link rel="stylesheet" href="_include/css/main.css">
    <link rel="stylesheet" href="_include/css/jquery.fancybox.css" type="text/css" media="screen" />
</head>

<body>
    <!--END HEADER-->
    <header>

    </header>
    <!--END HEADER-->

    <!--START CONTENT-->
    <div class="content">
        <nav id="options" class="work-nav">
            <ul id='filters' class='option-set' data-option-key='filter'>
                <li class='type-work'>Type of Blah</li>
                <li><a href="#filter" data-option-value="*" class="selected">ALL</a></li>
                <li><a href="#filter" data-option-value=".test1">test1</a></li>
                <li><a href="#filter" data-option-value=".test2">test2</a></li>
                <li><a href="#filter" data-option-value=".test3">test3</a></li>
                <li><a href="#filter" data-option-value=".test4">test4</a></li>
                <li><a href="#filter" data-option-value=".test5">test5</a></li>
            </ul>
        </nav>
        <section class="isotope">
            <ul id="thumbs">
                <li class="item-thumbs test1">
                    <a title="test1 title" class="fancybox" rel="group" href="_include/img/full1.jpg"><img src="_include/img/thumb1.jpg" alt="" /></a>
                </li>
                <li class="item-thumbs test1">
                    <a title="test2" class="fancybox" rel="group" href="_include/img/full1.jpg"><img src="_include/img/thumb1.jpg" alt="" /></a>
                </li>
                <li class="item-thumbs test2">
                    <a title="test3" class="fancybox" rel="group" href="_include/img/full1.jpg"><img src="_include/img/thumb1.jpg" alt="" /></a>
                </li>
                <li class="item-thumbs test3">
                    <a title="test4" class="fancybox" rel="group" href="_include/img/full1.jpg"><img src="_include/img/thumb1.jpg" alt="" /></a>
                </li>
            </ul>
        </section>
    </div>
    <!--END CONTENT-->

    <!--STARTFOOTER-->
    <footer>
    </footer>
    <!--END FOOTER-->

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- fancyBox -->
    <script type="text/javascript" src="_include/js/jquery.fancybox.js"></script>
    <script type="text/javascript" src="_include/js/jquery.fancybox.pack.js"></script>
    <script src="http://platform.twitter.com/widgets.js"></script>
    <!-- Isotope -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js"></script>

    <!-- others -->
    <script src="_include/js/main.js" type="text/javascript"></script>

</body>

</html>

Answer 1

您的代码中有一些错误。你已经在一个按钮上设置了#filters点击功能，但你没有按钮，你在＃34; li＆＃34;里面有一个链接。您还将链接元素设置为#filter，不确定原因。我会说把它设置为＃。您过滤值设置为：

var filterValue = $(this).attr('data-filter');

但您使用数据属性＆＃34;数据选项 - 值＆＃34;，而不是＆＃34;数据过滤＆＃34;

试试这个：

// bind filter button click
  $('ul#filters li').on('click', 'a', function () {
    var filterValue = $(this).attr('data-option-value');
    // use filterFn if matches value
    filterValue = filterFns[filterValue] || filterValue;
    $container.isotope({
        filter: filterValue
    });
  });

需要帮助修复我的isotope.js [jquery和html代码]

1 个答案: