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>

加载灯箱时，＆lt; div＆gt;然后出现的标签包括下面的＆lt; img＆gt; 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所建议的那样，我使用了与colorbox灯箱配合使用的内联命令。我没有使用工具提示，而是从创建自行车网站（参见其中一个产品页面）中获取了一个想法并输入了以下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>

带有example5类的<span>代码和<div>代码都有背景图片。如果此<div>代码的默认状态为display:none，我希望在display:block代码图片悬停时将其更改为<span>。我使用css的后续行完成了这个：

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

像梦一样工作！请记住，这个CSS不能在IE6或更低版本中运行

Answer 1

绝对可能。我就是这样做的：

在这里使用像这样的灯箱插件：http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto。这很聪明，因为它不仅可以将图像加载到灯箱中，还可以加载div或其他内容。这不是我过去唯一使用的那个。
在装入灯箱的div中（当你点击一辆自行车时）我会有两个部分：一个图像和一组构成按钮的标签。将图像绝对定位在背景中，按钮也绝对定位在您想要的位置（即顶部：200px;左侧：183px）。
然后，在按钮上使用此插件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/有一行内联，说明了如何操作。

我可以将灯箱或图像地图放在灯箱内吗？

1 个答案: