fancybox thumbs 没有办法让它工作
fancybox thumbs no way to make it work
我以前用的是 prettyphoto，想换成 fancybox，我的画廊用的是 isotope 滤镜和动画，但我不认为这是问题所在。
图像出现，但没有拇指！在开发工具中选择图片时，有一个名为 fancybox-thumbs 的 div 但它是不可见的！请帮忙
(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 += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';
}
this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');
this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
//Load each thumbnail
$.each(obj.group, function (i) {
var href = thumbSource( obj.group[ i ] );
if (!href) {
return;
}
$("<img />").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;
} else {
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);
} else {
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%;
overflow: hidden;
z-index: 8050;
background: url(../images/icons/icon-magnify.png) center center no-repeat #fff;
width: 30px;
height: 30px;
border-radius: 15px;
opacity: 0.5;
margin: 0 auto;
}
.fancybox-thumbs.bottom {
bottom: 2px;
}
.fancybox-thumbs.top {
top: 2px;
}
.fancybox-thumbs ul {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.fancybox-thumbs ul li {
float: left;
padding: 1px;
opacity: 0.5;
}
.fancybox-thumbs ul li.active {
opacity: 0.75;
padding: 0;
border: 1px solid #fff;
}
.fancybox-thumbs ul li:hover {
opacity: 1;
}
.fancybox-thumbs ul li a {
display: block;
position: relative;
overflow: hidden;
border: 1px solid #222;
background: #111;
outline: none;
}
.fancybox-thumbs ul li img {
display: block;
position: relative;
border: 0;
padding: 0;
max-width: none;
}
#folio {
background: url(../images/gallery-quote.png) center 80px no-repeat #111;
padding-top: 100px;
clear: left;
}
.portfolio_container {
position: relative;
display: block;
overflow: hidden;
width: 100%;
}
.portfolio_container .portfolio {
position: relative;
display: block;
float: left;
overflow: hidden;
width: 25%;
height: auto;
}
.portfolio_container .portfolio .media_box figure a img {
display: block;
margin-left: auto;
margin-right: auto;
}
.portfolio_container .portfolio .media_box .hover_effect {
top: 0;
left: 0;
}
.gallerySelector {
background: #222;
height: 44px;
width: 100%;
margin-top: 20px;
}
.gallerySelectorList {
margin: 0;
width: 100%;
}
.gallerySelectorList li {
float: left;
margin: 0;
list-style: none;
width: 20%;
text-align: center;
padding: 0;
}
.gallerySelectorList li:hover {
background: #83103e;
}
.gallerySelectorList li a {
display: block;
padding: 11px 0;
color: #fff;
text-decoration: none;
margin: 0;
transition: background-color 0.3s ease, color 0.2s ease;
}
.gallerySelectorList li.current {
background: #7b133c;
}
.portfolio_container .portfolio {
width: 20%;
}
.fullwidth {
display: block;
max-width: 100%;
min-width: 100%;
}
#gallery h3 {
margin-bottom: 20px;
}
.project-title {
font-family: 'Oswald', sans-serif;
font-size: 12px;
text-transform: uppercase;
margin-top: 7px;
}
.project-description {
color: #868991;
font-size: 10px;
text-transform: uppercase;
font-weight: 600;
margin: 0 0 20px 0;
}
.columns .overlay-content.loupe {
width: 34px;
height: 34px;
background: url(../../../templates/images/loupe.png) 0px 0px no-repeat;
position: absolute;
top: 22%;
margin: -17px 0 0 -17px;
left: 50%;
z-index: 10;
}
.thumbLink {
display: block;
width: 100%;
}
.thumbImage {
float: left;
position: relative;
overflow: hidden;
display: block;
margin-bottom: 0px;
box-sizing: border-box;
text-align: center;
width: 100%;
height: 100%;
}
.thumbImage img {
transition: all 0.7s ease-in-out;
}
.thumbImage .thumbText h3 {
margin-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid #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;
height: 100%;
padding: 0 20px;
opacity: 0;
background: #7b133c;
text-align: center;
transition: all 1s ease-in-out;
}
.ie8 .thumbImage .thumbTextWrap {
display: none;
}
.thumbImage .thumbTextWrap:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.5em;
}
.thumbText {
text-align: center;
transform: scale(0);
transition: all 0.7s ease-in-out;
display: inline-block;
vertical-align: middle;
width: 90%;
}
.thumbImage:hover img {
opacity: 0;
transform: scale(10);
}
.thumbImage:hover .thumbTextWrap {
opacity: 1;
}
.ie8 .thumbImage:hover .thumbTextWrap {
display: block;
}
.thumbImage:hover .thumbText {
transform: scale(1);
}
.thumbLink {
background: url(../images/icons/icon-magnify.png) center center no-repeat #fff;
width: 30px;
height: 30px;
border-radius: 15px;
opacity: 0.5;
margin: 0 auto;
}
.thumbLink:hover {
opacity: 1;
}
.portfolioBottom {
background: #111111;
height: 44px;
width: 100%;
clear: left;
}
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 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;
}
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-buttons.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-thumbs.css" media="screen">
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-media.js"></script>
<script type="text/javascript">
$(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'
}
}
});
});
$("a.grouped_elements").fancybox();
</script>
<div id="folio" class="page section">
<div class="gallerySelector">
<ul class="gallerySelectorList">
<li class='current'><a data-filter="article.portfolio[data-category~='principal']" href="#">Principal</a></li>
<li><a data-filter="article.portfolio[data-category~='redacao']" href="#">Redação</a></li>
<li><a data-filter="article.portfolio[data-category~='criacao']" href="#">Redação-Criação</a></li>
<li><a data-filter="article.portfolio[data-category~='social']" href="#">Social Media</a></li>
<li><a data-filter="article.portfolio[data-category~='video']" href="#">Audiovisual</a></li>
</ul>
</div>
<section class="portfolio_container">
<article class="portfolio" data-category="principal redacao criacao">
<section class="thumbImage">
<img src="images/gallery/pt-rec1.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="fancybox-thumbs" href="images/gallery/prec1.jpg" rel="fancybox-thumbs" data-thumbnail="images/gallery/pt-rec1.jpg" data-fancybox-group="gallery-1" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="principal redacao criacao">
<section class="thumbImage">
<img src="images/gallery/pt-rec2.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="fancybox-thumbs" href="images/gallery/prec2.jpg" rel="fancybox-thumbs" data-thumbnail="images/gallery/pt-rec2.jpg" data-fancybox-group="gallery-1"><a>title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="redacao criacao">
<section class="thumbImage">
<img src="images/gallery/t-rec3.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="fancybox-thumbs" href="images/gallery/rec3.jpg" rel="fancybox-thumbs" data-thumbnail="images/gallery/t-rec3.jpg"data-fancybox-group="gallery-1" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
您可能需要将您的元素包裹在标签中，并且 class 绑定到像
这样的 fancybox
<a class="fancybox-thumbs" href="image/1_b.jpg" rel="fancybox-thumbs" data-thumbnail="images/1_s.jpg" data-fancybox-group="gallery-1" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum.">
<img src="images/1_s.jpg" alt="" class="fullwidth" />
</a>
那么这段代码就可以了
$(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 文件
注意 ：当然，不要忘记将 link 包含在页面中的 fancybox thumbs helpers 中，并在 fancybox 文件之后加载它们
fancybox-thumbs 的 div 但它是不可见的！请帮忙
(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 += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';
}
this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');
this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
//Load each thumbnail
$.each(obj.group, function (i) {
var href = thumbSource( obj.group[ i ] );
if (!href) {
return;
}
$("<img />").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;
} else {
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);
} else {
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%;
overflow: hidden;
z-index: 8050;
background: url(../images/icons/icon-magnify.png) center center no-repeat #fff;
width: 30px;
height: 30px;
border-radius: 15px;
opacity: 0.5;
margin: 0 auto;
}
.fancybox-thumbs.bottom {
bottom: 2px;
}
.fancybox-thumbs.top {
top: 2px;
}
.fancybox-thumbs ul {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.fancybox-thumbs ul li {
float: left;
padding: 1px;
opacity: 0.5;
}
.fancybox-thumbs ul li.active {
opacity: 0.75;
padding: 0;
border: 1px solid #fff;
}
.fancybox-thumbs ul li:hover {
opacity: 1;
}
.fancybox-thumbs ul li a {
display: block;
position: relative;
overflow: hidden;
border: 1px solid #222;
background: #111;
outline: none;
}
.fancybox-thumbs ul li img {
display: block;
position: relative;
border: 0;
padding: 0;
max-width: none;
}
#folio {
background: url(../images/gallery-quote.png) center 80px no-repeat #111;
padding-top: 100px;
clear: left;
}
.portfolio_container {
position: relative;
display: block;
overflow: hidden;
width: 100%;
}
.portfolio_container .portfolio {
position: relative;
display: block;
float: left;
overflow: hidden;
width: 25%;
height: auto;
}
.portfolio_container .portfolio .media_box figure a img {
display: block;
margin-left: auto;
margin-right: auto;
}
.portfolio_container .portfolio .media_box .hover_effect {
top: 0;
left: 0;
}
.gallerySelector {
background: #222;
height: 44px;
width: 100%;
margin-top: 20px;
}
.gallerySelectorList {
margin: 0;
width: 100%;
}
.gallerySelectorList li {
float: left;
margin: 0;
list-style: none;
width: 20%;
text-align: center;
padding: 0;
}
.gallerySelectorList li:hover {
background: #83103e;
}
.gallerySelectorList li a {
display: block;
padding: 11px 0;
color: #fff;
text-decoration: none;
margin: 0;
transition: background-color 0.3s ease, color 0.2s ease;
}
.gallerySelectorList li.current {
background: #7b133c;
}
.portfolio_container .portfolio {
width: 20%;
}
.fullwidth {
display: block;
max-width: 100%;
min-width: 100%;
}
#gallery h3 {
margin-bottom: 20px;
}
.project-title {
font-family: 'Oswald', sans-serif;
font-size: 12px;
text-transform: uppercase;
margin-top: 7px;
}
.project-description {
color: #868991;
font-size: 10px;
text-transform: uppercase;
font-weight: 600;
margin: 0 0 20px 0;
}
.columns .overlay-content.loupe {
width: 34px;
height: 34px;
background: url(../../../templates/images/loupe.png) 0px 0px no-repeat;
position: absolute;
top: 22%;
margin: -17px 0 0 -17px;
left: 50%;
z-index: 10;
}
.thumbLink {
display: block;
width: 100%;
}
.thumbImage {
float: left;
position: relative;
overflow: hidden;
display: block;
margin-bottom: 0px;
box-sizing: border-box;
text-align: center;
width: 100%;
height: 100%;
}
.thumbImage img {
transition: all 0.7s ease-in-out;
}
.thumbImage .thumbText h3 {
margin-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid #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;
height: 100%;
padding: 0 20px;
opacity: 0;
background: #7b133c;
text-align: center;
transition: all 1s ease-in-out;
}
.ie8 .thumbImage .thumbTextWrap {
display: none;
}
.thumbImage .thumbTextWrap:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.5em;
}
.thumbText {
text-align: center;
transform: scale(0);
transition: all 0.7s ease-in-out;
display: inline-block;
vertical-align: middle;
width: 90%;
}
.thumbImage:hover img {
opacity: 0;
transform: scale(10);
}
.thumbImage:hover .thumbTextWrap {
opacity: 1;
}
.ie8 .thumbImage:hover .thumbTextWrap {
display: block;
}
.thumbImage:hover .thumbText {
transform: scale(1);
}
.thumbLink {
background: url(../images/icons/icon-magnify.png) center center no-repeat #fff;
width: 30px;
height: 30px;
border-radius: 15px;
opacity: 0.5;
margin: 0 auto;
}
.thumbLink:hover {
opacity: 1;
}
.portfolioBottom {
background: #111111;
height: 44px;
width: 100%;
clear: left;
}
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 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;
}
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-buttons.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-thumbs.css" media="screen">
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-media.js"></script>
<script type="text/javascript">
$(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'
}
}
});
});
$("a.grouped_elements").fancybox();
</script>
<div id="folio" class="page section">
<div class="gallerySelector">
<ul class="gallerySelectorList">
<li class='current'><a data-filter="article.portfolio[data-category~='principal']" href="#">Principal</a></li>
<li><a data-filter="article.portfolio[data-category~='redacao']" href="#">Redação</a></li>
<li><a data-filter="article.portfolio[data-category~='criacao']" href="#">Redação-Criação</a></li>
<li><a data-filter="article.portfolio[data-category~='social']" href="#">Social Media</a></li>
<li><a data-filter="article.portfolio[data-category~='video']" href="#">Audiovisual</a></li>
</ul>
</div>
<section class="portfolio_container">
<article class="portfolio" data-category="principal redacao criacao">
<section class="thumbImage">
<img src="images/gallery/pt-rec1.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="fancybox-thumbs" href="images/gallery/prec1.jpg" rel="fancybox-thumbs" data-thumbnail="images/gallery/pt-rec1.jpg" data-fancybox-group="gallery-1" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="principal redacao criacao">
<section class="thumbImage">
<img src="images/gallery/pt-rec2.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="fancybox-thumbs" href="images/gallery/prec2.jpg" rel="fancybox-thumbs" data-thumbnail="images/gallery/pt-rec2.jpg" data-fancybox-group="gallery-1"><a>title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="redacao criacao">
<section class="thumbImage">
<img src="images/gallery/t-rec3.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="fancybox-thumbs" href="images/gallery/rec3.jpg" rel="fancybox-thumbs" data-thumbnail="images/gallery/t-rec3.jpg"data-fancybox-group="gallery-1" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
您可能需要将您的元素包裹在标签中，并且 class 绑定到像
这样的 fancybox<a class="fancybox-thumbs" href="image/1_b.jpg" rel="fancybox-thumbs" data-thumbnail="images/1_s.jpg" data-fancybox-group="gallery-1" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum.">
<img src="images/1_s.jpg" alt="" class="fullwidth" />
</a>
那么这段代码就可以了
$(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 文件
注意 ：当然，不要忘记将 link 包含在页面中的 fancybox thumbs helpers 中，并在 fancybox 文件之后加载它们