客製化FancyBox標題列,在FancyBox中加入Button

接續上一篇,小蛙使用了FancyBox讓從多媒體中心取得的圖片可以透過燈箱效果呈現,接著有一個新的需求是,如果有使用者對於該張圖片有授權需求,可以透過Button點擊後帶出申請表,於是需要在FancyBox中加入Button。

官方範例畫面,有各式各樣的demo:
fancybox 1 客製化FancyBox標題列,在FancyBox中加入Button
針對title的部分,FancyBox有提供幾款樣式供使用者選擇。這張圖是FancyBox title預設樣式。
fancybox 2 客製化FancyBox標題列,在FancyBox中加入Button
Photo Credit: Katie Harris

$("a#example5").fancybox();

‘outside’樣式。
fancybox 3 客製化FancyBox標題列,在FancyBox中加入Button
Photo Credit: Katie Harris

$("a#example6").fancybox({
    'titlePosition' : 'outside'
});

‘inside’樣式
fancybox 4 客製化FancyBox標題列,在FancyBox中加入Button
Photo Credit: Katie Harris

$("a#example7").fancybox({
    'titlePosition' : 'inside'
});

‘Over’樣式
fancybox 5 客製化FancyBox標題列,在FancyBox中加入Button
Photo Credit: Katie Harris

$("a#example8").fancybox({
    'titlePosition' : 'over'
});

小蛙採用最少量的修改來達到這個目的,畢竟動到FancyBox套件內部的話,到時候升級版本會非常麻煩。其實只要看一下FancyBox API就可以發現,FancyBox在標題列的部分是可以自行修改並且帶入html的。

$("a[rel=example_group]").fancybox({
    'transitionIn'  : 'none',
    'transitionOut' : 'none',
    'titlePosition' : 'inside',
    'titleFormat'   : function(title, currentArray, currentIndex, currentOpts) {
                          return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                      }
});

titleFormat的部分後面接了個function(title, currentArray, currentIndex, currentOpts){},重點是處理完之後return的是'<span xxxx’,表示最後可以回傳html碼,簡單的說就是可以return希望呈現的元件。小蛙把return部分改成對方要求的「申請圖像授權」Button。

$("a[rel=example_group]").fancybox({
    'transitionIn'  : 'none',
    'transitionOut' : 'none',
    'titlePosition' : 'inside',
    <span style="color: #ff0000;"><strong>'titleFormat'   : function(title, currentArray, currentIndex, currentOpts) {</strong></span>
<span style="color: #ff0000;"><strong>                          return '&lt;center&gt;&lt;input type="button" name="title" value="申請圖像授權" onclick="xxx()"&gt;&lt;/center&gt;';</strong></span>
<span style="color: #ff0000;"><strong>                      }</strong></span>
});

可以增加html,當然也包括form元件,結果就變成這樣囉!
fancybox 6 客製化FancyBox標題列,在FancyBox中加入Button
Photo Credit: Katie Harris

    發佈留言

    發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

    這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料