Question

我已经在colorbox插件上工作了好几天。我得到它的工作，但当我尝试使用rel标签时，我销毁了我的结果，但却找不到我做错了。

这是HTML代码：

<tr>
    <td>City Numver</td>
    <td>Company</td>
    <td>Street</td>
    <td>etc</td>
    <td>
        <div class="colorbox">Details
            <div style="display: none;">
                <div id="Div1" class="pop">
                    <p class="alignleft">Referenz entstand zügig.</p>
                    <img class="alignleft" src="http://www.d-krings.de/wp-content/uploads/2011/01/menzel-3616.jpg" alt="" />
                </div>
            </div>
            <div  style="display: none;">Div #2
                <div style="display: none;">
                    <div id="Div2" class="pop"><img class="alignleft" src="http://www.d-krings.de/wp-content/uploads/2011/01/menzel-3616.jpg" alt="" />
                        <p class="alignleft">Referenz entstand zügig.</p>
                        &nbsp;
                    </div>
                </div>
            </div>
        </div>
    </td>
</tr>

每个公司都会在表格中排成一行，点击“详细信息”，您将获得该公司的图片。（见这里：http://www.d-krings.de/referenzen）

这是JS：

jQuery(document).ready(function () {
    jQuery("div.colorbox").colorbox({ 
        inline: true,
        href: function () {
            var elementID = jQuery(this).find('div .pop').attr('id');
            return "#" + elementID;
        }
    });
    jQuery("div.colorbox").colorbox(rel="my_group")
}

我只需要一个指向“点击”的链接，该链接显示为公司分组的图像。但只有当您点击链接时才能看到图像。不是之前。

Answer 1

试试这个

jQuery(document).ready(function () {
    jQuery("div.colorbox").colorbox({ 
        rel: "my_group",
        inline: true,
        href: function () {
            var elementID = jQuery(this).find('div .pop').attr('id');
            return "#" + elementID;
        }
    });
}

Answer 2

我找到了解决方案我尝试了一下，它就是：

JS

jQuery(document).ready(function() {
    jQuery("div.boxpop").each(function() {
        jQuery(this).colorbox({
            html: jQuery(this).find('div').html(),
            rel: jQuery(this).attr('rel')
        });
    });
});

HTML代码：

<div class="boxpop" rel="yourGroup here">Details
    <div class="bp_container" style="display:none">
        <p><img src="image.jpg"></p>
        <p class="colorbox_desc">You can use Description here.</p>
    </div>
</div>

<div class="boxpop" rel="yourGroup here" style="display: none;">
    <div class="bp_container"  style="display:none">
        <p><img src="image.jpg"></p>
        <p class="colorbox_desc">You can use Description here.</p>
    </div>
</div>

您现在可以使用说明。这是一个Multi inline html Combobox。

Answer 3

Colorbox需要一种方法来查找数字资产（如图像）并将其分组以供显示。在最简单的用例中，HTML元素REL用于执行此操作。例如，具有相同REL值的所有图像形成一个数组并显示[0]至[n]。

您可以通过指定'rel'参数来覆盖默认REL使用，该参数根据颜色框（http://colorpowered.com/colorbox/）允许您指定其他分组机制。

但是你仍然必须为colorbox提供一种方法来查找和分组你的资产。

Kevin M。

jQuery插件Colorbox：问题 - 将不再起作用

3 个答案: