Colorbox -不能在没有错误的情况下维护多个组

Colorbox - Can't maintain multiple groups without errors

本文关键字：维护 情况下 有错误 不能 Colorbox      更新时间：2023-09-26

我在这里使用Colorbox

如果你看看设置，我在一个页面上有多个组。我把它们分别划分为第1到第9组。但是当我单击第二个和第三个项目时，它会根据作者的代码以应有的方式显示。我希望所有内容都以标识Group1的相同方式显示(这是一个弹性过渡)。但是，如果我把所有的图片都放在Group1下，那么它们就会成为同一个图库的一部分，我不希望这样。

<h2>OAC Walkthrough</h2> <!--Elastic Transition-->
<p><a class="group1" href="content/ohoopee1.jpg" title="OAC Welcome Page">OAC Welcome Page</a></p>
<p><a class="group1 hidden" href="content/ohoopee2.jpg" title="OAC Page 2">OAC Page 2</a></p>
<p><a class="group1 hidden" href="content/ohoopee3.jpg" title="OAC Page 3">OAC Page 3</a></p>

<h2>FAFSA Walkthrough</h2> <!--Elastic Transition-->
<p><a class="group2" href="content/ohoopee1.jpg" title="FAFSA Welcome Page">FAFSA Welcome Page</a></p>
<p><a class="group2 hidden" href="content/ohoopee2.jpg" title="FAFSA Page 2">FAFSA Page 2</a></p>
<p><a class="group2 hidden" href="content/ohoopee3.jpg" title="FAFSA Page 3">FAFSA Page 3</a></p>
<h2>FAFSA PIN Walkthrough</h2> <!--Elastic Transition-->
<p><a class="group3" href="content/ohoopee1.jpg" title="PIN Welcome Page">PIN Welcome Page</a></p>
<p><a class="group3 hidden" href="content/ohoopee2.jpg" title="PIN Page 2">PIN Page 2</a></p>
<p><a class="group3 hidden" href="content/ohoopee3.jpg" title="PIN Page 3">PIN Page 3</a></p>

如何解决这个问题?

事实证明，在代码的标记中有以下代码…

$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});

我只是去掉了第2、3和4组，并采用第1组的命名法，并重复它看起来像这样…

$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2'});
$(".group3").colorbox({rel:'group3'});
$(".group4").colorbox({rel:'group4'});
$(".group5").colorbox({rel:'group5'});
$(".group6").colorbox({rel:'group6'});
$(".group7").colorbox({rel:'group7'});
$(".group8").colorbox({rel:'group8'});
$(".group9").colorbox({rel:'group9'});

…因为一共有9组。现在一切都好了。

相关文章：