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,521
18년 전 조회 3,350
18년 전 조회 1,877
18년 전 조회 3,661
18년 전 조회 2,343
18년 전 조회 3,796
18년 전 조회 5,231
18년 전 조회 3,893
18년 전 조회 2,729
18년 전 조회 3,007
18년 전 조회 2,511
18년 전 조회 2,849
18년 전 조회 1,960
18년 전 조회 3,505
18년 전 조회 2,196
18년 전 조회 2,317
18년 전 조회 2,155
18년 전 조회 3,116
18년 전 조회 2,052
18년 전 조회 2,722
18년 전 조회 3,919
18년 전 조회 4,625
18년 전 조회 2,434
18년 전 조회 2,922
18년 전 조회 4,675
18년 전 조회 2,744
18년 전 조회 1,931
18년 전 조회 3,376
18년 전 조회 3,183
18년 전 조회 3,913
18년 전 조회 2,231
18년 전 조회 2,396
18년 전 조회 1만
18년 전 조회 3,564
18년 전 조회 3,362
18년 전 조회 3,232
18년 전 조회 2,865
18년 전 조회 4,212
18년 전 조회 5,546
18년 전 조회 3,796
18년 전 조회 3,249
18년 전 조회 3,670
18년 전 조회 2,319
18년 전 조회 2,746
18년 전 조회 3,983
18년 전 조회 2,911
18년 전 조회 4,431
18년 전 조회 2,138
18년 전 조회 2,582
18년 전 조회 2,475
18년 전 조회 3,837
18년 전 조회 3,900
18년 전 조회 2,633
18년 전 조회 2,715
18년 전 조회 3,033
18년 전 조회 2,866
18년 전 조회 2,078
18년 전 조회 2,241
18년 전 조회 4,894
18년 전 조회 4,250
18년 전 조회 2,864
18년 전 조회 2,431
18년 전 조회 2,931
18년 전 조회 2,394
18년 전 조회 3,572
18년 전 조회 2,231
18년 전 조회 2,026
18년 전 조회 1,885
18년 전 조회 1,705
18년 전 조회 3,296
18년 전 조회 4,623
18년 전 조회 4,903
18년 전 조회 2,188
18년 전 조회 3,639
18년 전 조회 3,360
18년 전 조회 4,647
18년 전 조회 3,297
18년 전 조회 4,280
18년 전 조회 3,973
18년 전 조회 3,666
18년 전 조회 3,073
18년 전 조회 2,971
18년 전 조회 3,548
18년 전 조회 2,200
18년 전 조회 2,141
18년 전 조회 5,551
18년 전 조회 2,730
18년 전 조회 2,473
18년 전 조회 2,774
18년 전 조회 2,124
18년 전 조회 3,110
18년 전 조회 1만
18년 전 조회 1,961
18년 전 조회 2,880
18년 전 조회 2,916
18년 전 조회 2,164
18년 전 조회 3,018
18년 전 조회 4,019
18년 전 조회 2,973
18년 전 조회 2,358