if jcink supports webpages, might as well use them! here's a great face claim that lets you filter by what you want and sort those entries as well! i've written up some documentation for you here to help you get set up with this code. still, if you need any help, feel free to ask.
you’re free to edit as you please as this is a base code but i do ask that you do not remove the credits! for the record, should you choose to include this in a commission or premade skin (or any other paid situation, including installation) you cannot charge extra for its inclusion.
and as always, if you’re feeling generous, you can tip me over on ko-fi!
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality✓ Free Actions
Free to watch • No registration required • HD streaming
now that jcink supports webpages, there’s a lot of cool things sites can implement! people have definitely taken to the guidebook, but how about a sortable face claim? you can search face claims by age, gender, sexuality and more! you can add or take stuff away until you find what works best for your site.
for the sake of this tutorial, i’ll be working from the filters available in my base code, and how to add new ones. some will be easier than others, so please don’t hesitate to reach out for help! that’s what we’ve got coding help for.
setting up a new entry
first and foremost, how do you add an entry to your face claim so it can be searched? the answer is a lot more simple than you think! it looks a little wacky for some who don’t deal in multiple classes, but here’s the cheat sheet for you.
how you fill this out is important! spelling something wrong or putting something in the wrong spot, like all coding, will cause the code + script to break.
first thing’s first, add an image (that will resize) and then basic info in the appropriate spots. there’s a spot for face claim name, character name, character age in numbers, gender, and sexuality. once that is filled out, the code will look something like this:
filling out the hover portion is giving information to the sorting part of the script. when you say you want to sort all entries by age, it’s looking at <p class=”age”>for the integer so it knows how to sort. that’s why it’s important to put in numbers, not write the age out. it’s also important to spell everything correctly, and use the same terms across entries.
now you’ve got the sorting terms filled out! next up, the filtering terms. this is where multiple div classes come into play.
looking at the current code, we need to add that bellamy is a female, that she’s bisexual, and that she’s the character of an admin. to do that, it’ll look like this:
so, after the character-card declaration, we’re saying that this entry also involves the other classes between the quotation marks. now, when you go to filter female characters, this entry will say “hey! i’m a female class entry!” and it’ll be filtered appropriately.
i’ve also declared “admin” in data category. that’s there so when you filter by member group, this entry will be grouped with all the other admin accounts. this will work for any member group!
speaking of which…
how to add a new filter
you probably want more specific filters than “admin” and “member” but how do you do it? you’re going to need this code:
you just need to add two simple things: a button label so people know what they’re sorting, and a new class declaration. if i wanted to add a member group called “ruby”, this is what it’d look like:
pop that in with the rest of the buttons, and it’ll be included with the other filters. and then, when you’re putting together the entry, just include class ruby in with everything else! nice and simple.
how to add a new term to sort by
this is a little more complicated, but nothing too scary! to do this, you’re going to need to go into the script before doing anything else. what you’re looking for is this:
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.character-card',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
gender: '.gender',
age: '.age parseInt',
face: '.face',
category: '[data-category]',
}
});
now, let’s say i wanted to add the ability to sort by sexuality. when i look at all female characters, i want to see them grouped together by their preferences. in order to do that, i’m going to need to declare the name of what i want to sort by and what class that includes what i’m looking for. for sexuality, it’ll look something like this:
sexuality: '.sexuality',
and then including it into the script will look like this:
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.character-card',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
gender: '.gender',
age: '.age parseInt',
face: '.face',
sexuality: '.sexuality',
category: '[data-category]',
}
});
now, you need a button to use the sorting! that’s going to be this code:
and then just drop it in with the rest of the sorting filters and there you go!
that’s all there is to this code/script! you can definitely sort by other things depending on your jquery knowledge (or having access to someone who can help you set it up) but this is a great, usable start for the base code.
if you have any questions, feel free to ask or roll over to the coding help forum where i’m sure someone will be able to help you problem solve if need be!
