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,578
18년 전 조회 3,401
18년 전 조회 1,927
18년 전 조회 3,716
18년 전 조회 2,397
18년 전 조회 3,842
18년 전 조회 5,273
18년 전 조회 3,934
18년 전 조회 2,779
18년 전 조회 3,066
18년 전 조회 2,555
18년 전 조회 2,894
18년 전 조회 2,011
18년 전 조회 3,549
18년 전 조회 2,243
18년 전 조회 2,379
18년 전 조회 2,199
18년 전 조회 3,168
18년 전 조회 2,107
18년 전 조회 2,777
18년 전 조회 3,966
18년 전 조회 4,673
18년 전 조회 2,480
18년 전 조회 2,966
18년 전 조회 4,721
18년 전 조회 2,790
18년 전 조회 1,983
18년 전 조회 3,419
18년 전 조회 3,229
18년 전 조회 3,950
18년 전 조회 2,290
18년 전 조회 2,445
18년 전 조회 1만
18년 전 조회 3,613
18년 전 조회 3,414
18년 전 조회 3,281
18년 전 조회 2,911
18년 전 조회 4,250
18년 전 조회 5,595
18년 전 조회 3,849
18년 전 조회 3,292
18년 전 조회 3,717
18년 전 조회 2,362
18년 전 조회 2,789
18년 전 조회 4,034
18년 전 조회 2,962
18년 전 조회 4,467
18년 전 조회 2,183
18년 전 조회 2,623
18년 전 조회 2,526
18년 전 조회 3,885
18년 전 조회 3,954
18년 전 조회 2,679
18년 전 조회 2,757
18년 전 조회 3,070
18년 전 조회 2,911
18년 전 조회 2,122
18년 전 조회 2,291
18년 전 조회 4,937
18년 전 조회 4,294
18년 전 조회 2,923
18년 전 조회 2,462
18년 전 조회 2,985
18년 전 조회 2,440
18년 전 조회 3,619
18년 전 조회 2,277
18년 전 조회 2,070
18년 전 조회 1,932
18년 전 조회 1,748
18년 전 조회 3,334
18년 전 조회 4,665
18년 전 조회 4,936
18년 전 조회 2,236
18년 전 조회 3,684
18년 전 조회 3,394
18년 전 조회 4,694
18년 전 조회 3,345
18년 전 조회 4,341
18년 전 조회 4,011
18년 전 조회 3,711
18년 전 조회 3,113
18년 전 조회 3,004
18년 전 조회 3,587
18년 전 조회 2,253
18년 전 조회 2,199
18년 전 조회 5,606
18년 전 조회 2,774
18년 전 조회 2,527
18년 전 조회 2,820
18년 전 조회 2,175
18년 전 조회 3,160
18년 전 조회 1만
18년 전 조회 2,011
18년 전 조회 2,932
18년 전 조회 2,976
18년 전 조회 2,203
18년 전 조회 3,069
18년 전 조회 4,065
18년 전 조회 3,024
18년 전 조회 2,399