27
4
我正在使用 prettyphoto 并想切换到 fancybox，我的画廊正在使用 isotope 进行滤镜和动画处理，但我认为这不是问题所在。图像出现，但没有拇指!在开发工具中，当选择图片时，有一个名为 fancybox-thumbs của div 但它是不可见的!请帮忙
Trung tâm cá nhân
Điều phát hành
từ bỏ(function ($) {
//Shortcut for fancyBox object
var F = $.fancybox;
//Add helper object
F.helpers.thumbs = {
defaults : {
width : 50, // thumbnail width
height : 50, // thumbnail height
position : 'bottom', // 'top' or 'bottom'
source : function ( item ) { // function to obtain the URL of the thumbnail image
var href;
if (item.element) {
href = $(item.element).find('img').attr('src');
}
if (!href && item.type === 'image' && item.href) {
href = item.href;
}
return href;
}
},
wrap : null,
list : null,
width : 0,
init: function (opts, obj) {
var that = this,
list,
thumbWidth = opts.width,
thumbHeight = opts.height,
thumbSource = opts.source;
//Build list structure
list = '';
for (var n = 0; n < obj.group.length; n++) {
list += '
}
this.wrap = $('').addClass(opts.position).appendTo('body');
this.list = $('' + list + '
').appendTo(this.wrap);
//Load each thumbnail
$.each(obj.group, function (i) {
var href = thumbSource( obj.group[ i ] );
if (!href) {
return;
}
$("![]()
").load(function () {
var width = this.width,
height = this.height,
widthRatio, heightRatio, parent;
if (!that.list || !width || !height) {
return;
}
//Calculate thumbnail width/height and center it
widthRatio = width / thumbWidth;
heightRatio = height / thumbHeight;
parent = that.list.children().eq(i).find('a');
if (widthRatio >= 1 && heightRatio >= 1) {
if (widthRatio > heightRatio) {
width = Math.floor(width / heightRatio);
height = thumbHeight;
} khác {
width = thumbWidth;
height = Math.floor(height / widthRatio);
}
}
$(this).css({
width : width,
height : height,
top : Math.floor(thumbHeight / 2 - height / 2),
left : Math.floor(thumbWidth / 2 - width / 2)
});
parent.width(thumbWidth).height(thumbHeight);
$(this).hide().appendTo(parent).fadeIn(300);
}).attr('src', href);
});
//Set initial width
this.width = this.list.children().eq(0).outerWidth(true);
this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)));
},
beforeLoad: function (opts, obj) {
//Remove self if gallery do not have at least two items
if (obj.group.length < 2) {
obj.helpers.thumbs = false;
return;
}
//Increase bottom margin to give space for thumbs
obj.margin[ opts.position === 'top' ? 0 : 2 ] += ((opts.height) + 15);
},
afterShow: function (opts, obj) {
//Check if exists and create or update list
if (this.list) {
this.onUpdate(opts, obj);
} khác {
this.init(opts, obj);
}
//Set active element
this.list.children().removeClass('active').eq(obj.index).addClass('active');
},
//Center list
onUpdate: function (opts, obj) {
if (this.list) {
this.list.stop(true).animate({
'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
}, 150);
}
},
beforeClose: function () {
if (this.wrap) {
this.wrap.remove();
}
this.wrap = null;
this.list = null;
this.width = 0;
}
}
}(jQuery));.fancybox-thumbs {
position: fixed;
left: 0;
width: 100%;
tràn: ẩn;
z-index: 8050;
background: url(../images/icons/icon-magnify.png) center center no-repeat #fff;
chiều rộng: 30px;
chiều cao: 30px;
bán kính đường viền: 15px;
độ mờ: 0,5;
lề: 0 tự động;
}
.fancybox-thumbs.bottom {
bottom: 2px;
}
.fancybox-thumbs.top {
trên cùng: 2px;
}
.fancybox-thumbs ul {
position: relative;
kiểu danh sách: không có;
margin: 0;
padding: 0;
}
.fancybox-thumbs ul li {
nổi: trái;
padding: 1px;
độ mờ: 0,5;
}
.fancybox-thumbs ul li.active {
Độ mờ: 0,75;
padding: 0;
border: 1px solid #fff;
}
.fancybox-thumbs ul li:hover {
độ mờ: 1;
}
.fancybox-thumbs ul li a {
display: block;
position: relative;
tràn: ẩn;
border: 1px solid #222;
background: #111;
phác thảo: không có;
}
.fancybox-thumbs ul li img {
display: block;
position: relative;
đường viền: 0;
padding: 0;
max-width: none;
}
#folio {
background: url(../images/gallery-quote.png) center 80px no-repeat #111;
phần đệm trên cùng: 100px;
rõ ràng: trái;
}
.portfolio_container {
position: relative;
display: block;
tràn: ẩn;
width: 100%;
}
.portfolio_container .portfolio {
position: relative;
display: block;
nổi: trái;
tràn: ẩn;
chiều rộng: 25%;
chiều cao: tự động;
}
.portfolio_container .portfolio .media_box figure a img {
display: block;
lề trái: tự động;
lề phải: tự động;
}
.portfolio_container .portfolio .media_box .hover_effect {
top: 0;
left: 0;
}
.gallerySelector {
background: #222;
chiều cao: 44px;
width: 100%;
lề trên: 20px;
}
.gallerySelectorList {
margin: 0;
width: 100%;
}
.gallerySelectorList li {
nổi: trái;
margin: 0;
kiểu danh sách: không có;
chiều rộng: 20%;
text-align: center;
padding: 0;
}
.gallerySelectorList li:hover {
background: #83103e;
}
.gallerySelectorList li a {
display: block;
padding: 11px 0;
color: #fff;
trang trí văn bản: không có;
margin: 0;
transition: background-color 0.3s ease, color 0.2s ease;
}
.gallerySelectorList li.current {
background: #7b133c;
}
.portfolio_container .portfolio {
chiều rộng: 20%;
}
.fullwidth {
display: block;
chiều rộng tối đa: 100%;
chiều rộng tối thiểu: 100%;
}
#gallery h3 {
lề dưới: 20px;
}
.project-title {
font-family: 'Oswald', sans-serif;
cỡ chữ: 12px;
chuyển đổi văn bản: chữ hoa;
margin-top: 7px;
}
.project-description {
color: #868991;
cỡ chữ: 10px;
chuyển đổi văn bản: chữ hoa;
trọng lượng phông chữ: 600;
margin: 0 0 20px 0;
}
.columns .overlay-content.loupe {
width: 34px;
chiều cao: 34px;
background: url(../../../templates/images/loupe.png) 0px 0px no-repeat;
position: absolute;
top: 22%;
margin: -17px 0 0 -17px;
trái: 50%;
chỉ số z: 10;
}
.thumbLink {
display: block;
width: 100%;
}
.thumbImage {
nổi: trái;
position: relative;
tràn: ẩn;
display: block;
margin-bottom: 0px;
kích thước hộp: hộp viền;
text-align: center;
width: 100%;
chiều cao: 100%;
}
.thumbImage img {
transition: all 0.7s ease-in-out;
}
.thumbImage .thumbText h3 {
margin-bottom: 10px;
phần đệm trên cùng: 10px;
viền dưới: 1px liền khối #fff;
transition: all 1s ease-in-out;
}
.thumbImage .thumbText p {
margin-bottom: 10px;
color: #fff;
transition: all 1s ease-in-out;
}
.thumbImage .thumbTextWrap {
position: absolute;
top: 0;
chiều cao: 100%;
phần đệm: 0 20px;
độ mờ: 0;
background: #7b133c;
text-align: center;
transition: all 1s ease-in-out;
}
.ie8 .thumbImage .thumbTextWrap {
display: none;
}
.thumbImage .thumbTextWrap:before {
nội dung: '';
hiển thị: khối nội tuyến;
chiều cao: 100%;
căn dọc: giữa;
margin-right: -0.5em;
}
.thumbText {
text-align: center;
biến đổi: tỷ lệ (0);
transition: all 0.7s ease-in-out;
hiển thị: khối nội tuyến;
căn dọc: giữa;
chiều rộng: 90%;
}
.thumbImage:hover img {
độ mờ: 0;
transform: scale(10);
}
.thumbImage:hover .thumbTextWrap {
độ mờ: 1;
}
.ie8 .thumbImage:hover .thumbTextWrap {
display: block;
}
.thumbImage:hover .thumbText {
biến đổi: tỷ lệ (1);
}
.thumbLink {
background: url(../images/icons/icon-magnify.png) center center no-repeat #fff;
chiều rộng: 30px;
chiều cao: 30px;
bán kính đường viền: 15px;
độ mờ: 0,5;
lề: 0 tự động;
}
.thumbLink:hover {
độ mờ: 1;
}
.portfolioBottom {
background: #111111;
chiều cao: 44px;
width: 100%;
rõ ràng: trái;
}
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
chỉ số z: 1;
}
.isotope, .isotope .isotope-item {
transition-duration: 0.8s;
}
.isotope {
transition-property: height, width;
}
.isotope .isotope-item {
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
Gallery Item
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Gallery Item
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum.">
Gallery Item
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
câu trả lời hay nhất
您可能需要将元素包装在标签中，并将类绑定(bind)到 fancybox，例如
那么这段代码就可以运行了
$(document).ready(function () {
$(".fancybox-thumbs").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
thumbs : {
width : 50,
height : 50,
source : function (current) {
return $(current.element).data('thumbnail');
},
},
title : {
type : 'outside'
}
}
});
});
除非你知道自己在做什么，否则你不需要弄乱原始的 js 和 css 文件
Để ý:当然，不要忘记在您的页面中包含指向 fancybox thumbs helpers 的链接，并在 fancybox 文件之后加载它们
关于jquery - fancybox thumbs 没有办法让它工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28655573/
27
4
0
Tôi là một lập trình viên xuất sắc, rất giỏi!