Tumblr Masonry with PXU Photoset Issue - javascript

I have this issue with PXU Photoset Extended not loading properly when I use Masonry for my Tumblr Theme. I know what causes it, I just sadly have no clue how to fix it.
The only thing I found that reduced flickering while Masonry loaded, was to hide the container with CSS (display:none) and then unhide it when loading the Masonry script.
It seems this had the odd side-effect of the PXU Photoset script not rendering images properly (they're mostly cut off and they jump into their real size when resizing the window).
So I use this code to call Masonry, ImagesLoaded and Infinite Scroll:
$(document).ready(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.show();
$container.masonry({
itemSelector: 'article',
gutter: 50,
isFitWidth: true,
});
});
$container.infinitescroll({
navSelector : '#pagination-infinite', // selector for the paged navigation
nextSelector : '#pagination-infinite a.next', // selector for the NEXT link (to page 2)
itemSelector : 'article', // selector for all items you'll retrieve
animate: true,
extraScrollPx: 310,
bufferPx: 40,
loading: {
msgText: '',
finishedMsg: '',
img: 'http://static.tumblr.com/amhdmud/iMBn235bd/1x1.png'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$container.masonry( 'appended', $newElems, true );
});
});
});
And then PXU Photoset Extended:
$(document).ready(function() {
$('.photo-slideshow').pxuPhotoset({
'rounded' : 'false', // corners, all or false
}, function() {
// Callback
});
});
The only thing that made the photosets display right involved removing the display: none; from the container, but then Masonry flickered out of the container on page load again, which I seem unable to fix any other way.
Any help is much appreciated,
Thank you.

The PXU Photoset plugin requires that photosets on the page be visible so that it can calculate the available area. Instead of using display: none; on the container try using visibility: hidden; and then change it to visibility: visible; after Masonry has finished.
Also, you'll want to make sure the Photoset plugin is running before Masonry makes its first pass over your theme.

Related

How can I change or remove the blue loading animation on masonry infinite scroll? [Tumblr]

I am trying to change the loading progress bar animation on my Tumblr theme to just look nicer than the regular blue loading bar over my container that I'd implemented masonry infinite scroll on.
I would prefer to use an loading bar animation that I'd created using cssload.net, but I'm open to removing or hiding the load bar all together as well. I have tried messing with it myself but I don't know anything about javascript or jquery.
Here is the code for my infinite scroll.
{block:indexpage}
{block:NextPage}
<div id="page-nav"></div>
{/block:NextPage}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $wall = $('#container');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '.entry, .entry_photo',
isAnimated : true
});
});
$wall.infinitescroll({
navSelector : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '.entry, .entry_photo',
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infsrc-loading').hide('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: true}, function(){$newElems.fadeIn('slow');} );
});
}); $('#content').hide(500);
});
</script>
{/block:indexpage}
I did not write this code myself, I pulled it off of a base theme that I'd used in the past and put it into my custom theme I made for myself.
I tried adding a CSS tag for #infscr-loading to hide it, but I've had no luck.
Sorry if this question seems unclear, I am very new to coding (this is my first major project), and I only know the basics of HTML and CSS.
Here is a link to my site: http://www.katting.tumblr.com
Also I had tried following the steps given in this answer but I had no luck with that either.. and it only seemed to break my code.
Try adding this CSS class.
#infscr-loading {
display: none !important;
}

Using flickity to resize as tabs

So I have a project now that is basically defusing bugs and this one in particular is a very annoying case. Flickity is supposed to be "resizing" a specific elements within <div> and working as tabs in the bottom to scroll to the specific informational element. However, all the text is just mashing together.
.
I have figured out, though, when you resize the browser, it works correctly and puts everything in its place by showing one <div> at a time and using buttons at the bottom to switch between <div>.
Here is the flickity part of the jQuery:
modalPopup(e, function() {
if ($(".key .active").not("#resetFilters").length) {
$(".button-group").find($(".key .active").data("filter"));
}
else {
$('.button-group li:first-child').addClass('is-selected');
}
$('.button-group').on( 'click', 'li', function() {
var index = $(this).index();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
gallery.flickity( 'select', index );
});
var gallery = $('.chapters').flickity({
// options
//imagesLoaded: true,
//percentPosition: false,
cellAlign: 'center',
contain: true,
prevNextButtons: false,
pageDots: false,
resize: true
});
});
Where modalPopup() is a function that loads in the information.
Any help or suggestions, are highly appreciated!
I have figured out the issue. The issue is that the width of the element I was using flickity on was at 0px width initially using CCS transitions. Flickity thought the width of the parent element was at 0px and therefore didn't expand out its width elements.
So if you use CSS transitions with flickity resize, make sure you have a width defined.

Spaces in Isotope Layout

We can't figure our why there are large extra spaces in the Work section layout. Can anyone help?
http://new-had.herrmanneasyeditdemo.com/#work
To fix the loading issue with your div's showing before your images, you need to load your images using imagesLoaded. This prevents just the div's from showing before isotope is called. Since you are using isotope v1.56, not v2, it is included in that version of isotope. Change your custom.js (at line 107) isotope call to this:
var $container = $('#portfolio-container');
$container.imagesLoaded( function(){
$container.isotope({
resizable: false,
itemSelector : ".item",
masonry : {
columnWidth : 1,
gutterWidth: 1,
}
});
});
To fix your layout issue is more complicated since I'm not sure you can fit all your images in a seamless grid using isotope v1.56 and masonry ( most often you need to rearrange them for sizes to fit without white space). You would need to update to isotope v2 and load the packery layout option after isotope and then set your code up as so, for them to fit together.
var $container = $('#portfolio-container');
$container.imagesLoaded( function(){
$container.isotope({
layoutMode: 'packery',
itemSelector: '.item'
});
});
You will also have to change line 349:
$(window).resize(function(){
$('#portfolio-container').isotope('layout');
});

How can I run masonry after nivo slider is loaded?

I try to run masonry after the nivo slider has loaded so that masonry adjusts for the image captions which I have below the images in the slider.
I tried this code, but masonry breaks when I add container.masonry();
var container = $('#container');
$('.slider').nivoSlider({
effect: 'sliceDown',
directionNav: false,
pauseTime: 7000,
afterLoad: function() {
container.masonry();
}
});
Check this ,
http://www.metaphorcreations.com/nivo-slider-and-custom-links/
$("body").live("hover",function(){
container.masonry();
});
Run masonry inside hover function of body or page top parent element..this is an small trick, it will solve this problem

Masonry and Infinite Scroll breaking layout when scrolling at certain speed

I have a fluid width theme and I am using jQuery Masonry and Infinite Scroll. The Problem is that if you scroll at a certain speed (not too fast and not too slow) the page it can cause a break in the grid. I have only seen this with two columns and in Firefox:
Anyone know why this is happening? I know it could be a number of things but if anyone has had experience with this and knows what is going on it would help greatly.
UPDATE:
The break happens right after the last post on the page. The ones that come after are being generated by infinite scroll's callback.
Well, I can not see the link to your page to look at (and the image is not available) but from my past experiences with masonry, whenever there is a major change in the page size (re-sizing, scrolling, re-sized divs) you need to trigger it again:
jQuery(document).ready(function() {
jQuery("#somediv").click(function() {
jQuery('#leftcol').toggle(700); //div resizing start here
jQuery('#somediv2').toggleClass("minside");
jQuery('#somediv').toggleClass("full"); // evoke again after change..
jQuery('#container').masonry({
itemSelector : '.item',
columnWidth : 240
});
});
});
Add this as callback for infinite scrolls and your problem will be gone... at least works for me:
// trigger Masonry as a callback
function (newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function () {
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry('appended', $newElems, true);
});
});
Check the $container just in case you've changed it.

Categories