尝试使 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 + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&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>
最佳答案
您的代码中有一些错误。您已在按钮上设置了 #filters 点击功能，但您没有按钮，而是在“li”内有一个链接。您还将链接元素设置为#filter，不知道为什么。我想说将其设置为#。 您的 Filtervalue 设置为:
var filterValue = $(this).attr('data-filter');
但是您使用数据属性“data-option-value”，而不是“data-filter”
试试这个:
// 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
});
});
关于javascript - 需要帮助修复我的 isotope.js [jquery 和 html 代码]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31238049/