We Keep Coding

Make lightbox work even before all images are loaded

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?

Infinite scroll jumps to top of page

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?

Reloading a new set of images makes div height 0 in isotope

My javascript looks like the following:
<script type="text/javascript">
$(document).ready(function() {
// isotope
var $container = $('#content');
$container.imagesLoaded( function(){
$container.isotope({
filter: '*',
itemSelector : '.element',
getSortData : {
colors : function( $elem ) {
return $elem.find('.colors').text();
},
number : function( $elem ) {
return $elem.find('.number');
}
}
});
var $sortedItems = $container.data('isotope').$filteredAtoms;
// filter items when filter link is clicked
$('#filter a').click(function(){
alert("filter");
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
// sorting
$('#sort a').click(function(){
var sortType = $(this).attr('data-sort');
$container.isotope({ sortBy : sortType });
return false;
});
});
});
function updateContent(path, args) {
$.ajax({
url: (path+args),
type: "POST",
success: function( data ){
$(allCards).remove();
$("#content").html( data );
$('#content').isotope( 'reLayout', callback );
}
});
}
function callback() {
alert("success: "+$('#content').height());
}
</script>
Whenever I use the updateContent() function the height of the #content div becomes 0. I think there could be a race condition happening due to the content not having been fully loaded and isotope initializing before the next set of images have been loaded.
It works fine when I first load the document. However when I load a new set of images with updateContent() it sets the #content div height to 0. Ideally I'd like to be able to load a new set of images and isotope would initialize as it normally does and height should be an appropriate value for all of the images to fit inside the #content div.
The following part needs to be fixed and this is what I have so far...
$(allCards).remove(); // remove all previous images
$("#content").html( data ); // load new images
$('#content').isotope( 'reLayout', callback ); // <- reinit isotope to manage the new images
Basically I'd like it to remove all previous images and load all the new images in data and isotope would work with the new images.

I solved the issue by prepending. I'm putting this up so people don't have to suffer like I did.
$("#content").isotope( 'remove', $(".element"), function(){
$("#content").prepend($(data)).isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
});

Have a look at http://isotope.metafizzy.co/docs/methods.html
Firstly make sure the markup your appending to $("#content") has the .element class.
If they don't have it, you'll need to append it to them before attempting to insert them into the isotope container.
Secondly try using the inbuilt method for removing appending objects
.isotope( 'addItems', $items, callback )
In your case it would be:
$("#content").isotope( 'remove', $(".element"), function(){
$("#content").isotope( 'addItems', $(data), function(){
$("#content").isotope( 'reLayout' callback );
});
});
You probably do not need to utilize the callbacks from 'remove' and 'addItems', but without a jsfiddle example it's hard to tell.

Infinite scroll slow to load new content

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

How to populate infinite scroll with images from 1 directory?

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.