I am trying to make isotope works with filter the same elements but by two ways, one is filter by links and the other filter by buttons like a carrusel. The links will filter the subgrups, I have 4 groups plus the all elements, and when I click each one just want to show the first two elements of the group and by the left right arrow buttons the next and before elements. I made the group filter works but the carrusell I dont know why I cant...Thanks if anyone can help me with an example.
var related = $(this.options.itemsBlock);
if (related) {
var isoFilter = new Isotope(related, {
itemSelector: '.item',
layoutMode: 'fitRows',
sortAscending: {
name: true,
datesusc: false
}
});
if (isoFilter) {
var buttons = $$('#filters a');
buttons.addEvent('click', function (e) {
e = new Event(e);
e.stop();
var dataFilter = this.get('data-filter');
isoFilter.arrange({
filter: dataFilter
});
});
var selectors = $$(this.options.selectorButtons);
if (selectors) {
selectors.removeEvents('click');
selectors.addEvent('click', function (e) {
e = new Event(e);
e.stop();
var dataFilter1 = '.g1-item-1'; // Just an example of the next two element from the first group
isoFilter.arrange({ filter: dataFilter1 });
});
}
}
Related
I'm using jquery isotope and the filter data work great by I also need to filter by href tags.
html
<a id="bmw" href="#bmw" data-filter=".bmw" class="btn btn-green">Bmw Car</a>
<a id="audi" href="#audi" data-filter=".audi" class="btn btn-green">Audi Car</a>
So when client enter in url : www.test.ro/#bmw It needs to filter only data for bmw car as is working when the button is clicked.
jquery
jQuery.noConflict()(function($)
{
var $container = $('#container-folio');
if ($container.length)
{
$container.waitForImages(function()
{
// initialize isotope
$container.isotope(
{
itemSelector: '.box',
layoutMode: 'fitRows'
});
// filter items when filter link is clicked
$('#filters a').click(function()
{
var selector = $(this).attr('data-filter');
$container.isotope(
{
filter: selector
});
$(this).removeClass('active').addClass('active').siblings().removeClass('active all');
return false;
});
}, null, true);
// hash code filter
$(window).load(function()
{
// Store # parameter and add "." before hash
var hashID = "." + window.location.hash.substring(1);
// console.log(hashID);
// the current version of isotope, the hack works in v2 also
if (hashID != '.form')
{
var $container = $('#container-folio');
$container.imagesLoaded(function()
{
$container.isotope(
{
itemSelector: ".box",
filter: hashID, // the variable filter hack
});
});
}
});
}
});
Tried the code above for filter hash but didn't worked, any ideas ?
I want to create a page where the user can choose the images that will be shown in a slideshow. I am attempting to use mootools drag and drop and would like to use lightgallery.js.
How can I pass an array of dropped images into the dynamicEL?
Is there a way to load the images using the id/class of #cart.item?
Any help is greatly appreciated. And apologies in advance for being new at coding.
Here is a codepen that only seems to be slightly working http://codepen.io/ssab/pen/QGyKVO
$(function() {
jQuery('#dynamic').on('click', function() {
var selected_image = [];
jQuery( "#cart.item img" ).each(function() {
var item1 = {
src: $(this).find('img').attr('src'),
thumb: $(this).find('img').attr('data-thumb'),
subHtml: '<h4></h4>'
};
selected_image.push(item1);
});
jQuery(this).lightGallery({
dynamic: true,
dynamicEl: selected_image
})
});
});
var drop = $('cart');
var dropFx = drop.effect('background-color', {wait: false}); // wait is needed so that to toggle the effect,
$$('.item').each(function(item){
item.addEvent('mousedown', function(e) {
e = new Event(e).stop();
var clone = this.clone()
.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
.setStyles({'opacity': 0.7, 'position': 'absolute'})
.addEvent('emptydrop', function() {
this.remove();
drop.removeEvents();
}).inject(document.body);
drop.addEvents({
'drop': function() {
drop.removeEvents();
clone.remove();
item.clone().inject(drop);
dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
},
'over': function() {
dropFx.start('98B5C1');
},
'leave': function() {
dropFx.start('ffffff');
}
});
var drag = clone.makeDraggable({
droppables: [drop]
}); // this returns the dragged element
drag.start(e); // start the event manual
});
});
You can launch light box in two ways.
when dropping item you can populate array for dynamicEl, or
when dynamic button clicked create array of elements.
Here option 2 implemented:
http://codepen.io/imranweb7/pen/zorRLG?editors=1111
The logic behind this implementations as per as the html you copied to dropped area.
Please let me know for any explanations.
I've multiple select box filters to filter data using jQuery isotope. I want to reset all the combinations on a button click.
I've tried the following code to reset this; but it only shows all the data and actually not resetting the filter options;
$('.reset').on('click', 'button', function () {
$('.grid').isotope({
filter: '*',
});
});
I am using following code for the select box filter working;
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'vertical'
});
var filters = {};
// filter buttons
$('.filters-button-group').on('change', 'select.filterfields', function () {
var $this = $(this);
var group = $this.attr('data-filter-group');
filters[ group ] = $this.find(':selected').attr('data-filter');
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$('.grid').isotope({ filter: selector });
return false;
});
Please help me to reset all the combination filters on a button click.
Your grid is linked to the dropdowns in your script but not vice versa, hence when you reset the grid filter the dropdowns are not reset.
you can reset the dropdowns explicitly by setting them to *.
JS CODE:
// filter buttons
$('.filters-button-group').on('change', 'select.filterfields', function () {
$('.informativeSection').hide();
var isoFilters = [];
$('.option-set').each(function () {
var filter = $(this).val();
if (filter !== '*') {
isoFilters.push($(this).find(':selected').attr('data-filter'));
}
});
var selector = isoFilters.join('');
console.log('selector:' + selector);
$('.grid').isotope({
filter: selector
});
//show no documents message
if ($('.grid').data('isotope').filteredItems.length === 0) { $('.informativeSection').show(); }
return false;
});
$('.reset').on('click', 'button', function () {
$('.grid').isotope({
filter: '*',
});
//reset the dropdowns explicitly
$('.option-set').val('*');
});
Edits:
I have updated the filtered logic as well to accommodate reset functionality.
Added a informative message when no documents found for given filter.
Live Demo # JSFiddle:http://jsfiddle.net/dreamweiver/kfk4jzkL/8/
I have searched just about every forum out there and found several ways to make a Isotope masonry layout with filtering work with Infinite Scroll running Wordpress. And none of them seem to be giving me what I'm looking for.
At the moment I got the Masonry layout working, with filtering. When I implement Infinite Scroll it loads the content underneath the other content, a pretty common issue working with Isotope and Infinite scroll. However, when applying the .appended method in order to sort the newly loaded posts into my site, it messes up my whole layout.
I suspect I'm not entering the .appended line at the right place. Here's my js without the .append:
$(function () {
var $page = $('#page')
});
$(function () {
var $container = $('#content'),
filters = {},
// get filter from hash, remove leading '#'
filterSelector = window.location.hash.slice(1);
$container.imagesLoaded(function () {
// bind isotope to window resize
$(window).smartresize(function () {
// jQuery has issues with percentage widths
// so we'll manually calulate it
var colW = Math.floor($container.width() * 0.49);
$container.isotope({
});
// trigger resize so isotope layout is triggered
}).smartresize();
});
$('#nav a').click(function () {
// store filter value in object
// i.e. filters.color = 'red'
var $this = $(this),
name = $this.attr('data-filter-name'),
value = $this.attr('data-filter-value'),
isoFilters = [],
filterName, prop;
filters[ name ] = value;
for (prop in filters) {
isoFilters.push(filters[ prop ]);
}
var filterSelector = isoFilters.join('');
// trigger isotope if its ready
if ($container.data('isotope')) {
$container.isotope({filter: filterSelector});
}
window.location.hash = filterSelector;
// toggle highlight
$this.parents('ul').find('.selected').removeClass('selected');
$this.parent().addClass('selected');
return false;
});
// if there was a filter, trigger a click on the
// corresponding option
if (filterSelector) {
var selectorClasses = filterSelector.split('.').slice(1);
$.each(selectorClasses, function (i, selectorClass) {
$('#nav a[data-filter-value=".' + selectorClass + '"]').click();
});
}
$container.isotope({
itemSelector: '.box',
filter: filterSelector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
});
#nav being my menu, #content being my container, and .box being my posts.
Could anyone advise me as to where I need to insert the .appended command?
I'm trying to code a function that let me toggle in and out all thumbnails in a list depending on their classes.
e.g., if I click "print" on my menu bar, I need all thumbs with the "print" class to be hidden. If I click it a second time, the hidden thumbs are showing up.
Here is what I came up with :
window.addEvent('domready', function(){
$$('.menu_button').toggle(
function() {
this.fade(0.5);
var buttonId = this.id;
$('slider_list').getElements('.'+buttonId).each(function(li) {
li.tween('width','0');
});
},
function() {
this.fade(1);
var buttonId = this.id;
$('slider_list').getElements('.'+buttonId).each(function(li) {
li.tween('width','100');
});
}
);
});
//toggle (emulate JQuery's toggle)
(function() {
var toggled = 0;
Element.implement({
toggle: function(fn1, fn2) {
var fns = [fn1, fn2];
return this.addEvent('click', function(){
fns[toggled].apply(this, arguments);
toggled = toggled == 0 ? 1 : 0;
});
}
});
})();
I've found the toggle function here
Now I experience some issues.
First no matter what I do there will always be a thumb left at the end of the list.
Then some clicks on the menu won't do anything. Generally when I click on a button in a different state (hidden/shown) than the previous one, there will always be a null click...
Anybody ?
I implemented it in a way that allows multiple functions, although not at all MooTools like, it will work. The problem with the code you are using is that each element which uses toggle is toggling the same toggled variable
Element.implement({
toggle: function() {
this.store('toggle_options', {
fn: arguments,
cur: 0
});
this.addEvent('click', function(e) {
e.stop();
var opts = this.retrieve('toggle_options');
console.log(opts.fn.length, opts.cur);
opts.fn[opts.cur++].apply(this);
if(opts.cur >= opts.fn.length) opts.cur = 0;
});
}
});
$('button').toggle(
function() {
this.set('text', 'foo 1');
},
function() {
this.set('text', 'bar 2');
}
);
fiddle here: http://jsfiddle.net/94FFj/
Although I would recommend you implemented your code as this:
$$('.menu_button').each(function(button) {
button.store('toggle_active', 0);
button.addEvent('click', function(e) {
e.stop();
var active = this.retrieve('toggle_active');
var opts = [{opacity: 1, width: 0}, {opacity: 0.5, width: 100}];
this.fade(opts[active].opacity);
$$('slider_list .' + this.get('id')).tween('width', opts[active].width);
this.store('toggle_active', active ? 0 : 1);
});
})