I am new in programming(javascript) but I've done quite a research the past few days in order to make my tumblr theme work correctly. I know my question is common but as it seems I don't have enough knowledge to integrate correctly parts of code that were given in many similar examples.
My theme is supposed to override the "15 posts per page" limitation of tumblr and with an "endless scroll" option it should put all my posts (all of them pictures) in one endless page. Well, It doesn't. With a little help from here, I managed to wrap my {block:Posts} with the and with a couple of random changes in the masonry() call I ended up with this
As you can see my pictures are not overlapping (at last!) but after the 15 first posts it looks like a new page is created and the last pictures are not correctly aligned.
my jQuery masonry code is this:
<script type="text/javascript">
$(window).load(function () {
$('.autopagerize_page_element').masonry(),
$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".autopagerize_page_element",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
);
});
</script>
I know, its a mess...
Would really appreciate some help.
I'm not used to work with tumblr, but I can what is happening:
Line 110:
This script is creating a wrapper div around the entries each time you call to masonry, because of the script, each load looks like a new page, I think you can simply remove it.
Some tips:
You don't have to wait $(windows).load to execute masonry, change it by $(function()
To avoid image overlapping use appened masonry method and imagesLoad: Refer this
I see you're using masonry 1.0.1, be sure you're using masonry last version (2.1.06)
Example code:
$(function() {
//$('.autopagerize_page_element').masonry();
var $container = $('.autopagerize_page_element');
//wait until images are loaded
$container.imagesLoaded(function(){
$container.masonry({itemSelector: '.entry'});
});
$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".entry",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
//function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
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 );
});
}
);
});
and be sure to remove the last script in this header block:
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script> <!-- last masonry version -->
<script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script>
<!--<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>-->
Hope it helps
Related
Have a toggleClass on click that works fine for content loaded before infinite scroll and works fine on content appended to masonry after infinite scroll, but won't work any longer of previously loaded content.
For example//
Page Loads
<article></article>
<article></article>
<article></article>
(Toggle Class works fine on all above article elements)
but then add infinite scroll and appended masonry
load more article elements
<article></article>
<article></article>
<article></article>
(toggleClass works fine on the last loaded content, but not the article elements from page load.)
If done a third time,
<article></article>
<article></article>
<article></article>
(toggleClass works on above, and initial page loaded article elements, but not elements in the middle, which were the first elements loaded from infinite scroll)
I'm adding and removing an ID when element is clicked so ScrollTo works, and that seems to work fine all the time. So there is something off with the toggleClass().
Here is the code in the .js file.
jQuery(window).load( function() {
/**
Add ID to Genesis main.content
*/
jQuery('main.content').attr('id', 'grid');
/**
Adding div and class grid-sizer - utility element for Masonry to size correctly
*/
jQuery('main#grid article:first-of-type').before('<div class="grid-sizer"></div>');
/**
Initialize Masonry
*/
var $container = $('#grid');
$container.imagesLoaded(function(){
$container.masonry({
"itemSelector": "article",
"columnWidth": ".grid-sizer",
"animation": "true",
"isResizable": "true",
});
});
activeArticle();
});
function activeArticle() {
jQuery('article .entry-content a').click(function(event) {
event.preventDefault();
// Add id to clicked articles
jQuery(this).closest('article').attr('id','active');
// Add the giant class to resize element
jQuery(this).closest('article').toggleClass('giant');
jQuery('#grid').masonry();
jQuery('#grid').masonry('on','layoutComplete', function( msnryInstance, laidOutItems) {
jQuery('html, body').animate({
scrollTop: jQuery('#active').offset().top
}, 500);
jQuery('article').removeAttr('id');
});
});
}
Here is the code in the call back function for the WordPress Infinite Scroll Plugin.
var $newElems = jQuery(newElements).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
jQuery('#grid').masonry( 'appended', $newElems, true );
});
activeArticle();
Ended up just writing another function and putting that in the call back. Here is the other function. This appears to work second, third, loads w/o issue.
function activeArticleInfinite() {
jQuery('#infscr-loading').nextAll('article').find('img').click(function(event) {
event.preventDefault();
// Add id to clicked articles
jQuery(this).closest('article').attr('id','active');
// Add the giant class to resize element
jQuery(this).closest('article').toggleClass('giant');
jQuery('#grid').masonry();
jQuery('#grid').masonry('on','layoutComplete', function( msnryInstance, laidOutItems) {
jQuery('html, body').animate({
scrollTop: jQuery('#active').offset().top
}, 500);
jQuery('article').removeAttr('id');
});
});
}
I've followed the samples. I added a _PjaxLayout:
<title>#ViewBag.Title</title>
#RenderBody()
Modified my _Layout:
<div id="shell">
#RenderBody()
</div>
<script type="text/javascript">
$(function () {
// pjax
$.pjax.defaults.timeout = 5000;
$('a').pjax('#shell');
})
</script>
Updated ViewStart:
#{
if (Request.Headers["X-PJAX"] != null) {
Layout = "~/Views/Shared/_PjaxLayout.cshtml";
} else {
Layout = "~/Views/Shared/_Layout.cshtml";
}
}
Yet every time I click on an 'a' tag, the pjax code doesn't get called. It's as if the selector isn't working when I set up pjax. What am I doing wrong?
UPDATE:
If I do this:
$('document').ready(function () {
$('a').pjax({
container: '#shell',
timeout: 5000
});
});
I see the pjax code getting hit and the Request headers get updated, and the new content loads on the page, but the styling and layout get really messed up and duplicated...
UPDATE:
Inspecting the DOM after this craziness happens reveals that the new page content is getting loaded directly into the anchor that I click, instead of into the element with id #shell. WTF?
You are using a legacy syntax, the new pjax uses the following:
$(document).pjax('a', '#shell', { fragment: '#shell' });
Also I am not familiar with the language you use, but in order to make pjax happen there has to be an HTML element with the id shell in your ViewStart.
As I am not sure about the syntax in that language, try something similar to this for testing:
#{
if (Request.Headers["X-PJAX"] != null) {
echo "<ul id="shell"> pjaaxxx </ul>"; // Would work in php, update syntax
} else {
Layout = "~/Views/Shared/_Layout.cshtml";
}
}
I am not seeing that syntax as valid in the PJax documentation.
Are you sure you didn't mean $(document).pjax('a',{});?
$.pjax immediately executes from what I can tell.
On my WordPress site the Masonry script is included in my functions.php and Infinite-Scroll is activated with the plugin. Looks like everything is working (although elements overlap sometimes).
But new appended elements are animated from top left, instead from the bottom.
This is the callback in WP admin:
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
The last 'true' means 'isAnimatedFromBottom', not?
Demo site: http://goo.gl/9XVIl
There's a bug in masonry v2 that prevents the isAnimatedFromBottom parameter from working with CSS transitions.
You have a few options.
Switch to JS animation using the isAnimated: true option. But the animation may be slow.
Patch the code using the code in suggested in the issue.
I need to show a hidden div that is attached to a .box div , my masonry code is
$(function(){
var $container = $('.content');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box',
isAnimated : true,
isResizable : true,
});
});
});
Its loads a boxes with images and text , but when i want to show a specified DIV
Masonry want move in height , so my hidden div is showing behind a .box div
$('.commentopen').live("click",function()
{
var ID = $(this).attr("id");
$("#commentbox"+ID).fadeIn('slow');
return false;
});
Any ideas how to extend a height in the same window with out reloading
i tries masonry .reload or .reloadItems but with no luck , i think because of .imagesLoaded function
Here a visual explanation
All I can understand is that when a "hidden" div is shown, your Isotope layout does not react correctly (repositioning the other elements when the height grows). So, maybe this fiddle here is of some help. If you'd post a link to your sandbox or provide a jsfiddle yourself, it'd be easier to debug. You seem to also load large images via imagesLoaded, so if that's not correctly implemented, it could also play a role.
I am creating a 3-column tumblr theme and trying to apply infinite scrolling and masonry to the posts. The masonry only applies on the number of 'Posts Per Page' (eg. if it's set to 15, masonry will only apply to the first 15 posts). I've looked everywhere but was unable to find anything. Here is my code:
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/rSGl20lfv/masonry.js"></script>
{block:IfInfiniteScroll}
<script type="text/javascript" src="http://proto.jp/js/tumblrAutoPager.js"></script>
{/block:IfInfiniteScroll}
<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('#postCnts').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "div#pgNvgt",
// selector for the paged navigation (it will be hidden)
nextSelector : "div#pgNvgt a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".post",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 10,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('#postCnts').masonry({ appendedContent: $(this) }); }
);
});
</script>
Assistance would be very nice!
You should upgrade to the latest version of the script (v2.1.05). You're using v 1.0.1.
Also you have two masonry.js files, you only need one.
I'd suggest using jqueryInfiniteScroll over tumblrAutoPager and the imagesLoaded plugin instead of $(window).load http://masonry.desandro.com/docs/help.html