mirror of https://github.com/IoTcat/ushio-img.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
260 lines
6.8 KiB
260 lines
6.8 KiB
4 years ago
|
// ==========================================================================
|
||
|
//
|
||
|
// Thumbs
|
||
|
// Displays thumbnails in a grid
|
||
|
//
|
||
|
// ==========================================================================
|
||
|
(function(document, $) {
|
||
|
"use strict";
|
||
|
|
||
|
var CLASS = "fancybox-thumbs",
|
||
|
CLASS_ACTIVE = CLASS + "-active",
|
||
|
CLASS_LOAD = CLASS + "-loading";
|
||
|
|
||
|
// Make sure there are default values
|
||
|
$.fancybox.defaults = $.extend(
|
||
|
true,
|
||
|
{
|
||
|
btnTpl: {
|
||
|
thumbs:
|
||
|
'<button data-fancybox-thumbs class="fancybox-button fancybox-button--thumbs" title="{{THUMBS}}">' +
|
||
|
'<svg viewBox="0 0 120 120">' +
|
||
|
'<path d="M30,30 h14 v14 h-14 Z M50,30 h14 v14 h-14 Z M70,30 h14 v14 h-14 Z M30,50 h14 v14 h-14 Z M50,50 h14 v14 h-14 Z M70,50 h14 v14 h-14 Z M30,70 h14 v14 h-14 Z M50,70 h14 v14 h-14 Z M70,70 h14 v14 h-14 Z" />' +
|
||
|
"</svg>" +
|
||
|
"</button>"
|
||
|
},
|
||
|
thumbs: {
|
||
|
autoStart: false, // Display thumbnails on opening
|
||
|
hideOnClose: true, // Hide thumbnail grid when closing animation starts
|
||
|
parentEl: ".fancybox-container", // Container is injected into this element
|
||
|
axis: "y" // Vertical (y) or horizontal (x) scrolling
|
||
|
}
|
||
|
},
|
||
|
$.fancybox.defaults
|
||
|
);
|
||
|
|
||
|
var FancyThumbs = function(instance) {
|
||
|
this.init(instance);
|
||
|
};
|
||
|
|
||
|
$.extend(FancyThumbs.prototype, {
|
||
|
$button: null,
|
||
|
$grid: null,
|
||
|
$list: null,
|
||
|
isVisible: false,
|
||
|
isActive: false,
|
||
|
|
||
|
init: function(instance) {
|
||
|
var self = this,
|
||
|
first,
|
||
|
second;
|
||
|
|
||
|
self.instance = instance;
|
||
|
|
||
|
instance.Thumbs = self;
|
||
|
|
||
|
self.opts = instance.group[instance.currIndex].opts.thumbs;
|
||
|
|
||
|
// Enable thumbs if at least two group items have thumbnails
|
||
|
first = instance.group[0];
|
||
|
first = first.opts.thumb || (first.opts.$thumb && first.opts.$thumb.length ? first.opts.$thumb.attr("src") : false);
|
||
|
|
||
|
if (instance.group.length > 1) {
|
||
|
second = instance.group[1];
|
||
|
second = second.opts.thumb || (second.opts.$thumb && second.opts.$thumb.length ? second.opts.$thumb.attr("src") : false);
|
||
|
}
|
||
|
|
||
|
self.$button = instance.$refs.toolbar.find("[data-fancybox-thumbs]");
|
||
|
|
||
|
if (self.opts && first && second && first && second) {
|
||
|
self.$button.show().on("click", function() {
|
||
|
self.toggle();
|
||
|
});
|
||
|
|
||
|
self.isActive = true;
|
||
|
} else {
|
||
|
self.$button.hide();
|
||
|
}
|
||
|
},
|
||
|
|
||
|
create: function() {
|
||
|
var self = this,
|
||
|
instance = self.instance,
|
||
|
parentEl = self.opts.parentEl,
|
||
|
list = [],
|
||
|
src;
|
||
|
|
||
|
if (!self.$grid) {
|
||
|
// Create main element
|
||
|
self.$grid = $('<div class="' + CLASS + " " + CLASS + "-" + self.opts.axis + '"></div>').appendTo(
|
||
|
instance.$refs.container
|
||
|
.find(parentEl)
|
||
|
.addBack()
|
||
|
.filter(parentEl)
|
||
|
);
|
||
|
|
||
|
// Add "click" event that performs gallery navigation
|
||
|
self.$grid.on("click", "li", function() {
|
||
|
instance.jumpTo($(this).attr("data-index"));
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// Build the list
|
||
|
if (!self.$list) {
|
||
|
self.$list = $("<ul>").appendTo(self.$grid);
|
||
|
}
|
||
|
|
||
|
$.each(instance.group, function(i, item) {
|
||
|
src = item.opts.thumb || (item.opts.$thumb ? item.opts.$thumb.attr("data-original") : null); //适配性修改
|
||
|
|
||
|
if (!src && item.type === "image") {
|
||
|
src = item.src;
|
||
|
}
|
||
|
|
||
|
list.push(
|
||
|
'<li data-index="' +
|
||
|
i +
|
||
|
'" tabindex="0" class="' +
|
||
|
CLASS_LOAD +
|
||
|
'"' +
|
||
|
(src && src.length ? ' style="background-image:url(' + src + ')" />' : "") +
|
||
|
"></li>"
|
||
|
);
|
||
|
});
|
||
|
|
||
|
self.$list[0].innerHTML = list.join("");
|
||
|
|
||
|
if (self.opts.axis === "x") {
|
||
|
// Set fixed width for list element to enable horizontal scrolling
|
||
|
self.$list.width(
|
||
|
parseInt(self.$grid.css("padding-right"), 10) +
|
||
|
instance.group.length *
|
||
|
self.$list
|
||
|
.children()
|
||
|
.eq(0)
|
||
|
.outerWidth(true)
|
||
|
);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
focus: function(duration) {
|
||
|
var self = this,
|
||
|
$list = self.$list,
|
||
|
$grid = self.$grid,
|
||
|
thumb,
|
||
|
thumbPos;
|
||
|
|
||
|
if (!self.instance.current) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
thumb = $list
|
||
|
.children()
|
||
|
.removeClass(CLASS_ACTIVE)
|
||
|
.filter('[data-index="' + self.instance.current.index + '"]')
|
||
|
.addClass(CLASS_ACTIVE);
|
||
|
|
||
|
thumbPos = thumb.position();
|
||
|
|
||
|
// Check if need to scroll to make current thumb visible
|
||
|
if (self.opts.axis === "y" && (thumbPos.top < 0 || thumbPos.top > $list.height() - thumb.outerHeight())) {
|
||
|
$list.stop().animate(
|
||
|
{
|
||
|
scrollTop: $list.scrollTop() + thumbPos.top
|
||
|
},
|
||
|
duration
|
||
|
);
|
||
|
} else if (
|
||
|
self.opts.axis === "x" &&
|
||
|
(thumbPos.left < $grid.scrollLeft() || thumbPos.left > $grid.scrollLeft() + ($grid.width() - thumb.outerWidth()))
|
||
|
) {
|
||
|
$list
|
||
|
.parent()
|
||
|
.stop()
|
||
|
.animate(
|
||
|
{
|
||
|
scrollLeft: thumbPos.left
|
||
|
},
|
||
|
duration
|
||
|
);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
update: function() {
|
||
|
var that = this;
|
||
|
that.instance.$refs.container.toggleClass("fancybox-show-thumbs", this.isVisible);
|
||
|
|
||
|
if (that.isVisible) {
|
||
|
if (!that.$grid) {
|
||
|
that.create();
|
||
|
}
|
||
|
|
||
|
that.instance.trigger("onThumbsShow");
|
||
|
|
||
|
that.focus(0);
|
||
|
} else if (that.$grid) {
|
||
|
that.instance.trigger("onThumbsHide");
|
||
|
}
|
||
|
|
||
|
// Update content position
|
||
|
that.instance.update();
|
||
|
},
|
||
|
|
||
|
hide: function() {
|
||
|
this.isVisible = false;
|
||
|
this.update();
|
||
|
},
|
||
|
|
||
|
show: function() {
|
||
|
this.isVisible = true;
|
||
|
this.update();
|
||
|
},
|
||
|
|
||
|
toggle: function() {
|
||
|
this.isVisible = !this.isVisible;
|
||
|
this.update();
|
||
|
}
|
||
|
});
|
||
|
|
||
|
$(document).on({
|
||
|
"onInit.fb": function(e, instance) {
|
||
|
var Thumbs;
|
||
|
|
||
|
if (instance && !instance.Thumbs) {
|
||
|
Thumbs = new FancyThumbs(instance);
|
||
|
|
||
|
if (Thumbs.isActive && Thumbs.opts.autoStart === true) {
|
||
|
Thumbs.show();
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
|
||
|
"beforeShow.fb": function(e, instance, item, firstRun) {
|
||
|
var Thumbs = instance && instance.Thumbs;
|
||
|
|
||
|
if (Thumbs && Thumbs.isVisible) {
|
||
|
Thumbs.focus(firstRun ? 0 : 250);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
"afterKeydown.fb": function(e, instance, current, keypress, keycode) {
|
||
|
var Thumbs = instance && instance.Thumbs;
|
||
|
|
||
|
// "G"
|
||
|
if (Thumbs && Thumbs.isActive && keycode === 71) {
|
||
|
keypress.preventDefault();
|
||
|
|
||
|
Thumbs.toggle();
|
||
|
}
|
||
|
},
|
||
|
|
||
|
"beforeClose.fb": function(e, instance) {
|
||
|
var Thumbs = instance && instance.Thumbs;
|
||
|
|
||
|
if (Thumbs && Thumbs.isVisible && Thumbs.opts.hideOnClose !== false) {
|
||
|
Thumbs.$grid.hide();
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
})(document, window.jQuery || jQuery);
|