I have a <div id="content" class="clearfix"></div> which self populates with a list of image urls from a separate directory on my server.
Here is the live URL for the site : http://ilovesmallies.com/forum/showcase.php
I want to use infinite scroll and masonry plugins in this div.
However, I'm unsure of how to point towards a list of image urls with this script...
Here is how it is coded now and does not work.
<script>
$(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 250
});
});
$container.infinitescroll({
navSelector : '#content', // selector for the paged navigation
nextSelector : '#content a', // selector for the NEXT link (to page 2)
itemSelector : '.box', // 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 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
Can you render all your images?
My favorite way is first paginating the image items, then apply:
itemSelector <---> class of each item. (in your case, it can be each image)
navSelector <---> id of pagination element
nextSelector <---> point to element (link to next page) in pagination
And I just make the pagination display none.
Related
I'm using Featherlite as my lightbox and my problem is, I have a lot of images (thumbnails) to load on my page and when it's loading and I click one of the loaded image, the lightbox doesn't work. Therefore, it will go to the jpeg file on to the other page instead of a modal window.
How can I make my lightbox even after all the images are all loaded. By the way, I'm putting this on my WordPress but I don't want to use a plugin. Also I'm using FoundationPress.
Here's the code I use to initiate my lightbox
$(document).ready(function(){
$('a.gallery').featherlight({
targetAttr: 'href'
});
});
I have images loaded script but I'm using it on my masonry. How can I put the lightbox scripts inside the images loaded plugin?
(function() {
// Main content container
var $container = $('.grid');
var $grid = $('.grid').masonry({
// options
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
// Infinite Scroll
$container.infinitescroll({
navSelector : '.pagination', // selector for the paged navigation
nextSelector : '.pagination a.next', // selector for the NEXT link (to page 2)
itemSelector : '.grid-item', // selector for all items you'll retrieve
loading: {
msg: null,
msgText: '<i class="fa fa-circle-o-notch fa-spin"></i>',
finishedMsg: '<i class="fa fa-check"></i>',
img: null
}
},
// 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 );
});
});
})();
I'm not exactly sure if I understood correctly what solution you would like, but you could use
https://github.com/desandro/imagesloaded
which is specifically made for use cases like masonry plugin layouts,
to check if all images have finished loading and then execute functions / other scripts.
For example:
$('#your-container').imagesLoaded( {
},
function() {
$('a.gallery').featherlight({
targetAttr: 'href'
});
}
);
Hope this helps a bit?
I'm using Infinite Scroll and Twitter style trigger to load posts. When I click on toggle it stays on it's place and Infinite Scrolls #infscr-loading appears above it. I would want to make it so that custom triggers value changes to "loading more posts" or something like that, and #infscr-loading doesn't appear above it. After loading new posts it should revert back to "load more posts" trigger and when there's no more posts to load, it would say "all posts loaded". I hope you understood my point. Here's result I want: http://jscroll.com/ on demo 2.
JS
$(function() {
var $container = $('.posts');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.post',
isFitWidth: true,
"gutter": 30
});
});
$container.infinitescroll({
navSelector: '.infinite-pagination .load-more-posts',
nextSelector: '.infinite-pagination .load-more-posts',
itemSelector: '.post',
behavior: 'twitter',
loading: {
img: 'http://static.tumblr.com/hpghjri/FA5n90quf/loading.gif',
msgText: 'Loading more posts',
finishedMsg: 'All posts loaded'
}
},
// 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);
});
}
);
});
HTML
<div class="infinite-pagination">
<a class="load-more-posts" href="{NextPage}">Load more posts</a>
</div>
Live Preview
http://primor-demo.tumblr.com
i had implemented infinite scroll with masonry i got stucked in addthis share button not working when i scroll to next loading images the addthis button getting displayed but it is not sharing appropriate images.
if i remove following three lines from masonry function
addthis.toolbox('.addthis_toolbox');<br/>
addthis.counter('.addthis_counter');<br/>
addthis.init();
i am only able see addthis share button on first list of images after i scroll to next list of images the addthis share gets hidden
Javascript Code
<script type="text/javascript">var addthis_config = { "data_track_addressbar": false ;</script>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e142f1d185c5361"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$(function () {
var $container = $('#container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.box',
columnWidth: 95
});
});
$container.infinitescroll({
navSelector: '#page-nav', // selector for the paged navigation
nextSelector: '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector: '.box', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more photos 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 });
$container.masonry('appended', $newElems, true);
addthis.toolbox('.addthis_toolbox');
addthis.counter('.addthis_counter');
addthis.init();
});
$('.listing_img_wrapper').hover(
function () { $(this).find('.hover_img').fadeIn("slow"); },
function () { $(this).find('.hover_img').fadeOut("slow"); }
);
// console.log("called");
// window.addthis.toolbox('.addthis_toolbox');
}
);
});
</script>
i had solved the solution by adding
addthis.counter('.addthis_counter');
and
if (window.addthis) {
window.addthis.ost = 0;
window.addthis.ready();
}
I'm using infinite scroll with masonry everything works fine and lines up correctly. I have a button that when i click it makes that div bigger and shows extra content. the button works and loads fine when the page initially loads but when i scroll down and infinite loads new items and if i click the button to show more it jumps to the top of the screen.
I'm guessing i have to do some callback? Im kinda confused on this. How should I approach it?
this is the code im using:
$(function(){
$(".fancybox").fancybox();
var $container = $('.main_containera');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item1',
columnWidth: 0
});
});
var nextSelector = '.pagination-next a';
var origNextUrl = $(nextSelector).attr('href');
var offsetRegex = /(offset=)([0-9]+)/;
var offset = origNextUrl.match(offsetRegex)[2];
$container.infinitescroll({
navSelector : '.paginate', // selector for the paged navigation
nextSelector : '.pagination-next a', // selector for the NEXT link (to page 2)
itemSelector : '.item1', // 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 });
$container.masonry( 'appended', $newElems, true );
});
}
);
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
});
Try changing
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
to
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
e.stopPropagation( );
});
The click event may be propagating up to another link element which has an empty href or one that returns the user to the same page which usually just takes you back to the top. Alternatively, you could replace e.preventDefault(); and e.stopPropagation(); with return false;.
It's hard to say for sure that that's the issue without seeing the HTML though.
Could you post the HTML if that change doesn't work?
I'm using infinite scroll to load new content / images into the index of a wordpress theme via ajax.
This site is live at : http://mylife.holstee.com/
Here's the code that I'm using, it's deep in require.js and it's minified so you won't be able to see find it yourself.
$container.infinitescroll({
nextSelector: "#mylife-quinary .next-link a",
navSelector: "#mylife-quinary .next-link",
itemSelector: "#mylife-quaternary .item"
}, function( newElements ) {
mylife.quote();
var $newElems = $( newElements ).css({ opacity: 0 });;
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems );
});
}
);
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item',
columnWidth : $(".item").outerWidth(true)
});
});
What I want is a much smoother interface, so that you don't have to wait for the new content. Any ideas?
From www.infinite-scroll.com:
element.infinitescroll({
// ...
bufferPx : 40,
// increase this number if you want infscroll to fire quicker
// (a high number means a user will not see the loading message)
// new in 1.2
// default: 40
// ...
});