W

이미지를 갤러리 형태로 [클릭하면 딱 맞는 창으로]

기능이 참조아서 가져왔습니다.
대충 필요할때 xml이나 기타 다른거랑 연동없이 그냥 자바스크립트로
갤러리 효과를 낼수 있어 참좋을것같네요^^

<style>
<!--
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
.g_page_no {color:#000000; font-size:9pt; font-family:Arial;}
.g_page_no:hover {color:#0000ff;}
.g_image_border_show {border:1 solid #000000;}
.g_image_border_hide {border:1 solid #ffffff;}
//-->
</style>
<script language="javascript">
<!--
var small_width = 120;
var small_height = 90;
var caption_msg = '<b>자연풍경 </b>';
var view_popup_title = '[VIEW]';
var default_path = '';
var g_width_length =3;
var g_height_length = 3;

var gallery_list = new Array();
gallery_list[0] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1032/(1).jpg';
gallery_list[1] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1033/(2).jpg';
gallery_list[2] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1034/(3).jpg';
gallery_list[3] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1035/(4).jpg';
gallery_list[4] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1036/(5).jpg';
gallery_list[5] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1037/(6).jpg';
gallery_list[6] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1038/(7).jpg';
gallery_list[7] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1039/(8).jpg';
gallery_list[8] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1040/(9).jpg';
gallery_list[9] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1041/(10).jpg';
gallery_list[10] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1042/(11).jpg';
gallery_list[11] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1043/(12).jpg';
gallery_list[12] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1044/(13).jpg';
gallery_list[13] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1045/(14).jpg';
gallery_list[14] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1046/(15).jpg';
gallery_list[15] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1047/(16).jpg';
gallery_list[16] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1032/(1).jpg';
gallery_list[17] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1033/(2).jpg';
gallery_list[18] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1034/(3).jpg';
gallery_list[19] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1035/(4).jpg';
gallery_list[20] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1036/(5).jpg';
gallery_list[21] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1037/(6).jpg';
gallery_list[22] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1038/(7).jpg';
gallery_list[23] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1039/(8).jpg';
gallery_list[24] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1040/(9).jpg';
gallery_list[25] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1041/(10).jpg';
gallery_list[26] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1042/(11).jpg';
gallery_list[27] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1043/(12).jpg';
gallery_list[28] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1044/(13).jpg';
gallery_list[29] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1045/(14).jpg';
gallery_list[30] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1046/(15).jpg';
gallery_list[31] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1047/(16).jpg';
gallery_list[32] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1032/(1).jpg';
gallery_list[33] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1033/(2).jpg';
gallery_list[34] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1034/(3).jpg';
gallery_list[35] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1035/(4).jpg';
gallery_list[36] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1036/(5).jpg';
gallery_list[37] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1037/(6).jpg';
gallery_list[38] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1038/(7).jpg';
gallery_list[39] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1039/(8).jpg';
gallery_list[40] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1040/(9).jpg';
gallery_list[41] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1041/(10).jpg';
gallery_list[42] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1042/(11).jpg';
gallery_list[43] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1043/(12).jpg';
gallery_list[44] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1044/(13).jpg';
gallery_list[45] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1045/(14).jpg';
gallery_list[46] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1046/(15).jpg';
gallery_list[47] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1047/(16).jpg';
gallery_list[48] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1032/(1).jpg';
gallery_list[49] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1033/(2).jpg';
gallery_list[50] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1034/(3).jpg';
gallery_list[51] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1035/(4).jpg';
gallery_list[52] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1036/(5).jpg';
gallery_list[53] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1037/(6).jpg';
gallery_list[54] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1038/(7).jpg';
gallery_list[55] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1039/(8).jpg';
gallery_list[56] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1040/(9).jpg';
gallery_list[57] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1041/(10).jpg';
gallery_list[58] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1042/(11).jpg';
gallery_list[59] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1043/(12).jpg';
gallery_list[60] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1044/(13).jpg';
gallery_list[61] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1045/(14).jpg';
gallery_list[62] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1046/(15).jpg';
gallery_list[63] = 'http://i.photo.empas.com/ybs0826/ybs0826_44/sp/1047/(16).jpg';
gallery_list[64] = '';
gallery_list[65] = '';
gallery_list[66] = '';
gallery_list[67] = '';
gallery_list[68] = '';
gallery_list[69] = '';
gallery_list[70] = '';
gallery_list[71] = '';

for(var i=0; i<gallery_list.length; i++) {
    if(gallery_list[i].slice(0,1) == '[') {
        gallery_list[i] = gallery_list[i].slice(1);
        gallery_list[i] = gallery_list[i].split(']');
        gallery_list[i] = eval(gallery_list[i][0])+gallery_list[i][1];
    }
}
var gallery_table = '<table border="1" width="'+parseInt((small_width*g_width_length)+50)+'" height="'+parseInt((small_height*g_height_length)+50)+'" bordercolorlight="#999999" bordercolordark="#ffffff" cellspacing="0" cellpadding="0">';
gallery_table += '<caption id="caption_code"> </caption>';
for(i=0; i<g_height_length; i++) {
    gallery_table += '<tr align="center">';
    for(var j=0; j<g_width_length; j++) {
        gallery_table += '<td id="g_t" width="'+parseInt(((small_width*g_width_length)+50)/g_width_length)+'" height="'+parseInt(((small_height*g_height_length)+50)/g_height_length)+'"> </td>';
    }
    gallery_table += '</tr>';
}
gallery_table += '</table>';
gallery_table += '<table border="0" width="'+parseInt((small_width*g_width_length)+50)+'" height="30" cellspacing="0" cellpadding="0">';
gallery_table += '<tr align="center">';
gallery_table += '<td id="page_prev" width="35"><a href="#" onfocus="this.blur();" onclick="move_page(\'prev\');" onmouseover="window.status=\'Previous\'; return true;" onmouseout="window.status=\'\'; return true;" class="g_page_no">이전</a></td>';
gallery_table += '<td id="page_info"> </td>';
gallery_table += '<td id="page_next" width="35"><a href="#" onfocus="this.blur();" onclick="move_page(\'next\');" onmouseover="window.status=\'Next\'; return true;" onmouseout="window.status=\'\'; return true;" class="g_page_no">다음</a></td>';
gallery_table += '</tr>';
gallery_table += '</table>';
var page_status = '';
function show_image(page_no) {
    page_status = page_no;

    for(i=0; i<g_width_length*g_height_length; i++) {
        if(gallery_list[i+page_no] != undefined) {
            g_t[i].innerHTML = '<a href="#" onclick="view_image(\''+gallery_list[i+page_no]+'\');" onfocus="this.blur();">'+
                    '<img src="'+gallery_list[i+page_no]+'" width="'+small_width+'" height="'+small_height+'" onerror="error_debug('+i+');" onmouseover="this.className=\'g_image_border_show\';" onmouseout="this.className=\'g_image_border_hide\';" border="0" class="g_image_border_hide"></a>';
        } else {
            g_t[i].innerHTML = ' ';
        }
    }

    var show_page = parseInt((page_no/(g_width_length*g_height_length))+1);
    caption_code.innerHTML = caption_msg+' - '+show_page;
}
function move_page(porn) {
    if(porn == 'prev') {
        if(page_status == 0) {
            alert('처음입니다.');
            show_image(0);
        } else {
            show_image(page_status-(g_width_length*g_height_length));
        }
    } else
    if(porn == 'next') {
        if(page_status == page_add_no[page_add_no.length-1]) {
            alert('끝입니다.');
            show_image(page_add_no[page_add_no.length-1]);
        } else {
            show_image(page_status+(g_width_length*g_height_length));
        }
    }
}
var page_add_no = new Array();
for(i=0; i<gallery_list.length/(g_width_length*g_height_length); i++) {
    page_add_no[i] = i*(g_width_length*g_height_length);
}
var page_length = '';
for(i=1; i<=Math.ceil(gallery_list.length/(g_width_length*g_height_length)); i++) {
    page_length += '<a href="#" onclick="show_image('+page_add_no[i-1]+');" onmouseover="window.status=\'PAGE : '+i+'\'; return true;" onmouseout="window.status=\'\'; return true;" onfocus="this.blur();" class="g_page_no">['+i+']</a>';
}
function show_page() {
    page_info.innerHTML = page_length;
}
function view_image(image_url) {
    view_popup = window.open('','v_p','width=100,height=100,left=0,top=0,scrollbars=no,resizable=yes');
    view_popup.document.open();
    view_popup.document.write('<html>\n'+
                '<head>\n'+
                '<title>'+view_popup_title+'</title>\n'+
                '<sc'+'ript language="javascript">\n'+
                '<!'+'--\n'+
                'function view_popup_resize() {\n'+
                '\tvar original_image_width = document.all.original_image.width + 15;\n'+
                '\tvar original_image_height = document.all.original_image.height + 30;\n\n'+
                '\tresizeTo(original_image_width,original_image_height);\n'+
                '}\n'+
                '//'+'-->\n'+
                '</sc'+'ript>\n'+
                '</head>\n'+
                '<body scroll="no" leftmargin="0" topmargin="0">\n'+
                '<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">\n'+
                '<tr>\n'+
                '<td align="center">\n'+
                '<a href="#" onclick="window.close();" onfocus="this.blur();">\n'+
                '<img src="'+image_url+'" name="original_image" onload="view_popup_resize();" galleryimg="no" border="0"></a>\n'+
                '</td>\n'+
                '</tr>\n'+
                '</table>\n'+
                '</body>\n'+
                '</html>');
    view_popup.document.close();
    view_popup.document.focus();
}
function error_debug(error_no) {
    g_t[error_no].innerHTML = '<div class="g_page_no"> </div>';
}
function load_hig() {
    show_image(0);
    show_page();
}
//-->
</script>
<body onload="load_hig();">
<center>
<script language="javascript">
<!--
document.write(gallery_table);
//-->
</script>
</center>
[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
18년 전 조회 4,527
18년 전 조회 3,351
18년 전 조회 1,878
18년 전 조회 3,666
18년 전 조회 2,351
18년 전 조회 3,798
18년 전 조회 5,233
18년 전 조회 3,895
18년 전 조회 2,733
18년 전 조회 3,010
18년 전 조회 2,513
18년 전 조회 2,853
18년 전 조회 1,962
18년 전 조회 3,507
18년 전 조회 2,196
18년 전 조회 2,320
18년 전 조회 2,156
18년 전 조회 3,119
18년 전 조회 2,053
18년 전 조회 2,727
18년 전 조회 3,921
18년 전 조회 4,629
18년 전 조회 2,439
18년 전 조회 2,924
18년 전 조회 4,676
18년 전 조회 2,745
18년 전 조회 1,933
18년 전 조회 3,381
18년 전 조회 3,185
18년 전 조회 3,917
18년 전 조회 2,235
18년 전 조회 2,399
18년 전 조회 1만
18년 전 조회 3,565
18년 전 조회 3,366
18년 전 조회 3,236
18년 전 조회 2,872
18년 전 조회 4,215
18년 전 조회 5,548
18년 전 조회 3,797
18년 전 조회 3,252
18년 전 조회 3,673
18년 전 조회 2,323
18년 전 조회 2,751
18년 전 조회 3,985
18년 전 조회 2,913
18년 전 조회 4,432
18년 전 조회 2,138
18년 전 조회 2,585
18년 전 조회 2,480
18년 전 조회 3,844
18년 전 조회 3,903
18년 전 조회 2,636
18년 전 조회 2,717
18년 전 조회 3,034
18년 전 조회 2,867
18년 전 조회 2,078
18년 전 조회 2,241
18년 전 조회 4,898
18년 전 조회 4,253
18년 전 조회 2,869
18년 전 조회 2,432
18년 전 조회 2,935
18년 전 조회 2,396
18년 전 조회 3,576
18년 전 조회 2,233
18년 전 조회 2,028
18년 전 조회 1,886
18년 전 조회 1,707
18년 전 조회 3,298
18년 전 조회 4,624
18년 전 조회 4,906
18년 전 조회 2,191
18년 전 조회 3,643
18년 전 조회 3,360
18년 전 조회 4,651
18년 전 조회 3,300
18년 전 조회 4,282
18년 전 조회 3,974
18년 전 조회 3,668
18년 전 조회 3,074
18년 전 조회 2,973
18년 전 조회 3,550
18년 전 조회 2,200
18년 전 조회 2,145
18년 전 조회 5,552
18년 전 조회 2,731
18년 전 조회 2,477
18년 전 조회 2,777
18년 전 조회 2,127
18년 전 조회 3,111
18년 전 조회 1만
18년 전 조회 1,964
18년 전 조회 2,882
18년 전 조회 2,918
18년 전 조회 2,166
18년 전 조회 3,020
18년 전 조회 4,023
18년 전 조회 2,977
18년 전 조회 2,361