Have been using Paul Irish infinite scroll for the last few sites i've built but this new project has quite a lot of new callbacks for new elems.
The issue right now though is that the "No More Posts" finished message is not showing once is reaches the end of the sites internet and also the loading images is not being displayed during loading intervals.
Was wondering if anybody could spot something in the code I couldn't see. Would much appreciate it !
//Infinite Scroll
var $tilegrid = $('#content');
var $initialNumberOfPosts = $('.post').length; // Get number of posts
$tilegrid.infinitescroll({
navSelector: ".load-more-btn",
nextSelector: ".load-more-btn",
itemSelector: ".post",
behavior: 'twitter',
loading: {
finishedMsg: 'No more posts',
img: 'http://static.tumblr.com/cmghtlm/zWPnh0xhe/ajax-loader.gif',
}
},
function ( newElements ) {
//call for likes
var $currentNumberOfPosts = $('.post').length;
var pageNumber = Math.ceil($currentNumberOfPosts / $initialNumberOfPosts);
Tumblr.LikeButton.get_status_by_page(pageNumber);
//images loaded isotope
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.isotope( 'appended', $newElems, true );
});
//photoset slider
$('.photoset-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
});
Related
I am trying to set up infinite scroll for days now on my site.
Finally i found a plugin that almost works - jetpack.
PROBLEM: When you scroll down, freshly loaded posts are put on top of the displayed ones.
SOLVED...solution see answer
How do we solve this?
SOLUTION SUGGESTION? Maybe it has to do with the fact that my theme uses java-masonry for the grid display and I found this tutorial page providing code snippets to deal with that.
Maybe I enqueued them wrong?
I added this in the bottom of my functions.php to enqueue the script and configure jetpack
// Jetpack infinite js addon
wp_register_script('ininite-addon', (get_template_directory_uri()."/js/infinite-addon.js"),'infinite-addon',false,true);
wp_enqueue_script('infinite-addon');
// Jetpack infinite scroll
add_theme_support( 'infinite-scroll', array(
'container' => 'post-area',
'footer' => 'footer',
'wrapper' => false,
'posts_per_page' => '7',
) );
and this is the file I created called infinite-addon.js according to the tutorial mentioned above:
jQuery( document ).ready( function( $ ) {
infinite_count = 0;
// Triggers re-layout on infinite scroll
$( document.body ).on( 'post-load', function () {
infinite_count = infinite_count + 1;
var $container = $('#content');
var $selector = $('#infinite-view-' + infinite_count);
var $elements = $selector.find('.hentry');
$elements.hide();
$container.masonry( 'appended', $elements, true );
$elements.fadeIn();
});
});
Thank you SO MUCH for any help !!! And let me know if you need more of my code!
Solved the problem.
I found a file called funtions.js in my theme's /js/ directory which contained the following code, obviously for making masonry work:
$(document).ready(function() {
$('#post-area').masonry({
// options
itemSelector : '.post',
// options...
isAnimated: true,
animationOptions: {
duration: 400,
easing: 'linear',
queue: false
}
});
});
I just deleted this and replaced it with the snippet above, and now it works like magic!
I am trying to create product slider for devices - but the current jquery i am using is using auto slide - does anyone know how i can achieve this?
I have tried deleting auto: 3000, but i get a white box/image instead of the first image.
I need the first image to slide on then stop to allow people to choose to slide though.
var bullets = $('#thumbnails li.sliderindicator');
var elem = document.getElementById('slider');
window.mySwipe = Swipe(elem, {
startSlide: -1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function (pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = 'circle';
}
bullets[pos].className = 'on';
}
});
Thanks
try remove
startSlide: -1,
auto: 3000,
i think if startSlide: -1 it will not display first image look this link .It work ok!
I'm trying to find a way to animate the image title and caption for each slide of a slideshow and sync their animation effects with the ones of the slideshow. i.e. as soon as the slide transition effect has ended, the title goes from right to left and the caption from top to bottom, and when the slide transition effect kicks in, the whole text would fade out at the same time the slide fades out, and let the new slide and text fade in.
I figured out how to make my image title and caption move using .animate ( http://jsfiddle.net/S8F9Y/ ) :
var $j = jQuery.noConflict();
$j(document).ready(function() {
// Get the slideshow options
var $slidespeed = parseInt( meteorslidessettings.meteorslideshowspeed );
var $slidetimeout = parseInt( meteorslidessettings.meteorslideshowduration );
var $slideheight = parseInt( meteorslidessettings.meteorslideshowheight );
var $slidewidth = parseInt( meteorslidessettings.meteorslideshowwidth );
var $slidetransition = meteorslidessettings.meteorslideshowtransition;
var $captionduration = $slidetimeout - ($slidespeed*2);
$j('.meteor-slides h1').delay($slidespeed).animate({left: '30',opacity: 1}, 600, function(){/*Animation complete.*/});
$j('.meteor-slides p').delay($slidespeed + 200).animate({top: '70',opacity: 1}, 600, function(){/*Animation complete.*/});
$j('.meteor-slides h1').delay($captionduration).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
$j('.meteor-slides p').delay($captionduration - 200).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
// Setup jQuery Cycle
$j('.meteor-slides').cycle({
cleartypeNoBg: true,
fit: 1,
fx: $slidetransition,
height: $slideheight,
next: '#meteor-next',
pager: '#meteor-buttons',
pagerEvent: 'click',
pause: 1,
prev: '#meteor-prev',
slideExpr: '.mslide',
speed: $slidespeed,
timeout: $slidetimeout,
width: $slidewidth
});
// Setup jQuery TouchWipe
$j('.meteor-slides').touchwipe({
wipeLeft: function() {
$j('.meteor-slides').cycle('next');
},
wipeRight: function() {
$j('.meteor-slides').cycle('prev');
},
preventDefaultEvents: false
});
// Add class to hide and show prev/next nav on hover
$j('.meteor-slides').hover(function () {
$j(this).addClass('navhover');
}, function () {
$j(this).removeClass('navhover');
});
// Set a fixed height for prev/next nav in IE6
if(typeof document.body.style.maxWidth === 'undefined') {
$j('.meteor-nav a').height($slideheight);
}
// Add align class if set in metadata
$j('.meteor-slides').each(function () {
meteormetadata = $j(this).metadata();
if (meteormetadata.align == 'left') {
$j(this).addClass('meteor-left');
} else if (meteormetadata.align == 'right') {
$j(this).addClass('meteor-right');
} else if (meteormetadata.align == 'center') {
$j(this).addClass('meteor-center');
}
});
});
The 1st problem is that there's no cycle so the text animation only
plays once,
the 2nd problem is that text effects are not in sync with slide effects,
the 3rd problem is that there's no slide transition for the first slide so if this is the first slide, the text animation should start right away for h1 and +200ms for p, with no additional delay ($slidespeed).
Thanks in advance,
Kim
Use the callback of each slide instead of trying to sync them by time.
$j('.meteor-slides').cycle({
after: function (currSlideElement) {
// Place all your animations here
// Example:
$j(currSlideElement).find('h1').animate();
// ...
},
cleartypeNoBg: true,
fit: 1,
fx: $slidetransition,
height: $slideheight,
next: '#meteor-next',
pager: '#meteor-buttons',
pagerEvent: 'click',
pause: 1,
prev: '#meteor-prev',
slideExpr: '.mslide',
speed: $slidespeed,
timeout: $slidetimeout,
width: $slidewidth
});
Place any captions and animations where it says // Place all your animations here and they will show after each slide has loaded.
You can also use before depending on what's best suited for your slideshow.
Demo here
Find more about how they are used here.
I recently ran into some problems trying to setup Infinite scroll on my tumblr with masonry. I found some code, and it worked perfectly on the demo website: http://www.jquery4u.com/demos/infinite-scrolling-demo1/ But on my tumblr only the Masonry part works, but not the infinite scrolling part. Here is my Javascript:
<script>
$(function(){
var $container = $('SECTION');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.item',
columnWidth: '.item',
isFitWidth: true
});
});
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#nextPage', // selector for the NEXT link (to page 2)
itemSelector : '.item', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// 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 });
msnry.appended( $newElems );
});
}
);
});
</script>
Here is the html for the next Page link:
{block:Pagination}
<nav id="page-nav">
{block:NextPage}
<a style="color:red;" id="nextPage" href="{NextPage}">Next</a>
{/block:NextPage}
</nav>
{/block:Pagination}
I do already have the Masonry, ImageLoaded, and Infinite Scrolling scripts linked. As I said, The masonry works fine, but the infinite scroll seems to be doing nothing at all. The next link is also working too, since I tested it and it does take me to the next page. But again the Infinite scrolling does nothing whatsoever. If anyone could help it would be very appreciated, or if you have any other suggestions or alternatives, that would also be nice.
Its hard to tell without a demo link, but looking at the example you used for reference:
msnry.appended( $newElems );
There should throw an error saying undefined. This is due to msnry.appended.
The line should be:
$container.masonry( 'appended', $newElems, true );
Source: http://www.jquery4u.com/demos/infinite-scrolling-demo1/
I use Sorgilla jcarousel, just wondering can anyone spot something obvious as to why only in Google Chrome, when I zoom in or out, not at 100% the positioning of the carousels are completely off.
Im not sure what specific code to post but here are the 2 carousels being called. both have the same problem.
Im assuming its something to do with the pixels not adjusting for resize or something, but it isnt an issue in other browsers.
Any help would be great thanks.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
start: 2, // Configuration goes here
wrap: "circular",
scroll: 1,
auto:7
});
});
jQuery(document).ready(function() {
jQuery('#top-carousel').jcarousel({
start: 2, // Configuration goes here
wrap: "circular",
auto: 12,
scroll: 1
});
});
</script>
You can use the workaround that works fine for me.
This is not the best solution, you can definitely try to improve it.
Here is how you can change your code
jQuery(document).ready(function() {
var animation = $.browser.safari ? null : "normal";
jQuery('#mycarousel').jcarousel({
start: 2, // Configuration goes here
wrap: "circular",
scroll: 1,
auto:7,
animation: animation,
itemLoadCallback: {
onBeforeAnimation: function (instance) {
if ($.browser.safari) {
var itemPos = instance.first;
var pageWidth = instance.container.width();
var expectedItemPos = pageWidth * (1 - itemPos);
instance.container.prevObject.animate({ "left": expectedItemPos + "px" });
}
}
}
});
});
The code above is used for left to right carousel.
Additinal info about jcarousel configuration you can find here