Jquery ColorBox：使用下一个和上一个按钮显示内联内容

Posted 2023-02-25

【中文标题】Jquery ColorBox：使用下一个和上一个按钮显示内联内容

【英文标题】：Jquery ColorBox: Display inline content with next and previous button

【发布时间】：2011-09-27 07:21:47

【问题描述】：

我正在尝试使用名为 ColorBox (http://colorpowered.com/colorbox/) 的 Jquery Lightbox，但遇到了一些麻烦。

我想使用灯箱显示内联内容，但同时显示下一个和上一个按钮。这样，就像在照片库中一样，我可以浏览所有与下一个和上一个按钮共享相同 rel 属性的项目。

到目前为止，我的代码有些工作。但似乎无法识别具有相同 rel 属性的所有元素。事实上，它们只有在我事先单击下一个和上一个按钮时才会出现。

这是我的 html

<div id="galcontainer">
<div class="element">
    <a href="link.php" rel="Catalogue" cbx="Catalogue1" class="cbx">
        <img src="image.jpg" />
    </a>
    <div style="display:none">
        <div id="Catalogue1">
            Content Goes Here
        </div>
    </div>
</div>

<div class="element">
    <a href="link.php" rel="Catalogue" cbx="Catalogue27" class="cbx">
        <img src="image.jpg" />
    </a>
    <div style="display:none">
        <div id="Catalogue27">
            Content Goes Here
        </div>
    </div>
</div>
...
</div>

这里是 Jquery 代码：

$("a.cbx").click(function()
   var divtoload=$(this).attr("cbx");
   var cbxgroup=$(this).attr("rel");
   $(this).colorbox(rel:cbxgroup, width:"70%", maxWidth:"720px", inline:true, href:"#"+divtoload);
)

【问题讨论】：

不确定我是否理解您的要求。你说“..还有下一个和上一个按钮出现”。这是否意味着您的问题是没有出现下一个和上一个按钮？但在你的下一句话中，你说“......事实上，它们只有在我事先点击下一个和上一个按钮时才会出现”......

【参考方案1】：

我正在解决类似的问题。我基本上简化了一切，并得到了这个工作。

javascript

<script type="text/javascript">
  $(document).ready(function() 
    $(".group1").colorbox(rel:'group1', inline:true, href:$(this).attr('href'));
  ); 
</script>

内容

<p><a class="group1" href="#box1">Grouped Photo 1</a></p>
<p><a class="group1" href="#box2">Grouped Photo 2</a></p>
<p><a class="group1" href="#box3">Grouped Photo 3</a></p>

<div id="box1">
  Some text in box 1 Some text in box 1
  Some text in box 1
  Some text in box 1
  Some text in box 1
  Some text in box 1
</div>

<div id="box2">
  Some text in box 2
  Some text in box 2
  Some text in box 2
  Some text in box 2
  Some text in box 2        
</div>

<div id="box3">
  Some text in box 3
  Some text in box 3
  Some text in box 3
  Some text in box 3
  Some text in box 3                
</div>      

【讨论】：

这正是我想要做的事情，谢谢！

【参考方案2】：

我经常添加一个新元素，所以在开头添加一个新元素会比我想要的要长。所以我自动化了这个过程，生成的代码看起来和你的一模一样（在你的帖子中），但是 colorbox 不起作用。有人现在如何修复它（如果可能的话）？非常感谢您的帮助。

如果我这样编辑你的代码

<div class="links">
 <p><a class="group1">Grouped Photo 1</a></p>
 <p><a class="group1">Grouped Photo 2</a></p>
 <p><a class="group1">Grouped Photo 3</a></p>
</div>
<div class="boxes">
        <div>
          Some text in box 1 Some text in box 1
          Some text in box 1
          Some text in box 1
          Some text in box 1
          Some text in box 1
        </div>

        <div>
          Some text in box 2
          Some text in box 2
          Some text in box 2
          Some text in box 2
          Some text in box 2        
        </div>

        <div>
          Some text in box 3
          Some text in box 3
          Some text in box 3
          Some text in box 3
          Some text in box 3                
        </div> 
</div>

还有 javascript：

$('.links a').each(function(index) 
    q(this).attr("href","#box"+index);
);
$('.boxes div').each(function(index) 
    q(this).attr("id","#box"+index);
);

这会遍历所有链接并将它们添加到与链接在 href 属性中具有相同的 id

【参考方案3】：

我知道这是一个老问题。但找到了不同的解决方案。插件开发者推荐：https://github.com/jackmoore/colorbox/issues/600

<a href='#' id='open'>Open inline group</a>
<div style='display:none'>
    <div class='inline'>
        <div style='padding:10px; background:#fff;'>
            <p><strong>This content comes from a hidden element on this page.</strong></p>
        </div>
    </div>
    <div class='inline'>
        <div style='padding:10px; background:#fff;'>
            <p><strong>2. This content comes from a hidden element on this page.</strong></p>
        </div>
    </div>
    <div class='inline'>
        <div style='padding:10px; background:#fff;'>
            <p><strong>3. This content comes from a hidden element on this page.</strong></p>
        </div>
    </div>
    <div class='inline'>
        <div style='padding:10px; background:#fff;'>
            <p><strong>4. This content comes from a hidden element on this page.</strong></p>
        </div>
    </div>
</div>
<script>
      var $group = $('.inline').colorbox(inline:true, rel:'inline', href: function()
            return $(this).children();
      );
      $('#open').on('click', function(e)
            e.preventDefault();
            $group.eq(0).click();
      );
</script>