Jquery 颜色框在DOM中生成2个div

由于我将colobox更新为1.4.15，我遇到了一个问题：

在DOM中，我有两个div，id=“colorbox”，一个是隐藏的，另一个是可见的：

隐藏的一个：

<div id="colorbox" class="" role="dialog" tabindex="-1" style="display: none;">
<div id="cboxWrapper">
<div>
<div id="cboxTopLeft" style="float: left;"></div>
<div id="cboxTopCenter" style="float: left;"></div>
<div id="cboxTopRight" style="float: left;"></div>
</div>
<div style="clear: left;">
<div id="cboxMiddleLeft" style="float: left;"></div>
<div id="cboxContent" style="float: left;">
<div id="cboxTitle" style="float: left;"></div>
<div id="cboxCurrent" style="float: left;"></div>
<button id="cboxPrevious" type="button"></button>
<button id="cboxNext" type="button"></button>
<button id="cboxSlideshow"></button>
<div id="cboxLoadingOverlay" style="float: left;"></div>
<div id="cboxLoadingGraphic" style="float: left;"></div>
<button id="cboxClose" type="button"></button>
<div id="cboxLikes" style="float: left;"></div>
</div>
</div>
<div id="cboxMiddleRight" style="float: left;"></div>
</div>
<div style="clear: left;">
<div id="cboxBottomLeft" style="float: left;"></div>
<div id="cboxBottomCenter" style="float: left;"></div>
<div id="cboxBottomRight" style="float: left;"></div>
</div>
</div>
<div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div>
</div>

问题是我不能操纵这个盒子

我正在使用： -JQuery 2.0.0 -jQueryUI1.10.3 -专栏1.4.15

谢谢你的帮助

---

<>：

你只应该在你的DOM中使用一次ID——如果你发现自己需要不止一次使用它，考虑把它改为类而不是ID！如果您尝试多次使用ID，它将无法正常工作

<div id="colorbox" class="cboxSlideshow_off" role="dialog" tabindex="-1" style="display: block; visibility: visible; top: 117px; left: 32px; position: absolute; width: 1200px; height: 631px;">
<div id="cboxWrapper" style="height: 631px; width: 1200px;">
<div>
<div style="clear: left;">
<div id="cboxMiddleLeft" style="float: left; height: 564px;"></div>
<div id="cboxContent" style="float: left; width: 858px; height: 564px;">
<div id="cboxLoadedContent" style="width: 858px; overflow: auto; height: 536px;">
<div id="cboxTitle" style="float: left; display: block;">LAN'Oween 2013</div>
<div id="cboxCurrent" style="float: left; display: block;">Image 1 sur 36</div>
<button id="cboxPrevious" type="button" style="display: block;">Précédante</button>
<button id="cboxNext" type="button" style="display: block;">Suivante</button>
<button id="cboxSlideshow" style="display: block;">Démarrer le diaporama</button>
<div id="cboxLoadingOverlay" style="float: left; display: none;"></div>
<div id="cboxLoadingGraphic" style="float: left; display: none;"></div>
<button id="cboxClose" type="button">Fermer</button>
</div>
<div id="cboxMiddleRight" style="float: left; height: 564px;"></div>
</div>
<div style="clear: left;">
<div id="cboxBottomLeft" style="float: left;"></div>
<div id="cboxBottomCenter" style="float: left; width: 858px;"></div>
<div id="cboxBottomRight" style="float: left;"></div>
</div>
</div>

    $("a.lightbox").colorbox(
    {
        slideshow: true,
        slideshowSpeed: 5000,
        slideshowAuto: false,
        slideshowStart: "Démarrer le diaporama",
        slideshowStop: "Arrêter le diaporama",
        current: "Image {current} sur {total}",
        previous: "Précédante",
        next: "Suivante",
        close: "Fermer",
        maxWidth: "95%",
        maxHeight: "95%",
        rel: 'teamzerty'
    }
   );