Fancybox 2的標題內鏈接

Question

我正在使用Fancybox 2生成一個圖庫。除文字外，如有必要，我還想在我的照片的標題中加入鏈接。

這裏的頁面，在這裏我想說明文字中有鏈接：http://catjohnson.co.uk/weddings

通過簡單地增加在那裏的HTML鏈接（以下這樣的回答：In Prettyphoto.js or Fancybox... How to add a link within the caption）它打破了圖庫中的照片。

我試過了這個http://jsfiddle.net/FWTZA/，儘管它有效，但我失去了我的造型。

我似乎無法讓我的造型與小提琴的js代碼集成...以下是我在做什麼在一分鐘，這是工作：

$(document).ready(function() { 
    $(".fancybox").fancybox({ 
     openEffect : 'fade', 
     closeEffect : 'fade', 
     nextEffect : 'fade', 
     prevEffect : 'fade', 
      helpers : { 
       title : { 
        type : 'inside' 
       }, 
       overlay : { 
        css : { 
         'background-color' : '#eee' 
        } 
       } 
      } 
    }); 
}); 

我希望是有道理的！

感謝您的參觀！

馬丁:)

Answer 1

對於這個網站

<a class="fancybox" data-title-id="title-1" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a> 
<div id="title-1" class="hidden"> 
    This is 1st title. <a href="http://google.com">Some link</a> 
</div> 

<a class="fancybox" data-title-id="title-2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a> 

<div id="title-2" class="hidden"> 
    This is <b>2nd title</b>. <a href="http://google.com">Some link</a> 
</div>​ 

...設置助手選項，不要忘記每一個選項與像逗號分隔：

$(".fancybox") 
    .attr('rel', 'gallery') 
    .fancybox({ 
     openEffect : 'fade', 
     closeEffect : 'fade', 
     nextEffect : 'fade', 
     prevEffect : 'fade', 
     helpers : { 
       title : { 
        type : 'inside' 
       }, 
       overlay : { 
        css : { 
         'background-color' : '#eee' 
        } 
       } 
      }, 
     beforeLoad: function() { 
      var el, id = $(this.element).data('title-id'); 
      if (id) { 
       el = $('#' + id); 

       if (el.length) { 
        this.title = el.html(); 
       } 
      } 
     } 
    });​ 

工作例如：http://jsfiddle.net/FWTZA/372

Answer 2

下面是我們如何做到的，將所有圖片和網址在數據庫中：

$(document).ready(function() {    
$.fancybox(
    [ 
    { href : '/images/gallery_pic.php?id=229', title: 'Sample image one', rel : 'fancybox-thumb', class : 'fancybox-thumb'}, 
    { href : '/images/gallery_pic.php?id=167', title: ' Sample image two <a href="http://www.address" target="_blank">See site</a>', rel : 'fancybox-thumb', class : 'fancybox-thumb'} 
    ], 
    { 
    type : 'image', 
    autoScale : true, 
    prevEffect : 'none', 
    nextEffect : 'none', 
    helpers : { 
    title : { 
     type: 'inside', 
     position: 'top' 
    }, 

    } // closes helpers 
    }    
); 
});