Fancybox 2字幕上的链接 [英] Links within caption on Fancybox 2
问题描述
我正在使用Fancybox 2生成图库.除了文本,我还希望在照片的标题中包含链接.
I'm using Fancybox 2 to generate a gallery. As well as text, I'd like to have links in the captions of my photos, if necessary.
以下是我想要在标题中包含链接的页面: http://catjohnson.co.英国/婚礼
Here's the page where I'd like to have links within the captions: http://catjohnson.co.uk/weddings
By simply adding an html link in there (following this answer: In Prettyphoto.js or Fancybox... How to add a link within the caption) it breaks the photo within the gallery.
我已经尝试遵循此 http://jsfiddle.net/FWTZA/,尽管它可以工作,我迷失了自己的风格.
I've tried following this http://jsfiddle.net/FWTZA/ and although it works, I lose my styling.
我似乎无法将样式与js小提琴代码集成在一起……这是我目前正在做的事情,正在工作:
I can't seem to get my styling to integrate with the js fiddle code… Here's what I'm doing at the minute, which is working:
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'fade',
closeEffect : 'fade',
nextEffect : 'fade',
prevEffect : 'fade',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background-color' : '#eee'
}
}
}
});
});
我希望这是有道理的!
感谢您的光临!
马丁:)
推荐答案
为此html
<a class="fancybox" data-title-id="title-1" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<div id="title-1" class="hidden">
This is 1st title. <a href="http://google.com">Some link</a>
</div>
<a class="fancybox" data-title-id="title-2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
<div id="title-2" class="hidden">
This is <b>2nd title</b>. <a href="http://google.com">Some link</a>
</div>
...设置helpers选项,不要忘了用逗号分隔每个选项:
...set the helpers option and don't forget to separate each option with a comma like :
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
openEffect : 'fade',
closeEffect : 'fade',
nextEffect : 'fade',
prevEffect : 'fade',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background-color' : '#eee'
}
}
},
beforeLoad: function() {
var el, id = $(this.element).data('title-id');
if (id) {
el = $('#' + id);
if (el.length) {
this.title = el.html();
}
}
}
});
工作示例: http://jsfiddle.net/FWTZA/372
这篇关于Fancybox 2字幕上的链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!