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,878
18년 전 조회 3,661
18년 전 조회 2,344
18년 전 조회 3,796
18년 전 조회 5,231
18년 전 조회 3,893
18년 전 조회 2,730
18년 전 조회 3,007
18년 전 조회 2,512
18년 전 조회 2,849
18년 전 조회 1,960
18년 전 조회 3,506
18년 전 조회 2,196
18년 전 조회 2,317
18년 전 조회 2,155
18년 전 조회 3,117
18년 전 조회 2,052
18년 전 조회 2,725
18년 전 조회 3,920
18년 전 조회 4,625
18년 전 조회 2,435
18년 전 조회 2,922
18년 전 조회 4,675
18년 전 조회 2,744
18년 전 조회 1,931
18년 전 조회 3,376
18년 전 조회 3,184
18년 전 조회 3,914
18년 전 조회 2,232
18년 전 조회 2,397
18년 전 조회 1만
18년 전 조회 3,564
18년 전 조회 3,362
18년 전 조회 3,234
18년 전 조회 2,867
18년 전 조회 4,213
18년 전 조회 5,547
18년 전 조회 3,796
18년 전 조회 3,249
18년 전 조회 3,670
18년 전 조회 2,321
18년 전 조회 2,747
18년 전 조회 3,984
18년 전 조회 2,911
18년 전 조회 4,431
18년 전 조회 2,138
18년 전 조회 2,584
18년 전 조회 2,476
18년 전 조회 3,837
18년 전 조회 3,900
18년 전 조회 2,635
18년 전 조회 2,716
18년 전 조회 3,033
18년 전 조회 2,867
18년 전 조회 2,078
18년 전 조회 2,241
18년 전 조회 4,894
18년 전 조회 4,250
18년 전 조회 2,866
18년 전 조회 2,431
18년 전 조회 2,932
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,904
18년 전 조회 2,188
18년 전 조회 3,639
18년 전 조회 3,360
18년 전 조회 4,648
18년 전 조회 3,298
18년 전 조회 4,280
18년 전 조회 3,973
18년 전 조회 3,666
18년 전 조회 3,074
18년 전 조회 2,971
18년 전 조회 3,548
18년 전 조회 2,200
18년 전 조회 2,142
18년 전 조회 5,551
18년 전 조회 2,731
18년 전 조회 2,474
18년 전 조회 2,774
18년 전 조회 2,124
18년 전 조회 3,110
18년 전 조회 1만
18년 전 조회 1,963
18년 전 조회 2,881
18년 전 조회 2,916
18년 전 조회 2,164
18년 전 조회 3,020
18년 전 조회 4,020
18년 전 조회 2,973
18년 전 조회 2,358