Делаю небольшую галерейку на
lazyload.js от appelsiini.net
Хотел бы на jQuery реализовать
:hover эффект, а не на CSS. Для вывода более трёх кнопок и дополнительной информации об изображении. Но не могу запустить плагин
HCaption.js после
lazyload.js
Запустил ленивую загрузку картинок в зависимости от появления во viewport`e.
var $win = $(window),
$body = $('body'),
$imgs = $('.lazy');
//функция срабатывания на загрузку
function loadVisible($els, trigger) {
$els.filter(function () {
var rect = this.getBoundingClientRect();
return rect.top >= 0 && rect.top <= window.innerHeight;
}).trigger(trigger);
}
//догружаю картинки при прокрутке
$win.on('scroll', lazyScroll);
function lazyScroll () {
loadVisible($imgs, 'lazy');
}
//задаю параметры для lazyload.js
$imgs.lazyload({
effect: "fadeIn",
event: 'lazy'
});
Как мне сюда прикрутить обработку уже загруженных картинок плагином HCaption.js
Этот плагин ищёт
find('img') картинки и оборачивает их через
$wrap своим html каркасом. Мне нужно как-то поочерёдно добавлять в
var Captions загрузивщиеся thumbs`ы.
В его плагине есть конструкции:
Captions.prototype = {
constructor: Captions,
set_from_attr: function(el, opt){
var cfg={},
attrs=el.attributes,
l=attrs.length;
for (var i=0; i<l; i++)
{
attr = attrs.item(i);
if (/cap-/i.test(attr.nodeName))
{
opt[attr.nodeName.replace('cap-', '')] = attr.nodeValue;
}
}
}
};
$.fn.hcaptions = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('captions')
, options = $.extend({}, $.fn.hcaptions.defaults, $this.data(), typeof option == 'object' && option);
if (!data) $this.data('captions', (data = new Captions(this, options)));
if (typeof option == 'string') data[option]();
});
};
Которые, вроде должны позволить добавлять новые элементы. Но я не знаю как. Прошу помощи.
p.s. Isotop`ом как-то проще было. У него свои события, например
layoutComplete Прописал loadVisible и он добавил в свой массив новые объекты.
$container.isotope('on', 'layoutComplete', function() {
loadVisible($imgs, 'lazy')
});
