Я использую плагин бесконечной прокрутки ajax (https://github.com/webcreate/infinite-ajax-scroll) вместе с подключаемым модулем Hover Caption (http://ryun.github.io/HCaptions/). Эффект наведения хорошо работает на первой странице, однако он не применяется к страницам, загруженным через плагин бесконечной прокрутки.
Я читал, что использование .on() вместо .hover() должно работать, а также пробовал событие .scroll(). Тем не менее, я не могу заставить что-либо работать без изменения кода в плагинах, что не идеально.
Какое событие я должен обнаружить, чтобы активировать плагин hcaption и как мне это написать?
Мой код ниже:
<script>
$(document).ready(function () {
//hcaptions for mouseover tiles
$('.hcaption').hcaptions({
effect: "slide",
direction: "bottom"
});
//isotope
var $container = $('#container'),
filters = {};
$container.isotope({
itemSelector: '.element, .element_tile',
});
// Infinite Ajax Scroll configuration
jQuery.ias({
container: '#main', // main container where data goes to append
item: '.element', // single items
pagination: '.paginate', // page navigation
next: '.paginate a', // next page selector
loader: '<img src="public/img/ajax-loader.gif"/>', // loading gif
loaderDelay: 200,
thresholdMargin: -600,
noneleft: 'No more discounts', //Contains the message to be displayed when there are no more pages left to load
triggerPageThreshold: '10', // show "load more" if scroll more than this to stop
trigger: "",
onLoadItems: function (newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({
opacity: 0
});
// ensure that images load before adding to isotope layout
$newElems.imagesLoaded(function () {
// show elems now they're ready
$newElems.animate({
opacity: 1
});
$container.isotope('insert', $newElems, true);
});
return true;
}
});
});
</script>
Часть кода из hcaption.js, которую, возможно, нужно перезаписать:
$target.css('z-index',opts.zindex+1).hide();
$wrap.hover(function () {
$target.stop(true, true).fadeIn(+opts.speed, opts.onshow());
}, function () {
$target.stop(true, true).fadeOut(+opts.speed, opts.onhide());
});