We Keep Coding

Isotope Packery with lazyload.js and tags

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;
};
});

JQuery toggle function not loading on click, only on 3rd click

When I click the burger navigation I am trying to have the menu info drop down after the background fades in. But when I click the nav it doesn't work immediately. Only fading. After successive clicks it works. What am I doing wrong here? How can I get it working on the first click.
https://jsfiddle.net/mo16z57j/
// variables
var $header_top = $('.header-top');
var $nav = $('nav');
// toggle menu
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
$('.navOpen')
.css('opacity', 0).delay(800)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
).toggle();
});

Try the following code
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
$('.navOpen')
.css('opacity', 0).delay(800)
.show()
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
).toggle();
});

Initializing prettyPhoto using Isotope

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 });
});
});
});

How to show isotope items after filter is applied

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;
});
});

Implementing .scrollTo()

I'm trying to implement the scrollTo script jquery script from http://flesler.blogspot.com/2007/10/jqueryscrollto.html but I cant figure it out because of the way my script is setup:
$(".viewproject").click(function() {
$(...).scrollTo( '#lightwrap', 2500, {easing:'elasout'} );
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#workitem" + id).html();
$('#projectajax').animate({
opacity: '0'
}, 600, function() {
$('#projectpanel').show();
if ($('#projectajax').is(':visible')) {
$('#projectajax').html(contentTobeLoaded).delay(500).animate({
opacity: '1'
}, 500, function() {
$('#thumbnails, h3').css('border-top', '1px solid #fff');
});
}
else {
$('#projectajax').html(contentTobeLoaded).hide().slideDown(1000).delay(500).animate({
opacity: '1'
}, 500, function() {});
}
});
});
$(document).on('click', '#projectclose', function(e) {
e.preventDefault();
$("#projectpanel").slideUp('1000');
});
or http://jsfiddle.net/Rvgk9/
what im trying to do is when the image or link is clicked, i want it to scroll to the top of the website before if #projectajax is visible and also if #projectajax isnt visible.. from what I've tried it just didnt have the scrolling effect at all just snapped to the top of the page.