묻고답하기
썸네일 클릭했을때 자동으로 큰 이미지 사이즈에 맞춰 새창 띄우기..
2003.08.25 01:04
말이 굉장히 복잡한데..
음.. 뭐냐면요, 제가 팬사이트 운영중인데 사진 자료가 느무느무 많거든요..;;
지금은 한 3000장 정도 사진을 왕 노가다로 일단 썸네일 만들고, 큰 이미지 올리고,
썸네일을 페이지에 넣고 링크를 걸때 큰 이미지의 사이즈를 줘서
썸네일을 클릭하면 큰 이미지의 사이즈에 맞는 창으로 뜨거든요..
사실 많은 곳이 그냥 새창에 사진 뜨게 만드는데 그렇게 하기는 싫고..
그래서 말인데요..
한 폴더 안에 썸네일만 넣고, 다른 폴더 안에 큰 이미지만 넣은 다음
페이지에 예를들어 1-10까지 값을 주면 1-10에 해당하는 썸네일이 페이지에 나오고
각각을 클릭하면 큰 이미지 크기에 맞는 창으로 뜨는.. 이런건 구현 못하나요? 왠지 할 수 있는 방법이 있을꺼 같아서 말이죠..
근데 설명이 너무 어렵네요.. 으흐.. 어딘가에 이런 강좌는 없나요.. ㅠ_ㅜ 고수분들 좀 도와주세요~
음.. 뭐냐면요, 제가 팬사이트 운영중인데 사진 자료가 느무느무 많거든요..;;
지금은 한 3000장 정도 사진을 왕 노가다로 일단 썸네일 만들고, 큰 이미지 올리고,
썸네일을 페이지에 넣고 링크를 걸때 큰 이미지의 사이즈를 줘서
썸네일을 클릭하면 큰 이미지의 사이즈에 맞는 창으로 뜨거든요..
사실 많은 곳이 그냥 새창에 사진 뜨게 만드는데 그렇게 하기는 싫고..
그래서 말인데요..
한 폴더 안에 썸네일만 넣고, 다른 폴더 안에 큰 이미지만 넣은 다음
페이지에 예를들어 1-10까지 값을 주면 1-10에 해당하는 썸네일이 페이지에 나오고
각각을 클릭하면 큰 이미지 크기에 맞는 창으로 뜨는.. 이런건 구현 못하나요? 왠지 할 수 있는 방법이 있을꺼 같아서 말이죠..
근데 설명이 너무 어렵네요.. 으흐.. 어딘가에 이런 강좌는 없나요.. ㅠ_ㅜ 고수분들 좀 도와주세요~
var win1Open = null
function new_img(picName, windowName, windowWidth, windowHeight){
return window.open(picName,windowName,"toolbar=no,scrollbars=no,resizable=no,width=" + (parseInt(windowWidth)+20) + ",height=" + (parseInt(windowHeight)+15))
}
function winClose(){
if(win1Open != null) win1Open.close()
}
function donot(){}
</script>
<script language="JavaScript1.1">
function new_img(picName, windowName, windowWidth, windowHeight){
var winHandle = window.open("" ,windowName,"toolbar=no,scrollbars=no,resizable=no,width=" + windowWidth + ",height=" + windowHeight)
if(winHandle != null){
var htmlString = "<html><head><title>Picture</title></head>\n"
htmlString += "<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>\n"
htmlString += "<a href=javascript:window.close()><img src=" + picName + " border=0 alt=Close></a>\n"
htmlString += "</body></html>\n"
winHandle.document.open()
winHandle.document.write(htmlString)
winHandle.document.close()
}
if(winHandle != null) winHandle.focus()
return winHandle
}
</script>
<TABLE align=center border=0>
<?
$_small ="./sm"; // 섬네임 작은 이미지 폴더 // 상대 경로나 폴더 지정
$_big = "./big"; // 섬네임 큰 이미지 폴더 // 상대 경로나 폴더 지정
$_file_name = "lp-off";
// 출력할 공통되는 이미지 이름 부분 주위 예를 들어 off 라는 파일 이름으로해는데
// off01 , 02 이런식으로 구하려구 하는데 ii_off01 이런파일이 있으면 off 라는 이름이 동일 하게 되있으면 같이 출력 되기때문에 주위 하세요
//폴더 이름 끝에 / 붙이지 마세요 그리고 상대 경로 제대로 입력 해야 이미지 표시도 됩니다.
$handle=opendir($_small);
$_x = 3;
$_h_num = 5;
// 옆으로 정렬 갯수 $_x 하고 나누기 하기 때문에
// $_x = 0 이면 h_num = 2 , $_x = 1 이면 h_num = 3 이런식으로 h_num 값에서 -2 한 값을 $_x 지정 하세요
while ($_info = readdir($handle))
{
$_x ++;
$_temp = $_x % $_h_num;
if(eregi("\.jpg",$_info) or eregi("\.gif",$_info))
{
if(eregi("$_file_name",$_info)){
if($_temp == 1){ echo"<TR>"; }
$_isize = @getimagesize($_big."/".$_info); // 큰 이미지 넓이 높이 구하기
$_big_link = "<a href=\"javascript:donot()\" onClick=\"win1Open=new_img('$_big/$_info', 'popWin1', '$_isize[0]', '$_isize[1]')\" onMouseOver=\"window.status='Click to display picture'; return true;\" onMouseOut=\"window.status=''\">";
echo"<TD width=50><p>$_big_link<img src=$_small/$_info height=90 width=90 border=0></a></p></td>\n";
if(!$_temp){ echo"</TR>\n"; }
}
}
}
closedir($handle);
?>
</TABLE>
php 소스를 사용 해서 폴더에 있는 이미지 구해서 페이지 출력 한 다음 큰이미지 사이즈를 구해서 링크 부분 입력 되게 해봐거든요 한번 위에 소스 사용 해보세요.
자바소스를 저런식으로 사용 하는거 보니까 익스 버전 때문에 위에 처럼 해나 보조...