demoshop

因為在和設計人員配合的時候，經常會請他們要考量到一些頁面是使用 LightBox 因此客製化後很多頁面開起來的大小都不一樣，之前是請設計人員寫一份清單，後來是請設計人員自己寫 LightBox 叫用的Script ，怎樣都是麻煩所以demo就改請設計人員直接使用class來定義需要開啟的大小。

這是一個很無聊的小玩意，基本上懂 jQuery 都寫的出來，所以只是提出一個設計和程式配合的小技巧而已。

基本上所有的LightBox都有兩種設定就是百分比或是像素，因此demo就定義請設計人員依據以下的規則來寫 Class。

• 開頭一定要是fancy
• 長寬使用底線來分隔
• 如果是百分比就使用p來區隔

因此如果要開一個 80%  80% 的視窗就是輸入 fancy80p_80p，如果要開一個320 × 200 就是使用 fancy320_200，當然也可以開一個 50% 400px 的視窗 fancy50p_400

而完整的 JS 就在以下提供

function BindFancybox(){
$("a[class*='fancy']").click(function () {
                /// <summary>
                /// fancybox 註冊
                /// </summary>
                var e = $(this);
                var classValue = e.attr("class").split(' ');
                var fancyClass = '';
                $.each(classValue, function (i) {
                    if (classValue[i].indexOf('fancy') != -1) {
                        fancyClass = classValue[i].replace('fancy', '').split("_");
                    }
                });

                var width = filterFancySize(fancyClass[0]);
                var height = filterFancySize(fancyClass[1]);
                $.fancybox({
                    href: e.attr('href'),
                    width: width,
                    height: height,
                    type: 'iframe',
                    hideOnOverlayClick: false
                });
                return false;
            });
}

這是決定數值的函式

function filterFancySize(val) {
        /// <summary>
        /// 專門為了 Fancybox 高寬設計的函式
        /// </summary>
        try {
            var temp = val.toLowerCase();
            if (temp.indexOf('p') != -1)
                return temp.replace('p', '%');
            else {
                temp = parseInt(temp, 10);
                if (!isNaN(temp))
                    return temp;
                else {
                    throw '';
                }
            }
        }
        catch (e) {
            alert('Lightbox Class Fail! \nUsing Default Size 50%');
            return '50%';
        }
}

為了避免解析出現問題，只要發生錯誤的時候就會預設開啟 50% 50% 的大小