我需要合并2个类，但其中一个重叠另一个类。我曾经thumbLink这是一个链接到图像本身的lupe图像，我无法使其与fancybox-thumbs一起使用，因为如果我使用thumblink，则没有fancybox画廊，如果我使用fancybox-thumbs则没有lupe，大图像的link就是缩略图本身!!!!我已经尝试过同时使用<a class= thumbLink fancybox-thumbs .....</a>，但它不起作用！现在我搞砸了整个画廊试图让它发挥作用！
当我使用prettyphoto＆gt;时，请检查我的画廊。 www.nausea.ws
现在看看现在发生了什么：
/*!
* Thumbnail helper for fancyBox
* version: 1.0.7 (Mon, 01 Oct 2012)
* @requires fancyBox v2.0 or later
*
* Usage:
* $(".fancybox").fancybox({
* helpers : {
* thumbs: {
* width : 50,
* height : 50
* }
* }
* });
*
*/
(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;
}
#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;
border: 0;
padding: 0;
max-width: 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%;
}
.fechar {
text-align:right;
margin-left:95%;
font-size:11px;
}
.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;
width:280px;
}
.thumbImage .thumbTextWrap {
position: absolute;
top: 0;
height: 100%;
padding: 0 0px;
opacity: 0;
background: rgba(0, 0, 0, 0.57);
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: 280px;
}
.thumbImage:hover img {
opacity: 1;
transform: scale(1.5);
}
.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;
}
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
transition-duration: 0s;
}
.isotope.infinite-scrolling {
transition: none;
} <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" style="
width: 150px;
margin-left: 65px;
margin-right: 65px;
font-size: 24px;
margin-bottom: 20px;
">Portifólio #</h3>
<a class="thumbLink 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" style="
width: 150px;
margin-left: 65px;
margin-right: 65px;
font-size: 24px;
margin-bottom: 20px;
">Portifólio #</h3>
<a class="thumbLink fancybox-thumbs" href="images/gallery/prec2.jpg" rel="fancybox-thumbs" data-thumbnail="images/gallery/pt-rec2.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="redacao criacao">
<section class="thumbImage">
<img src="images/gallery/t-rec3.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle" style="
width: 150px;
margin-left: 65px;
margin-right: 65px;
font-size: 24px;
margin-bottom: 20px;
">Portifólio #</h3>
<a class="thumblink 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."><img src="images/gallery/t-rec3.jpg" alt="" class="fullwidth"></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="principal redacao criacao">
<section class="thumbImage">
<img src="images/gallery/pt-rec4.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle" style="
width: 150px;
margin-left: 65px;
margin-right: 65px;
font-size: 24px;
margin-bottom: 20px;
">Portifólio #</h3>
<a class="fancybox-thumbs" href="images/gallery/prec4.jpg" rel="fancybox-thumbs" data-thumbnail="images/gallery/pt-rec4.jpg" data-fancybox-group="gallery-1" ><img src="images/gallery/pt-rec4.jpg" alt="" class="fullwidth"></a>
</div>
</div>
</section>
</article>