(JQuery) Fancybox 仅使用类启动？

发布于 2024-10-03 19:17:11 字数 1199 浏览 4 评论 0原文

我正在尝试使用 Fancybox 获取带有缩略图的视频列表 - 问题是似乎每个链接都使用类来启动 fancybox

如果我希望它更加动态，会出现一个视频链接列表，每个链接都会打开一个新视频？我不应该为每一个都创建一个新的点击函数定义吗？

<script type="text/javascript">

    $(document).ready(function () {

$(".fancyvideo5").click(function () { $.fancybox({ ‘填充’：0， '覆盖不透明度'：0.7， '自动尺寸'：假， '内容'：'myConent'， 'onComplete': function () { $("#fancybox-inner").css({ 'overflow': 'hidden' }); }, 'onClosed': function () { $("#fancybox-inner").empty(); } }); 返回假； }); // 精美视频

正文将有类似的内容：

<ul>

    <li>
        <a title="test" href="javascript:;" class="fancyvideo5"><img  src="thumbnail.jpg" /></a>
    </li>                                                                              

</ul>

id 喜欢有类似的内容

<a title="test" href="javascript:openVideo(1);" class="fancyvideo5"><img  src="thumbnail.jpg" /></a>

所以我可以传递视频信息并调用该函数，而不是准备好文档上的所有内容。

谢谢

原文

I'm trying to get a video list w/ thumbnails working with Fancybox - the problem is that it seems each link uses classes to launch the fancybox

What if i want this to be more dynamic, a list of video links and each one opens a new video? I shouldnt have to create a new click function defintion for each one do i?

<script type="text/javascript">

    $(document).ready(function () {

$(".fancyvideo5").click(function () {
$.fancybox({
'padding': 0,
'overlayOpacity': 0.7,
'autoDimensions': false,
'content': 'myConent',
'onComplete': function () { $("#fancybox-inner").css({ 'overflow': 'hidden' }); },
'onClosed': function () { $("#fancybox-inner").empty(); }
});
return false;
}); // fancyvideo

and the body will have something like:

<ul>

    <li>
        <a title="test" href="javascript:;" class="fancyvideo5"><img  src="thumbnail.jpg" /></a>
    </li>                                                                              

</ul>

id like to have something like

<a title="test" href="javascript:openVideo(1);" class="fancyvideo5"><img  src="thumbnail.jpg" /></a>

So i can pass the video information and call the function instead of everything on document ready.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我不会写诗 2024-10-10 19:17:11

我已经有一段时间没有使用 fancybox 了，但如果我没记错的话，你可以使用一个 fancybox 函数。

$(document).ready(function () {
    $(a.fancyvideo).fancybox(
         //settings
));

然后，为您提供链接

<a href="#video" class="fancyvideo" />
<a href="#video2" class="fancyvideo" />
<a href="#video3" class="fancyvideo" />
<a href="#video4" class="fancyvideo" />

和

<div id="video" style="display: none;"> 
//insert embed code here
</div>
<div id="video2" style="display: none;"> 
//insert embed code here
</div>

<div id="video3" style="display: none;"> 
//insert embed code here
</div>

<div id="video4" style="display: none;"> 
//insert embed code here
</div>

I haven't used fancybox in awhile, but if I remember correctly you can use one fancybox function.

$(document).ready(function () {
    $(a.fancyvideo).fancybox(
         //settings
));

Then, for you links

<a href="#video" class="fancyvideo" />
<a href="#video2" class="fancyvideo" />
<a href="#video3" class="fancyvideo" />
<a href="#video4" class="fancyvideo" />

and

<div id="video" style="display: none;"> 
//insert embed code here
</div>
<div id="video2" style="display: none;"> 
//insert embed code here
</div>

<div id="video3" style="display: none;"> 
//insert embed code here
</div>

<div id="video4" style="display: none;"> 
//insert embed code here
</div>

回复收藏 0 原文

~没有更多了~