我可以在灯箱中放置灯箱或图像地图吗？

Question

我环顾四周，但没有找到我要找的东西。

基本上，我在使用 jquery 灯箱的页面上有一张图片，以使其更大且更易于查看。除此之外，在原始灯箱处于活动状态的情况下，我现在需要该图像上的“热点”，当鼠标悬停时生成工具提示，或者在单击时生成单独的相对定位的灯箱。

如果您单击自行车并转到产品页面，可以在 Create Bikes 网站上看到我所追求的外观类型。

一直在玩，但我一生都无法解决 - 有没有人知道这是否可能或能够将我指向已经实施了类似功能的任何网站的方向？

编辑：

好的，按照建议，我在这里放了一些现有的代码，希望对您有所帮助。

此代码块是灯箱与调用脚本的类 lightbox-image 一起使用的典型情况。使用的灯箱是 Colorbox。

<p>
<a href="images/search-wheel-big.png" title="This is where the title goes"class="lightboxElement lightbox-image" rel="lightbox-image">
    <img class="c-right" alt="alt tag here" src="testimonials_files/SearchWheel.png">
</a>
Some text here
</p>

加载灯箱时，随后出现的

标签包括以下内容，以及由 Colorbox 脚本生成的 标签（关闭灯箱时它再次消失）：

<div id="lightboxContent" style="float: left; width: 500px; height: 554px;">
    <div id="lightboxLoadedContent" style="display: block; width: 500px; overflow: auto; height: 507px;">
        <img class="lightboxPhoto" src="images/search-wheel-big.png" style="float: none;">
    </div>
    <div id="lightboxLoadingOverlay" class="" style="height: 554px; display: none;"></div>
    <div id="lightboxLoadingGraphic" class="" style="height: 554px; display: none;"></div>
    <div id="lightboxTitle" class="" style="display: block;">This is where the title goes</div>
    <div id="lightboxCurrent" class="" style="display: none;"></div>
    <div id="lightboxNext" class="" style="display: none;"></div>
    <div id="lightboxPrevious" class="" style="display: none;"></div>
    <div id="lightboxSlideshow" class="" style="display: none;"></div>
    <div id="lightboxClose" class="" style="">close</div>
</div>

然后我认为我可以只输入一个 jquery 命令，如下所示：

    $(".lightboxPhoto").each(function(){
        $(this).append("<div class='hotspot'></div>");
    });

我希望我可以多次执行此操作（对于图像上的不同“热点”，可以依次单击/悬停以获取更多信息）并在每个 <div> 标签中插入一个相对定位的背景图像。

但是，代码中没有发生任何事情，这可能与<div> 标签本身是由.js 文件而不是在我的原始html 中生成的事实有关吗？我需要自己编辑 .js 文件吗？

编辑 2 - 解决方案！

大家好！

所以我只是想我会在这里添加我最后所做的事情，以防其他人想要创建相同的效果。

按照 Chris 的建议，我使用了适用于彩盒灯箱的内联命令。不过，我没有使用工具提示，而是从创建自行车网站（参见他们的产品页面之一）中获取了一个想法，并输入了以下 html 代码：

<div style="display:none">
    <div class="example1">
        <div class="example2">This is where the title goes</div>
        <div class="example3">
            <span class="example4"></span>
            <div class="example5">
                <h5 class="example6">Header text here</h5>
                <p class="example7">Some more text here</p>
            </div>
        </div>
    </div>
</div>

<span> 标记和 <div> 标记为 example5 都有一个背景图像。有了这个<div> 标签的默认状态display:none，当<span> 标签图像悬停在上面时，我希望它更改为display:block。我使用以下 css 行做到了这一点：

span.example4:hover + div.example5 { display: block; }

像梦一样工作！请记住，此 css 不适用于 IE6 或更低版本

【问题讨论】：

• 有可能，让我们看看你到目前为止得到了什么。 （单击edit 并添加您的代码）。您可能需要<map>，如果您的“灯箱”仅加载图像，则需要使用onOpen 回调或其他方法或加载 HTML 片段。
• 嗨，Wesley，抱歉耽搁了，我现在添加了一些代码，真的希望对您有所帮助！！
• 除了不能在 IE6 中工作之外，这也不适用于任何使用键盘导航的用户。您刚刚使屏幕阅读器用户完全无法访问该信息。
• @steveax - 嗨，为反馈干杯。我完全错过了的好点，你知道一种可以在屏幕阅读器友好的同时实现它的方法吗？

Answer 1

绝对有可能。以下是我的做法：

1. 在这里使用像这样的灯箱插件：http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto。这很聪明，因为它不仅可以让您将图像加载到灯箱中，还可以将 div 或其他内容加载到灯箱中。这不是唯一一个，它只是我过去使用过的一个。

2. 在加载到灯箱的 div 中（当您单击自行车时），我将有两个部分：图像和组成按钮的标签集合。将图像绝对定位在背景中，按钮也绝对定位但在您想要的位置（即顶部：200 像素；左侧：183 像素）。

3. 然后，在按钮上使用这个插件http://www.vertigo-project.com/files/vTip/example.html，它会给你一个悬停工具提示，所有内容都包含在灯箱中。

恐怕我没有任何代码，因为它的工作量很大，但理论都是合理的（听我说得很有头脑），所以你应该能够做出一些工作。如果这两个特别冲突，也许可以尝试类似的插件，但我认为没有理由这样做。

祝你好运！

编辑：

不完全是。

我描述的方法不使用基本图像加载。相反，它会将您页面上的 div 加载到您的灯箱中。在这个 div 中，您可以拥有图像（在背景中），然后您的按钮位于顶部。

请参阅此页面上的内联 HTML 链接（倒数第二个）：http://colorpowered.com/colorbox/core/example1/index.html。 div 放置在页面的其他位置并隐藏。然后，插件会在按下链接时将 div 的内容加载到灯箱中。

因为它是一个传统的 div，你可以在里面包含任何你想要的内容：更多的 div、图像、链接等。所以在这个 div 中加载一个图像（位置：绝对；顶部：0；左侧：0；z -index：10），然后是顶部的一些按钮（位置：绝对；顶部：50px；左侧：50px；z-index：20）。此页面上的表格http://colorpowered.com/colorbox/ 有一行内联说明如何操作。