jquery - fancybox thumbs 没有办法让它工作

Question

我正在使用 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>

Answer 1

您可能需要将元素包装在标签中，并将类绑定(bind)到 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 文件

注意:当然，不要忘记在您的页面中包含指向 fancybox thumbs helpers 的链接，并在 fancybox 文件之后加载它们