Question

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

感谢您的帮助， Jiert

Answer 1

我真的不喜欢上面给出的任何答案。这就是我做的方式（类似但不完全相同）。我还对人们对Javascript和彩盒插件有点新的评论。

$(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>

我认为它可以在一个页面上使用多个灯箱，但我没有用它进行测试。

Answer 2

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

的我看起来像这样：使用Javascript：

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

html看起来像（我尝试更改display：none）：

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

Answer 3

return "#" + elementID;

大卫说，

会产生预期的效果。

Answer 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();
 });

如何在没有硬编码的情况下使用colorbox在我的页面上显示隐藏的div？

4 个答案: