CSS+JSで画像コレクション表示を実現(続き)_html/css_WEB-ITnose

前回の記事では、画像コレクションの表示を実現しました。この記事では、前回の記事の内容をカプセル化し、実装効果にいくつかの最適化を加えました。以下では、具体的なアイデアについては説明しません。参考までにコードを掲載します。

1. imglist.css

rree
2. jquery.imglist.js

html, body, .modal-bg {    height: 100%;    margin: 0;    padding: 0;    font-size: 13px;    font-weight: bold;    color: #fff;}.modal-bg{    position: absolute;    left: 0px;    top: 0px;    width: 100%;    background: #48525e;    opacity: 0.4;    z-index: 10;}.modal{    position: relative;    z-index: 99;    opacity: 1;    top: 15%;    left: 40%;    width: 600px;    height: 400px;}.modal .title .tips-bg{    position: absolute;    bottom: 0px;    left: 0px;    background: #48525e;    width: 100%;    height: 50px;    opacity: 0.8;}.modal .title .tips{    position: absolute;    bottom: 13px;    left: 10px;    font-family: "Arial";    font-weight: bold;    font-size: 20px;}.modal .title .close{    background: url(../img/close.png) no-repeat;    width: 27px;    height: 27px;    position: absolute;    top: 5px;    right: 5px;}.modal .title .close:hover{    cursor: pointer;}.container{    position: absolute;    top: 200px;    text-align: center;    width: 100%;    z-index: 5;}.image-list{    margin-left: 40%;    position: relative;}#prev{    display: none;    width: 45px;    height: 50px;    background: url(../img/prev.png);}#next{    width: 45px;    height: 50px;    background: url(../img/next.png);}#prev:hover,#next:hover{    cursor: pointer;}.page-num{    position: absolute;    right: 8px;    bottom: 15px;    border: 2px solid #fff;    font-weight: bold;    background: #666666;    color: #fff;    border-radius:15px;    text-align: center;    padding: 3px;    width: 15px;    font-size: 13px;}.thumb-a{    display:inline-block;    padding:4px;    margin:0 0.5rem 1rem 0.5rem 1rem;    line-height:0;    -webkit-transition:background-color 0.1s ease-out;    -moz-transition:background-color 0.1s ease-out;    -o-transition:background-color 0.1s ease-out;    transition:background-color 0.1s ease-out;    -webkit-border-radius:6px;    -moz-border-radius:6px;    -ms-border-radius:6px;    -o-border-radius:6px;    border-radius:6px}.thumb-a:hover{    background-color:#4ae;    cursor: pointer;}.thumb-a-hide{    display: none;}.thumb-img{    -webkit-border-radius:5px;    -moz-border-radius:5px;    -ms-border-radius:5px;    -o-border-radius:5px;    border-radius:5px}

3. imglist.html

(function($){    $.fn.imgList = function(options){        var defaults = {};        var options = $.extend(defaults, options);        var container=$(this);        var imgUrls = options.imgurls;        var autoPlay = options.autoplay;        var thumbWidth = options.thumbwidth, thumbHeight = options.thumbheight,            detailWidth = options.detailwidth,detailHeight = options.detailheight;        var length,imgIndex=1;        length = imgUrls.length;        var play;        var imgList = $("<div></div>").addClass("image-list").css("width",thumbWidth+"px");        $(".image-list").live("mouseenter",function(){            play = clearInterval(play);            divCtrl.show();        });        $(".image-list").live("mouseleave",function(){            play = setInterval(playImg,3000);            divCtrl.hide();        });        var divPageNum = $("<div></div>").addClass("page-num").html(imgIndex);        divPageNum.appendTo(imgList);        var divCtrl  = $("<div></div>").css("width","100%").css("height","100%").hide();        var divPrev = $("<div></div>").attr("id","prev"),            divNext = $("<div></div>").attr("id","next");        divPrev.css("position","absolute"),        divNext.css("position","absolute");        divPrev.css("top",(thumbHeight/2-25)+"px"),        divNext.css("top",(thumbHeight/2-25)+"px");        divPrev.css("left","-10px"),        divNext.css("right","-12px");        divPrev.on("click",function(){            if(imgIndex>1){                imgIndex=imgIndex-1;            }            for(var i=0;i<length;i++){                $("#img"+(i+1)).addClass("thumb-a-hide");            }            $("#img"+imgIndex).removeClass("thumb-a-hide");            divPageNum.html(imgIndex);            if(imgIndex===length){                $("#next").hide();            }            else{                $("#next").show();            }            if(imgIndex===1){                $("#prev").hide();            }            else{                $("#prev").show();            }        });        divNext.on("click",function(){            if(imgIndex<length){                imgIndex=imgIndex+1;            }            for(var i=0;i<length;i++){                $("#img"+(i+1)).addClass("thumb-a-hide");            }            $("#img"+imgIndex).removeClass("thumb-a-hide");            divPageNum.html(imgIndex);            if(imgIndex===length){                $("#next").hide();            }            else{                $("#next").show();            }            if(imgIndex===1){                $("#prev").hide();            }            else{                $("#prev").show();            }        });        divPrev.appendTo(divCtrl);        divNext.appendTo(divCtrl);        divCtrl.appendTo(imgList);        imgList.appendTo(container);        for(var i= 0;i<length;i++){            var aImg = $("<a></a>").attr("id","img"+(i+1)).addClass("thumb-a");            if(i>0){                aImg.addClass("thumb-a-hide");            }            var img = $("<img height='"+thumbHeight+"' width='"+thumbWidth+"'/>").addClass("thumb-img");            img .attr("src",imgUrls[i]);            img.appendTo(aImg);            aImg.appendTo(imgList);            aImg.on("click",function(){                play = clearInterval(play);                var winWidth = $(window).width(),winHeight = $(window).height();                var modalBg = $("<div></div>");                modalBg.addClass("modal-bg");                modalBg.appendTo($('body'));                var modal = $("<div></div>");                modal.addClass("modal");                modal.css("position","absolute")                    .css("top",(winHeight-detailHeight)/2+"px")                    .css("left",(winWidth-detailWidth)/2+"px");                var titleTipsBg = $("<div></div>").addClass("tips-bg");                var titleTips = $("<a></a>").addClass("tips").html("I am a Chinese.");                var titleClose =  $("<a></a>").addClass("close");                var title = $("<div></div>");                title.addClass("title");                title.append(titleTipsBg)                    .append(titleTips)                    .append(titleClose);                titleClose.on("click",function(){                    modalBg.hide();                    modal.hide();                });                title.appendTo(modal);                var img = $("<img />");                img.attr("width",detailWidth)                    .attr("height",detailHeight)                    .attr("src","img/demopage/image-"+imgIndex+".jpg");                var imgDiv = $("<div></div>").append(img);                imgDiv.appendTo(modal);                modal.appendTo($('body'));            });        }        if(autoPlay){            play = setInterval(playImg,3000);        }        function playImg(){            if(imgIndex===length){                imgIndex=0;            }            divNext.click();        }    }})(jQuery);

ソースコードのダウンロード