如何使用 colorbox 在我的页面上显示隐藏的 div 而无需硬编码？

Posted 2023-05-08

【中文标题】如何使用 colorbox 在我的页面上显示隐藏的 div 而无需硬编码？

【英文标题】：How do I use colorbox to show hidden divs on my page without hardcoding?

【发布时间】：2011-04-16 23:29:50

【问题描述】：

我正在使用 Colorbox 在我的页面上显示隐藏 div 的 html 内容。我可以让它与以下完美配合：

$("a.colorbox").colorbox(width:"600px", inline:true, href:"#344");

这将显示 ID 为 344 的 div。

但是，因为我正在尝试使用 WordPress 构建一个可扩展的动态页面，所以我希望能够通过一个函数来获取我的 div 的 ID，而不是在 jquery 调用中对其进行硬编码。

我修改了杰克摩尔的例子：

$("a[rel='example']").colorbox(title: function()
    var url = $(this).attr('href');
    return '<a href="'+url+'" target="_blank">Open In New Window</a>';
); 

让它看起来像这样：

$(".colorbox").colorbox(width:"600px", inline:true, href:function()
    var elementID = $(this).attr('id');
    return elementID;
); 

问题在于 colorbox 函数的 href 属性正在查找 ID 前面带有 # 标记的字符串。我尝试了各种将 # 连接到函数前面的方法，包括返回值中的 #，以及将 # 连接到 elementID 变量。没有运气。

我还尝试使用 Jack 示例中的语法（没有运气），因此我的 return 语句看起来像这样：

return "#'+elementID+'";

我认为我的基本问题是：如何使用 colorbox 在我的页面上显示隐藏的 div 而无需对所有内容进行硬编码？

感谢您的帮助， 吉尔特

【问题讨论】：

我的第一个想法是return "#'+elementID+'"不会返回一个字符串？也许return "#" + elementID; 会更近。

【参考方案1】：

我真的不喜欢上面给出的任何答案。我就是这样做的（类似但不完全相同）。 我还为那些对 javascript 和 colorbox 插件有点陌生的人完整地评论了它。

$(document).ready(function()  //waits until the DOM has finished loading
    if ($('a.lightboxTrigger').length) //checks to see if there is a lightbox trigger on the page
        $('a.lightboxTrigger').each(function() //for every lightbox trigger on the page...
            var url = $(this).attr("href"); // sets the link url as the target div of the lightbox
            $(url).hide(); //hides the lightbox content div
            $(this).colorbox(
                 inline:true, // so it knows that it's looking for an internal href
                 href:url, // tells it which content to show
                 width:"70%",
                 onOpen:function() //triggers a callback when the lightbox opens
                    $(url).show(); //when the lightbox opens, show the content div
                 ,
                 onCleanup:function()
                    $(url).hide(); //hides the content div when the lightbox closes
                 
            ).attr("href","javascript:void(0)"); //swaps the href out with a javascript:void(0) after it's saved the href to the url variable to stop the browser doing anything with the link other than launching the lightbox when clicked
              //you could also use "return false" for the same effect but I proffered that way
        )
     
);

这是html：

<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
     <p>Lightbox content goes here</p>
</div>

我认为它可以与一页上的多个灯箱一起使用，但我尚未对此进行测试。

【讨论】：

您记录了“内联”选项非常有帮助！我要补充一点，如果您将目标放在隐藏的 div 中，您可以放弃此处显示的 onOpen 和 onCleanup 步骤。

好点。 :) 我还是有点缺乏经验的时候写的。

【参考方案2】：

我也面临同样的问题。你的 html 是什么样的？意思是，你是如何构建你的“div”的

我的看起来像这样： Javascript：

<script>
    $(document).ready(function () 
    $("a.colorbox").colorbox( width: "50%", inline: true, href: function () 
          var elementID = $(this).attr('id');
          return "#" + elementID;
        
      ); 
    );
</script>

html 看起来像（我尝试更改显示：无）：

<a class='colorbox' href="#">Inline HTML</a>
   <div style="display:none">
       <div id="pop">
          This data is to be displayed in colorbox
       </div>
   </div>

【讨论】：

您需要将 .colorbox 链接的 href 设置为 #pop，例如：

【参考方案3】：

return "#" + elementID; 

正如大卫所说，会产生预期的效果。

【讨论】：

查看：***.com/editing-help 以获取有关如何格式化您的答案的建议，例如，让代码 看起来 像代码。 +1，顺便说一句（在一种无耻的自我庆祝行为中......）=）

太棒了，谢谢大家！这确实有效。欣赏它：D

你能分享你的 jQuery 的 css/html 吗？我遇到了类似的问题……它是什么样子的？

【参考方案4】：

这就是我让它工作的方式

HTML：（取自其中一个答案中的示例）

<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
     <p>Lightbox content goes here</p>
</div>

Javascript：

$('a.lightboxTrigger').click(function() 
    var ref = $(this).attr("href");
    $.colorbox( html: $(ref).html() );
    $.colorbox.resize();
 );