我可以在燈箱內放置燈箱或圖像映射嗎？

Question

我看了一下，但還沒有找到我要找的東西。

基本上，我在頁面上有一張圖片，它使用jquery lightbox來使它更大，更容易查看。除此之外，在原始燈箱處於活動狀態的情況下，我現在需要在該圖像上的「熱點」，這些熱點或者在懸停時生成工具提示，或者單擊時單獨放置相對定位的燈箱。

如果您點擊自行車並轉到產品頁面，則可以在創建自行車網站上看到我所追求的外觀類型。

一直在玩，但不能爲我的生活工作 - 有誰知道這是甚至可能或能夠指向我的方向已經有這樣的東西實現了嗎？

編輯：

好，所建議的，我已經把一些現有的代碼在這裏，我希望幫助。

這段代碼是典型的燈箱與調用腳本的類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> 

當收藏夾被加載，<DIV>標記，然後出現包括下面，用（當收藏夾關閉它再次消失）由彩盒腳本生成的<IMG>標籤：

<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 lightbox一起使用的內聯命令。而不是使用一個提示，雖然，我把從建立自行車網站（見他們的產品網頁）的想法，進入下面的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>標籤帶班舉例5兩者有背景圖片。當<div>標籤的默認狀態爲display:none時，我希望它在<span>標籤圖像懸停時更改爲display:block。我做了這個使用css的後續行：

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

像夢一樣工作！只是要記住，這個CSS將無法在IE6或更低

Answer 1

絕對有可能。下面是我該怎麼做：

1. 使用燈箱插件喜歡這個一：http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto。這很聰明，因爲它可以讓您不僅將圖像加載到lightbox中，而且還可以加載div或其他內容。這不是唯一一個我以前用過的。

2. 在裝入燈箱的div裏面（當你點擊一輛自行車時），我會有兩個部分：一個圖像和一個組成按鈕的標籤集合。將圖片絕對放置在背景中，並且按鈕也絕對定位，但放在您想要的位置（即top：200px; left：183px）。

3. 然後，在按鈕上使用這個插件http://www.vertigo-project.com/files/vTip/example.html這將給你一個懸停工具提示，所有包含在lightbox中。

我怕我沒有任何代碼，因爲它是相當多的工作，但理論是所有的聲音（聽我的話讓所有的大當家），所以你應該能夠做什麼工作。也許嘗試類似的插件，如果這兩個特別衝突，但我沒有看到他們爲什麼應該。

祝你好運！

編輯：

不太。

我描述的方法不使用基本的圖像加載。相反，它將您的頁面上的div加載到您的lightbox中。在這個div裏面你可以有圖像（在背景中），然後你的按鈕位於頂部。

請參閱此頁上的內嵌HTML鏈接（從底部開始）：http://colorpowered.com/colorbox/core/example1/index.html。 div放在頁面的其他地方並隱藏。當按下鏈接時，插件會將div的內容加載到lightbox中。因爲它是一個傳統的div，你可以擁有任何你想要的內容：更多的div，圖像，鏈接等。因此，在div中加載圖像（位置：絕對;頂部：0;左：0; z-index：10），然後頂部的一些按鈕（position：absolute; top：50px; left：50px; z-index：20）。本頁http://colorpowered.com/colorbox/上的表格有一行內聯行，說明如何執行此操作。