使用 jquery .click 函数调用 fancybox答案

【问题标题】：calling fancybox using jquery .click function使用 jquery .click 函数调用 fancybox
【发布时间】：2009-08-14 15:42:01
【问题描述】：

我正在尝试自定义 fancybox，以便当点击页面上显示的 4 个图像中的一个时，这是在 fancybox 窗口中加载的那个。

为此，我想使用 jquery .attr 函数将图像 src（作为变量）传递给主图像持有者。

我当前的jquery代码是：

    jQuery(document).ready(function($) {

        $("a.group").click(function() {
            var image = $(this).attr("name");      
            $("#largeId").attr({ src: image});
            $("a.group").fancybox({
                      'frameWidth':966,
                      'frameHeight': 547,
                      'hideOnContentClick': false,
                      'overlayOpacity': 0.85,
                      'callbackOnShow': function() {
                                    $("#container ul#thumbnails li a").click(function(){
                                    var largePath = $(this).attr("title");
                                    $("#largeId").fadeOut("fast").hide();
                                    $("#largeId").attr({ src: largePath });
                                    $("#largeId").fadeIn("slow");return false;
                            });
                       $("#container ul#thumbnails li a").click(function(){
                       $('.active').removeClass('active');
                       $(this).addClass("active");
                            });
                      }
         });

    });
});

主页图片的 HTML 是：

    <ul id="images">

<li><a id="one_image" class="group" href="#hidden" title="images/1_large.jpg"><img src="Images/1.jpg" alt="MOMA NY #1" title="MOMA NY #1" /></a></li>
<li><a class="group" href="#hidden" title="images/2_large.jpg"><img src="Images/2.jpg" alt="MOMA NY #2" title="MOMA NY #2" /></a></li>
<li><a class="group" href="#hidden" title="images/3_large.jpg"><img src="Images/3.jpg" alt="MOMA NY #3" title="MOMA NY #3" /></a></li>
<li><a class="group" href="#hidden" title="images/4_large.jpg"><img src="Images/4.jpg" alt="MOMA NY #4" title="MOMA NY #4" /></a></li>

</ul>

对于 Fancybox 窗口：

<div id="main_image">

<img id="largeId" src="" alt="" title="" />

</div>

-------编辑-----------

你知道，如果我一开始就去掉 click 函数，这主要是可行的，fancybox 调用中的函数都可以正常工作。

【问题讨论】：

标签： javascript jquery html jquery-plugins fancybox

【解决方案1】：

我认为它变得过于复杂了。

  jQuery(document).ready(function($) {
        $("a.group").fancybox({
                'frameWidth': 300,
                'frameHeight': 300
                });

    });

这应该是您需要的所有 javascript。然后你应该将标题和分组移动到 a 标签上。

<ul id="images">
    <li><a class="group" rel="group" href="images/2_large.jpg" title="MOMA NY #1"><img src="Images/3.jpg" alt="MOMA NY #1"/></a></li>
    <li><a class="group" rel="group" href="images/1_large.jpg" title="MOMA NY #2" ><img src="Images/3.jpg" alt="MOMA NY #2"/></a></li>
    <li><a class="group" rel="group" href="images/3_large.jpg" title="MOMA NY #3" ><img src="Images/3.jpg" alt="MOMA NY #3"/></a></li>
    <li><a class="group" rel="group" href="images/4_large.jpg" title="MOMA NY #4" ><img src="Images/4.jpg" alt="MOMA NY #4"/></a></li>
</ul>

这就是你要找的吗？

【讨论】：

不是真的！我需要 Fancybox 函数中的其余项目来控制窗口大小并调用该函数以在模态窗口中工作。
我很确定您可以在 URL 的 GET 参数中控制所有这些。我在上面添加了一个示例。

【解决方案2】：

我以前从未使用过fancybox，但是从您的代码来看，我认为调用fancybox 的行需要从

$("a.group").fancybox({

到这里：

$(this).fancybox({

抱歉，我没有测试过这个……但我相信这是你的问题。

【讨论】：

【解决方案3】：

当您需要被点击链接的属性时，有些人可能会觉得这很有用。

//html:
<a href="#popup" id="lnk_0">Create a new product w/ this image</a>
<div style="display:none;"><div id="popup"><h1>This is popup text.</h1></div></div>

//jquery:
$("a[href='#popup']").fancybox({
  'onStart': function(selectedArray, selectedIndex, selectedOpts)
  {
    alert(selectedOpts.orig.attr('id'));
   }
});

【讨论】：

【解决方案4】：

注意：这是一个旧线程，但只是为了澄清如果使用点击调用你不应该使用 $(this) 因为它需要双击。

$(function() {
   $("myelement").click(function() {
    $.fancybox();
  });
});

【讨论】：

【解决方案5】：

<a style="display: none;" href="#fancy-box" class="fancybox-inline" id="fancybox-trigger"></a> 



<script type="text/javascript">
    $(document).ready(function() {
        $("#fancybox-trigger").trigger('click');
    });
</script>

【讨论】：