Just initialize the Hover Caption plugin on your new elements once they're loaded, using the onRenderComplete
hook in the Infinite Ajax Scroll plugin..
I've set up a JSFiddle and Gist to simulate the Infinite Scroll along with HCaptions to show you what I mean.
http://jsfiddle.net/nate/9JGTV/1/
$('.hcaption').hcaptions();
var iterator = 0;
$.ias({
container : '.listing',
item: '.post',
pagination: '.navigation',
next: '.next-posts a',
triggerPageThreshold: 10,
// You should not need this! This is purely to make
// it possible to view repeated pages on JSFiddle,
// since each hcaption requires a unique ID.
onLoadItems: function (items) {
$(items).each(function (i, item) {
$(item).find('.hcaption')
.removeAttr('data-target')
.attr('data-target', 'tog-' + iterator);
$(item).find('.cap-overlay')
.removeAttr('id')
.attr('id', 'tog-' + iterator);
iterator += 1;
});
},
// This is the important bit --
// reinitialize hcaptions on the new items.
onRenderComplete: function (items) {
$(items).find('.hcaption').hcaptions();
},
loader: '<img src="http://placehold.it/100x50/333333/ffffff/&text=LOADING..."/>'
});
There are two important things to note:
You have to use
onRenderComplete
, notonLoadItems
, or the hcaptions won't work correctly. I suspect that the plugin makes calculations based on the rendered sizes of the items it uses, which means those sizes are wrong if it gets triggered before they're in the DOM.hcaptions rely on unique
id
s for every item. That's kind of a weird limitation - it's not the way I would write the plugin, but, whatevs. So you need to make sure that every new item you load has a uniquedata-target
andid
. For my example, I had to do some extra manipulating of the new items in theonLoadItems
hook to give them uniqueid
s that you shouldn't need to worry about.