2013年4月1日 星期一

【jQuery】使用jQuery的blockUI自製lightbox效果照片牆

關於lightbox照片牆效果,其實網路上可以找到蠻多套件可以使用,可是如果找不到適合的或想要的,或是希望畫面樣式都可以自己控制時就須要試著自己處理(本範例僅呈現簡易的js程式碼使用,無特別設計樣式),以下是本次需求:

  • 原始照片列表(A)不需click,滑鼠mouseover時即觸發lightbox(B)。
  • 觸發的lightbox(B)上會重新顯示所有原始照片列表(A)上的照片(小圖),並將大圖替換成選中圖、選中小圖加框線以區分是否為選中圖。

線上看範例請點我



本範例使用blockUI來呈現lightbox效果,所以必須先了解blockUI使用方式

製作邏輯:
  • 設定原始照片列表(A)中每張圖的mouseover事件:
    • 將lightbox內大圖小圖的css設定設回預設值。
    • 將大圖替換成選中圖、將選中小圖增加框線。
    • 執行blockUI開啟lightbox。
  • 設定lightbox中每張小圖的mouseover與mouseout事件(以jQuery的hover操作)
    • mouseover時一樣執行上述提到的先設回預設值再設定選中值。
    • mouseout時將lightbox內大圖小圖的css設定設回預設值。
  • 由於除了lightbox內的關閉按鈕可以關閉lightbox外,若user點擊任何lightbox外其他位置也可關閉,故body標籤同時設定class="ui-close"以達成關閉效果。
關於demo範例:

Html部分:
    

id名稱開頭為pic的div 原始照片列表(A)中各張照片。
id名稱為lightbox的div 開啟lightbox的內容。
lightbox中,id名稱開頭為ltb的div 觸發lightbox(B)中各張小圖照片。
lightbox中,id名稱為showpic的div 觸發lightbox(B)中大圖照片。

CSS部分:
#content{
 position:absolute;
}
#content{
 margin-left:50px; 
}
#close{
 width:730px;
 float:right;
 margin-right:15px;
 text-align:right;
}
#showblock{
 width:870px;
 clear:left;
 position:relative;
}
#list{
 float:left;
 margin-left:4px;
}
#showpic{
 float:left;
 margin-top:4px;
 margin-left:4px;
}
#lightbox{
 display:none;
 position:relative;
}

由於照片圖的定位每張圖css設定都差不多,所以是採用js的方式去作css設定(如後詳細js內),這理的css只是範例檔內各個區塊定位設定。

JS部分:
載入必要檔案:

 


本次範例詳細JS部分:
$(document).ready(function(){
    SetCss();//用js設定照片css,讓照片以列表方式排版 
 
    $('.ui-close').click($.unblockUI); //將lightbox上的關閉按鈕 class設為ui-close 則點擊則會關閉lightbox
 
    //設定「所有」div中,id名稱開頭為pic的物件,其mouseover事件
    $("div[id^=pic]").mouseover(function(){
        var num = ($(this).attr("id")).replace("pic","");
        LtbDefaultCss(); //將lightbox中相關css設回預設值
        SetLtbCssSelected(num); //設定lightbox選中大小圖的css、圖檔來源
  
        //打開lightbox (lightbox目前是用blockUI這套,也可以換別的)
        $.blockUI({    
                message: $('#lightbox'),    
                overlayCSS: {         
                    backgroundColor: '#8E8E8E',         
                    opacity: 0.9,
                    cursor:'default'
                }, 
                css: {    
                    margin: '0 25%',
                    top: '0%',
                    left: '9%',
                    width: '870',
                    cursor:'default'
                }
        });    
    });

    //設定「所有」div中,id名稱開頭為ltb的物件,其mouseover與mouseout事件 
    $("div[id^=ltb]").hover(
        function(){//mouseover事件
                var num = ($(this).attr("id")).replace("ltb","");
                LtbDefaultCss(); //將lightbox中相關css設回預設值
                SetLtbCssSelected(num); //設定lightbox選中大小圖的css、圖檔來源
        },
        function(){//mouseout事件
                LtbDefaultCss();        //將lightbox中相關css設回預設值
        }
    );
 
});
 
    function SetCss()
    {
        //設定畫面中中照片列表排版
        $("div[id^=pic]").each(function(){  
                var id = ($(this).attr("id")).replace("pic","");
                $(this).css("float","left").css("margin-left","4px");
                if ( id%2>0 )
                {
                    $(this).css("clear","left"); 
                }
        });  
        //設定lightbox中左側照片列表排版
        $("div[id^=ltb]").each(function(){  
                var id = ($(this).attr("id")).replace("ltb","");
                $(this).css("float","left").css("margin-left","4px");
                if ( id%2>0 )
                {
                    $(this).css("clear","left"); 
                }
        });
    }
 
    function LtbDefaultCss()
    {//將lightbox中相關css設回預設值
        $("div[id^=ltb] img").css("border","0px");    //將所有小圖border樣式歸零
        $("#showpic img").attr("src","images/1.jpg"); //將大圖顯示第一張圖
    }
 
    function SetLtbCssSelected(num)
    {//設定lightbox選中大小圖的css、圖檔來源
        $("#ltb" + num + " img").css("border","solid 5px blue"); //將目前選中的小圖設定border樣式
        $("#showpic img").attr("src","images/" + num + ".jpg");  //將大圖替換成目前選中的圖
    }

其他問題或說明:
  1. 本次測試時發現,若原始照片列表(A)與觸發的lightbox(B)位置有部分重疊的話,若於(A)中mouseover的照片位置正處於重疊位置,則看到(B)中選中圖可能不是剛剛在(A)中選擇的那張,這是由於(A)(B)位置重疊,(B)一被觸發打開後由於位置重疊滑鼠停留位置剛好又觸發了(B)中的小圖,所以此時看到的選中圖會是第二次觸發後的結果,如下附圖為位置重疊圖例:

    所以,也許可能避免A、B都使用mouseover事件或是lightbox位置須調整好會比較好...
  2. 本次範例圖檔來源是以固定方式呈現,所以若需求的圖檔必須要讀取資料庫,js替換選中圖可能須額外帶參數處理。


如果您喜歡我的分享、或是我的文章對您有幫助的話,希望能到我的粉絲專頁點個讚追蹤我唷~~

寫程式、技術分享文章很辛苦,寫一篇要花非常久的時間,希望您能幫我點一下頁面上的廣告給我支持跟肯定,讓我更有動力寫這類文章唷~

沒有留言:

張貼留言

writing for work~writing for life~