@crizin

    More...

    태터툴즈 고쳐쓰기 #5 - 슬라이드쇼

    슬라이드 쇼는 자동으로 진행되는건데.. 마땅한 이름을 붙이기가 어려우니 그냥 넘어가고.. 요약하면 여러장의 이미지를 올린다음 마우스로 하나씩 그림을 넘겨가며 보게 해주는 일종의 방문자 괴롭히기 팁;;

    예제는 요 아래 게시물 서울 불꽃축제 사진으로 대체..

    (아참, 익스플로러 6.0 이상에서만 동작하는 관계로 그 외에는 올린 사진이 몽땅 표시됩니다)

    하우투 유즈 잇!!

    1. 태터의 lib.js 파일에 아래 두개의 함수를 추가한다.

    function slideReady()
    {
        if( window.navigator.userAgent.indexOf("MSIE ") > -1 )
        {
            var oDiv = document.body.getElementsByTagName("div");

            for(i=0; i<oDiv.length; i++)
            {
                if( oDiv[i].getAttribute("slideShow") != null )
                {
                    oBRs = oDiv[i].getElementsByTagName("br");

                    for(j=oBRs.length-1; j>=0; j--)
                    {
                        try
                        { oDiv[i].removeChild(oBRs[j]); }
                        catch(e)
                        {     }
                        }

                    oDiv[i].style.filter = "progid:DXImageTransform.Microsoft.Fade(duration=0.2, overlap=1.0)";
                    oDiv[i].style.width = "100%";

                    oPictureTables = oDiv[i].getElementsByTagName("table");

                    for(j=0; j<oPictureTables.length; j++)
                    {
                        if( j > 0 )
                            oPictureTables[j].style.display = "none";

                        oPictureTables[j].style.cursor = "pointer";

                        oPictureTables[j].onclick = slideShow;
                    }

                    // '이미지를 클릭하세요' 표시가 사진 위에 나오게 하려면 afterBegin, 사진 밑에 나오게 하려면 beforeEnd
                    oDiv[i].insertAdjacentHTML("afterBegin", "<div style='text-align: center; color: #008000' slideLabel>이미지를 클릭하세요 (1/" + oPictureTables.length + ")</div>");
                }
            }
        }
    }

    function slideShow()
    {
        var oDiv = document.body.getElementsByTagName("div");

        for(i=0; i<oDiv.length; i++)
        {
            if( oDiv[i].getAttribute("slideShow") != null )
            {
                var oPictureTables = oDiv[i].getElementsByTagName("table");

                var isFoundDiv = false;
                var isFoundTable = false;
                var nPictureSequence = 1;
                var oCurrent = this;
                var oNext = oPictureTables[0];

                for(j=0; j<oPictureTables.length; j++)
                {
                    if( isFoundTable )
                    {
                        nPictureSequence = j + 1;
                        oNext = oPictureTables[j];
                        isFoundTable = false;
                        break;
                    }

                    if( oPictureTables[j] == this )
                    {
                        isFoundTable = true;
                        isFoundDiv = true;
                        oDiv[i].filters[0].Apply();
                    }
                }

                if( isFoundDiv )
                {
                    oCurrent.style.display = "none";
                    oNext.style.display = "block";
                    oDiv[i].filters[0].Play();
                }

                var oLabel = oDiv[i].getElementsByTagName("div");

                for(j=0; j<oLabel.length; j++)
                    if( oLabel[j].getAttribute("slideLabel") != null )
                        oLabel[j].innerHTML = "이미지를 클릭하세요 (" + nPictureSequence + "/" + oPictureTables.length + ")";
            }
        }
    }

    2. 스킨 파일(skin.html)의 onLoad 이벤트에 slideReady() 함수를 적어준다. 예를들면 이런 식으로,

    <body onload="slideReady()">

    3. 그럼 준비 완료.. 사진을 올리는 방법은 똑같고 올린 사진을 <div slideShow></div>로 묶어주기만 하면 끝! (물론 미니위니 비쥬얼에디터 같은 위지윅 에디터를 사용하고 있다면 소스보기 화면에서 태그를 넣어야 됩니다;; 그리고 이 안에 그림파일 외에 다른걸 집어넣으면 어떻게 동작할지는 모릅니다-_-)

    <div slideShow>
    [##_1C|050466.jpg|width=600 height=461|_##]
    [##_1C|795120.jpg|width=600 height=404|_##]
    [##_1C|275862.jpg|width=600 height=376|_##]
    </div>

    일단 사진이 주루룩 나오고 페이지 로딩이 끝나야 슬라이드 화면으로 바뀌는게 좀 거슬리는데 태터에서 본격적으로 슬라이드 기능을 지원하게 되면 썸네일도 나오고 앞으로 뒤로도 움직이고 할 수 있겠지만 스크립트 추가만으로는 내 머리로는 이정도가 한계.. -_-

    혹시 가져다 쓰시는 분들 중에 버그를 발견하신 분은 코멘트좀 부탁드립니다. 저는 사진올릴일이 많지 않아서..;

    '컴퓨터 얘기 > 프로그래밍' 카테고리의 다른 글

    블로그에서 푸시푸시를..;  (3) 2004/10/22
    HTTP 접속하는 PHP 클래스  (6) 2004/10/14
    태터툴즈 고쳐쓰기 #5 - 슬라이드쇼  (8) 2004/10/10
    표준 소득률/기준경비율 데이터  (0) 2004/10/01
    태터툴즈 고쳐쓰기 #4 - 이미지보기 팝업 개선  (6) 2004/09/30
    태터툴즈 고쳐쓰기 #3 - 방명록 최근글 보여주기  (17) 2004/09/17
    PREV   1   ...   184    185    186    187    188    189    190    191    192   ...   357   NEXT