Fancybox2 - 不同內容的工具提示和圖像標題，從標題屬性？

縮略圖工具提示和圖庫圖像標題均來自相同的標題HTML屬性。Fancybox2 - 不同內容的工具提示和圖像標題，從標題屬性？

我想爲縮略圖工具提示和圖像標題有不同的內容。

如我想的工具提示說：Sculpture name和圖像標題說：Sculpture name: Height 123cm

有沒有辦法做到這一點？

非常感謝。

我目前的HTML：

<a class="fancybox" rel="works" title="Sculpture1 Height:1232mm"  href="images/Sculpture1_large_res.jpg"><imagetag alt="Sculpture1 Height:1232mm" src="images/thumbs/Sculpture1_thumb.jpg" class="thumb"></a> 

<a class="fancybox" rel="works" title="Sculpture2 Height:1232mm" href="images/Sculpture2_large_res.jpg"><imagetag alt="Sculpture2 Height:1232mm" src="images/thumbs/Sculpture2_thumb.jpg" class="thumb"></a>

UDATE：

我目前的選擇;

$(document).ready(function() { 

$(".fancybox").fancybox({ 
    openEffect : 'elastic', 
    closeEffect : 'elastic', 
    'arrows' : false, 
     helpers  : { 
     buttons : {} 
    } 

});

}）;

來源

2011-12-07 aVo

我會怎麼做，是設置在標題中的fancybox出現在一個隱藏DIV，所以我的提示會顯示從標題中的fancybox不同的內容：

UPDATE：編輯以符合您的內容樣品

你的HTML：

<a class="fancybox" rel="works" title="Sculpture1" href="images/Sculpture1_large_res.jpg"><img alt="Sculpture1 Height:1232mm" src="images/thumbs/Sculpture1_thumb.jpg" class="thumb"></a> 
<a class="fancybox" rel="works" title="Sculpture2" href="images/Sculpture2_large_res.jpg"><img alt="Sculpture2 Height:1232mm" src="images/thumbs/Sculpture2_thumb.jpg" class="thumb"></a>

通知的title屬性值。

新：（您<body>標籤內的任何地方）的的fancybox標題：

<div id="fancyboxTitles" style="display: none;"> 
    <div>Sculpture1 Height: 1232mm</div> 
    <div>Sculpture2 Height: 1232mm</div> 
</div>

注意，你必須有一個嵌套<DIV>（新題）爲您的畫廊每個圖像。

然後，腳本：

$(document).ready(function() { 
$(".fancybox").fancybox({ 
    afterLoad : function() { 
    this.title = $("#fancyboxTitles div").eq(this.index).html(); 
    } 
}); //fancybox 
}); // ready

更新＃2（09年12月，13：43PT）：演示如何提出的解決方案集成到原貼腳本：

$(document).ready(function() { 
    $(".fancybox").fancybox({ 
      openEffect : 'elastic', 
      closeEffect : 'elastic', 
      arrows : false, 
      helpers : { 
        buttons : {} 
      }, // helpers 
      afterLoad : function() { 
       this.title = $("#fancyboxTitles div").eq(this.index).html(); 
      } // afterload 
    }); // fancybox 
}); // ready

更新＃3 - 2012年6月3日：對於fancybox v2.0.6，使用beforeShow而不是afterLoad

來源

2011-12-08 03:46:41 JFK

嗨@ JFK，但我還沒有得到這個工作。請你澄清一下？我已經發布了我的當前HTML（與您的不同）作爲對原始帖子的修改。我該怎麼處理這個隱藏的div呢？謝謝。 – aVo

@aVo隱藏的DIV包含另一組DIV，每個圖像在您的畫廊中有一組DIV。每個嵌套的DIV都會有你希望顯示在你的圖片中的標題。我編輯了我的答案以匹配您的帖子。 – JFK

感謝您抽出時間@JFK。太精彩了！作品。現在我需要的是將您的JavaScript集成到我現有的選項中。我已將我當前的文檔添加到原始文章中。請你告訴我如何做到這一點。我確實嘗試過！ :) – aVo

Fancybox2 - 不同內容的工具提示和圖像標題，從標題屬性？

回答

相關問題