I'm having trouble initializing prettyPhoto now that I've switched from QuickSand to Mettafizzy Isotope.
Through posts here I've tried the code below with the onLayout function,
and by trying to bind and trigger
https://stackoverflow.com/questions/9236945/define-call-a-function-in-isotope-onlayout#=
I'm new to javascript/jQuery... so any help is much appreciated.
_Cindy
PS I'm using prettyPhoto for its social sharing features. Any other lightboxes with sharing features that anyone likes using -- I'd appreciated recommendations.
$(document).ready(function() {
var $container = $('.gallery');
$container.isotope({
filter: '*',
animationOptions: {
duration: 850,
easing: 'linear',
queue: false
}
});
$('.gallery').isotope({
onLayout: function() {
$("a[data-rel^='prettyPhoto']").prettyPhoto({ animationSpeed: 'slow', slideshow: 2000 });
}
});
$('.filter ul li a').click(function(){
$('.filer ul li .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 850,
easing: 'linear',
queue: false
}
});
return false;
});
});
All that was needed was to back down the version of JQuery to 1.8.3 and JQuery UI to 1.8.24 (higher versions may work, but this seemed optimal).
I initialize isotope as in the question above, no changes.
And initialized prettyPhoto as indicated below.
Now both isotope filtering and prettyPhoto Lightbox w social sharing are working together.
Changed my layoutmode for isotope to fitColumns since all columns were same width and that worked best for my responsive design.
$(function () {
// bind radiobuttons in the form
var $filterType = $('.filter li a');
// get the first collection
var $applications = $('#list');
// clone applications to get a second collection
var $data = $applications.clone();
// attempt to call Quicksand on every form change
$filterType.click(function (e) {
$('.filter li a').removeClass('selected');
$(this).addClass('selected');
if ($(this).attr('id') == 'all') {
var $filteredData = $data.find('li');
} else {
var $filteredData = $data.find('li[class=' + $(this).attr('id') + ']');
}
// finally, call quicksand
$applications.quicksand($filteredData, {
duration: 800,
attribute: 'id'
}, function () {
$("a[data-rel^='prettyPhoto']").prettyPhoto({ animationSpeed: 'slow', slideshow: 2000 });
});
});
});
Related
I am trying to get Packery.js to work with LazyLoad.js, while having the ability to filter the gallery by tags.
www.temp.fokuspunkt.de
On the initial page load everything works fine:
After clicking throgh the tags and then clicking on the "all" button again, the layout is scrambled, however:
I assume this has to do with the lazy loading, as it can throw off the layout, as described in the documentation here:
https://packery.metafizzy.co/layout.html#imagesloaded
Adding the recommended solution
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
throws an error, though:
My complete javascript file calling Isotope looks like this, I had tried to copy the above code right beneath the "$(window).on('load',function[...]" function block:
jQuery(function ($) {
var $grid = $('.isotope-list').packery({
layoutMode: 'packery',
filter: '*',
itemSelector: '.isotope-item',
gutter: 0,
});
$(window).on('load',function(){
$grid.packery('layout');
});
imagesLoaded( $grid ).on( 'progress', function() {
pckry.layout();
});
$('.filters li').click(function(){
//css button styling
$('.filters li').removeClass('current');
$(this).addClass('current');
// set isotope filter
var selector = $(this).attr('data-filter');
$grid.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$grid.packery('layout');
return false;
});
var $win = $(window),
$imgs = $("img"),
$loadVisible = function($els, trigger) {
$els.filter(function () {
var rect = this.getBoundingClientRect();
return rect.top >= 0 && rect.top <= window.innerHeight;
}).trigger(trigger);
}
$grid.packery('on', 'layoutComplete', function () {
$loadVisible($imgs, 'lazylazy');
$grid.packery('layout');
});
$win.on('scroll', function () {
$loadVisible($imgs, 'lazylazy');
});
$win.on('resize', function () {
$grid.packery('layout');
});
$imgs.lazyload({
effect: "fadeIn",
failure_limit: Math.max($imgs.length - 1, 0),
event: 'lazylazy'
});
});
I am certain I am doing something stupid, would anybody be kind enough to tell me what I am doing wrong? Thank you very much in advance!
So, it took a while, but I wanted to return and share my solution. Maybe it helps out somebody else in the future. My main problem was that I used isotope and packery (which is a standalone library), and not isotope and isotope-packery (which is an addon for isotope). I also changed my lazy loading plugin to "lozad", which makes a lot of thins easier.
In the code below you can also find a solution for using multiple filter terms in combination. In my case I use a row of row of radio buttons below the old button row you can see above.
jQuery(function ($) {
// initialize Packery
var $pckry = $('.isotope-list').isotope({
layoutMode: 'packery',
filter: '*',
itemSelector: '.isotope-item',
packery: {
gutter: 0
},
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
// layout on first page load, so that the gutter gets set up
$(window).on('load', function () {
$pckry.isotope('layout');
});
// filter items on button click
$('.filters li').click(function () {
$('.filters li').removeClass('current');
$(this).addClass('current');
var combinedFilter = getFilter($('.filters li.current').attr('data-filter')) + getFilter($('input[name="isotope-type-filter"]:checked').val().toLowerCase());
$pckry.isotope({ filter: combinedFilter });
$pckry.isotope('layout');
});
// filter items on radio button change
$('input[name="isotope-type-filter"]').change(function () {
var combinedFilter = getFilter($('.filters li.current').attr('data-filter')) + getFilter($('input[name="isotope-type-filter"]:checked').val().toLowerCase());
$pckry.isotope({ filter: combinedFilter });
$pckry.isotope('layout');
});
function getFilter(buttonGroup) {
var filterValue = '';
if (buttonGroup === '*') {
filterValue = "";
} else {
filterValue = "." + buttonGroup;
}
return filterValue;
};
});
Im using isotope menu on wordpress page.
Everything works fine till i use another plugin to expand content (menu actually).
Since that menu showes only first position and i have to manually select category to display all position properly.
This is the code im using for the menu:
if ( $('#menus-container').length ) {
// Zebra stripes
$('.menu-list .menu-item:even').addClass('even');
$('.menu-list .menu-item:odd').addClass('odd');
// Isotope
var $menus = $('.menu-list'),
filter = $('#menus-filter .menu-icon a').eq(0).attr('data-sort');
$menus.imagesLoaded(function() {
$menus.isotope({
itemSelector: '.menu-item',
filter: filter,
animationEngine: engine,
layoutMode : 'fitRows',
animationOptions: {
duration: 400,
easing: 'linear',
queue: true
}
});
$('#products').isotope( 'reloadItems' ).isotope();
$('#menus-filter .menu-icon').eq(0).addClass('selected');
$('.menus-category h5').text( $('#menus-filter .menu-icon a').eq(0).text() );
});
$('#menus-filter .menu-icon a').on('click touchend', function() {
$('#menus-filter .selected').removeClass('selected');
$(this).parent().addClass('selected');
var menusFilter = $(this).attr('data-sort');
var menusLegend = $(this).text();
$('.menus-category h5').text( menusLegend );
$menus.isotope({filter: menusFilter});
});
$('.menus-options a').click(function() {
$menus.isotope();
});
// Binding mouse and touch events
var bindOver, bindOut;
if ( !isMobile.any() ) {
bindOver = 'mouseover';
bindOut = 'mouseout';
} else {
bindOver = 'touchstart';
bindOut = 'touchend';
}
// Image hover and zoom icon overlay
$('a.menu-image').each(function() {
var dataColor = $(this).attr('data-color');
$(this).on(bindOver, function(e) {
$(this).find('.menu-overlay').css({'width': $(this).find('img').width()});
$(this).find('.menu-overlay').stop().animate({'background-color': $.Color(dataColor).transition('transparent', 0.3)}, 400);
$(this).find('.menu-overlay .menu-zoom').stop().fadeIn(300);
});
$(this).on(bindOut, function(e) {
$(this).find('.menu-overlay').stop().animate({'background-color': $.Color(dataColor).transition('transparent', 1)}, 400);
$(this).find('.menu-overlay .menu-zoom').stop().fadeOut(300);
});
});
// Category legend hover
$('.menus-panel .menu-icon').each(function() {
$(this).on(bindOver, function(e) {
$(this).find('.menu-legend').stop().animate({'left': '60px', 'opacity': 1}, 300).show();
});
$(this).on(bindOut, function(e) {
$(this).find('.menu-legend').stop().animate({'left': '0px', 'opacity': 0}, 300).fadeOut(100);
});
});
}
Ive tried to modify the code with jQuery:
jQuery( function() {
var $menus = jQuery('#menus');
$menus.imagesLoaded(function() {
$menus.isotope({
itemSelector: '.menu-item',
filter: filter,
animationEngine: engine,
layoutMode : 'fitRows',
animationOptions: {
duration: 400,
easing: 'linear',
queue: true
}
});
});
It works but showes all positions of the menu and breaks the design of menu.
Any help would be great.
I have some isotope images set up but the problem is when I first load the page all images show (example : all cars and buses are shown), then the default filter kicks in a second later and shows what I want (example: below code would then show cars). It's driving me nuts, does anyone know what I should be doing?
jQuery(document).ready(function ($) {
var $container = $('#portfolio-items');
var $filter = $('#filter');
$container.isotope({
filter: '.cars',
layoutMode: 'fitRows',
animationOptions: {
duration: 750,
easing: 'linear'
}
});
$filter.find('a').click(function () {
var selector = $(this).attr('data-filter');
$filter.find('a').removeClass('current');
$(this).addClass('current');
$container.isotope({
filter: selector,
animationOptions: {
animationDuration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
});
So I have a site that has 2 containers #container and #container2. I use jquery to append content that is of a certain size to one container, and the others to the other. Here is that code:
$(document).ready(function() {
$('.entry').each(function() {
if ($(this).height() > 200) {
$('#container2').append(this);
}
else {
$('#container').append(this);
}
});
});
So my issue is that with the infinite scroll and masonry, when the new content becomes available, the jquery does not run again in order to append the content to the right container. What can I add so that it will be able to append the content to the correct container?
Note: Each container can have tens of thousands of images.
Update:
Here is my masonry code:
$(window).load(function() {
var $wall = $('#container');
$wall.imagesLoaded(function() {
$wall.masonry({
itemSelector: '.entry, .entry_photo',
isAnimated: false
});
});
$wall.infinitescroll({
navSelector: '#page-nav',
nextSelector: '#page-nav a',
itemSelector: '.entry, .entry_photo',
bufferPx: 2000,
debug: false,
errorCallback: function() {
$('#infscr-loading').fadeOut('normal');
}},
function(newElements) {
var $newElems = $(newElements);
$newElems.hide();
$newElems.imagesLoaded(function() {
$wall.masonry('appended', $newElems, {isAnimated: false}, function() {
$newElems.fadeIn('slow');
});
});
});
$('#container').show(500);
});
So what happens is that the next posts when they load, all load into #container regardless of their height. This clearly shows that masonry is working fine, but it's just not calling the jquery again when they load. Is there any way to insure that it calls the jquery I need? How do I do that?
I think you have to initialize masonry plugin after adding your content in containers
like,
$(document).ready(function(){
$('.entry').each(function(){
if($(this).height()>200){
$('#container2').append(this);
}
else{
$('#container').append(this);
}
});
// masonry plugin initialization after adding content to div
});
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?