Need help fixing my isotope.js [jquery and html code]
Question
Trying to make the fancybox images sortable (When the links are clicked they filter as in http://isotope.metafizzy.co/ ), which I was able to do with v1 of isotope but not v2, I've been poking around all night and through many iterations of my main.js file. I don't know whats going wrong exactly, would appreciate any help.
My main.js file:
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 ^ ------------------*/
});
});
And my index.html file:
<!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>
1 answers
solution1
1 ACCPTED 2015-07-07 02:47:48
You have a few errors in your code. You have set your #filters click function on a button, yet you have no button, you have a link inside a "li". You also set the link element to #filter, not sure why. I would say set it to #. You Filtervalue is set to:
var filterValue = $(this).attr('data-filter');
but your using the data-attribute "data-option-value", not "data-filter"
Try this:
// 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
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JSON, converting to HTML to use with Isotope.js
Isotope.js filtering for html table
Isotope.js and Webpack - possible?
React.js and Isotope.js
Isotope.js filter broken in IE
Weird Isotope.js Animation when filtering
Isotope.js: reveal hidden items
Masonry/Isotope.js not working correctly
Need help fixing my Conway Game of Life code
How to make a search filter with multiple slectboxes using isotope.js?
Related Tags