갤러리에 관한 질문 정보
그누보드 갤러리에 관한 질문본문
이기능이 어딘가에 팁이 있을듯한데 찾아봐도 못찾겠어서 질문드립니다.
갤러리에서 리스트화면의 이미지와 확대보기 새창화면의 이미지를 다르게 할려면 어찌하는지요.
view 부분말고 확대보기 새창부분입니다.
view부분은 사용안하거든요.
답변 주실분 찾습니다. (__)
갤러리에서 리스트화면의 이미지와 확대보기 새창화면의 이미지를 다르게 할려면 어찌하는지요.
view 부분말고 확대보기 새창부분입니다.
view부분은 사용안하거든요.
답변 주실분 찾습니다. (__)
댓글 전체
켁^^;;
아..갤러리 문제는 맞습니다..크..
제가 페이지를 보여드려야 이해가 빠르실것을..
플래시랑은 상관없는거구요.
칠쟁이님 갤러리를 사용한 페이지인데요.
http://yodel.co.kr/gnu3/?doc=bbs/gnuboard.php&bo_table=product1
이미지를 확대보기했을때 저렇게 모델만 나오는게 아니라 이런저런 설명을 같이 이미지에 넣을려하거든요.
근데 문제는 그렇게 넣어버리면 100*100 사이즈 미리보기 사이즈에서 글자드리 쪼그라든게 보기흉해서 말이죠.
업로드1.2를 이용한 방법이 있을거 같아서 질문드려본거거든요.
혹시 그걸 아시는 분이 없으실까싶어서요..
아니면 제작문의게시판에 써야하는 성질의 것인지를 질문드려보는겁니다.^^;
아..갤러리 문제는 맞습니다..크..
제가 페이지를 보여드려야 이해가 빠르실것을..
플래시랑은 상관없는거구요.
칠쟁이님 갤러리를 사용한 페이지인데요.
http://yodel.co.kr/gnu3/?doc=bbs/gnuboard.php&bo_table=product1
이미지를 확대보기했을때 저렇게 모델만 나오는게 아니라 이런저런 설명을 같이 이미지에 넣을려하거든요.
근데 문제는 그렇게 넣어버리면 100*100 사이즈 미리보기 사이즈에서 글자드리 쪼그라든게 보기흉해서 말이죠.
업로드1.2를 이용한 방법이 있을거 같아서 질문드려본거거든요.
혹시 그걸 아시는 분이 없으실까싶어서요..
아니면 제작문의게시판에 써야하는 성질의 것인지를 질문드려보는겁니다.^^;
^^;;
갤러리 문제가 아니셨네요.
일반 쇼핑몰처럼 확대 새창이미지 띄우기를 하실련가본데요.
현재 스킨 자료실에 있는 갤러리를 이용/수정하시면 될겁니다.
업로드시 500*500 사이즈 사진을 올리시고, 뷰어이미지를 작게하시면 됩니다.
저는 새창에 띄워지는 이미지 리사이즈를 말씀하신줄 알았네요. ^^;;
새창이 띄워진후 돋보기를 사용하시듯 효과를 주는걸 말씀하신듯 한데요.
플래시쪽 소스를 뒤져보시는게 더 빠르실듯 한데요.
답변이 동문서답이 되버려서 죄송합니다. ^^:;
갤러리 문제가 아니셨네요.
일반 쇼핑몰처럼 확대 새창이미지 띄우기를 하실련가본데요.
현재 스킨 자료실에 있는 갤러리를 이용/수정하시면 될겁니다.
업로드시 500*500 사이즈 사진을 올리시고, 뷰어이미지를 작게하시면 됩니다.
저는 새창에 띄워지는 이미지 리사이즈를 말씀하신줄 알았네요. ^^;;
새창이 띄워진후 돋보기를 사용하시듯 효과를 주는걸 말씀하신듯 한데요.
플래시쪽 소스를 뒤져보시는게 더 빠르실듯 한데요.
답변이 동문서답이 되버려서 죄송합니다. ^^:;
지니님 답변 감사드립니다.
이렇게 써주시고.^^;
근데 어디서부터 어디까지를 고치라는건지 잘 모르겠네요..;;
어느부분이라고만 적으셔서 그부분에 해당되는게 정확히 어디부터 어디인지--;;
그리고 이렇게 하면 다른이미지가 나오는게 맞나요?
애써 적어주셨는데 다른거는 아니겠죠--; 제가 원하는건 레이어보다 그냥 확대보기 새창이거든요.
보통 쇼핑몰에서 상세보기 클릭하면 상품이 단순확대가 아니고 다른이미지작업을 해서 좀 더 제품을 잘 보이게 해주듯이 말이죠.
제품을 확대사이즈에 맞게 작업을 하면 일반 이미지야 리스트화면에서 100*100 이라치면 쪼그라들어도 별 상관이 없는데
제품설명을 포토샵으로 글자를 써서 넣으면 100*100에선 깨알같은점이 지저분하게 보이겠죠?
그래서 100*100에선 깨끗하게 제품만 나오고 확대보기 500*500으로 해서는 제품설명이며 기타 설명작업을
더 할수 있게 할려는걸 원하는거거든요.
그런 방법은 어디 없을까요?(__)
이렇게 써주시고.^^;
근데 어디서부터 어디까지를 고치라는건지 잘 모르겠네요..;;
어느부분이라고만 적으셔서 그부분에 해당되는게 정확히 어디부터 어디인지--;;
그리고 이렇게 하면 다른이미지가 나오는게 맞나요?
애써 적어주셨는데 다른거는 아니겠죠--; 제가 원하는건 레이어보다 그냥 확대보기 새창이거든요.
보통 쇼핑몰에서 상세보기 클릭하면 상품이 단순확대가 아니고 다른이미지작업을 해서 좀 더 제품을 잘 보이게 해주듯이 말이죠.
제품을 확대사이즈에 맞게 작업을 하면 일반 이미지야 리스트화면에서 100*100 이라치면 쪼그라들어도 별 상관이 없는데
제품설명을 포토샵으로 글자를 써서 넣으면 100*100에선 깨알같은점이 지저분하게 보이겠죠?
그래서 100*100에선 깨끗하게 제품만 나오고 확대보기 500*500으로 해서는 제품설명이며 기타 설명작업을
더 할수 있게 할려는걸 원하는거거든요.
그런 방법은 어디 없을까요?(__)
아래는 gblist.skin.php 파일내용입니다.
1. 맨 윗부분의 php에 아래 변수 추가
<?
// 레이어 변수 선언
$left="20"; //레이어의 위치 왼쪽 , px 단위 입니다.
$top="30"; //레이어의 위치 위에서 , px 단위 입니다.
$title_bar_color="#006699"; //레이어의 제목 부분 바탕 색깔
$title_text_color="#ffffff"; //레이어의 제목 글씨 색깔
$content_table_color="#006699"; //레이어의 내용 부분 바탕 색깔
$content_text_color="#ffffff"; //레이어의 내용 글씨 색깔 (필요시)
$duration="0.5"; //이미지가 열리는 시간 클수록 천천히 열립니다
$resizingcount="2"; //레이어 이미지의 축소 할 수 있는 횟수 2,3번이면 적당하겠네요.
?>
2. 상단의 자바스크립트 새창띄우기 부분을 변환, 또는 아래 스크립트를 삽입
<script language=javascript>
var x =0
var y=0
drag = 0
move = 0
window.document.onmousemove = mouseMove
window.document.onmousedown = mouseDown
window.document.onmouseup = mouseUp
window.document.ondragstart = mouseStop
var resizecount=0;
var originalsize;
var resizetarget;
//레이어
function ShowImg(img_name) {
resizecount=0;
var table_width=1;
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "visible";
img_layer.filters.blendTrans.play();
img_layer.innerHTML='<? echo "<table cellpadding=0 cellspacing=0 border=0 width='+table_width+'><tr><td bgcolor=$title_bar_color align=middle><table cellpadding=3 cellspacing=0 border=0><tr><td width=99%><font color=$title_text_color> $list[$i][subject]</font></td><td width=1% nowrap align=middle><font class=page color=$title_text_color></font> <a href=javascript:; onclick=LayerResize(show_layer_img.width,show_layer_img.height) onfocus=blur()>◑</a> <a href=javascript:; onclick=LayerOrsize() onfocus=blur()>●</a> </td></tr></table></td></tr><tr><td align=center bgcolor=$title_bar_color><img src='+img_name+' border=0 alt=\"클릭하면 닫힙니다\" onclick=HideImg() name=show_layer_img></td></tr><tr bgcolor=$content_table_color><td align=center valign=top width=100%><table width=100% cellpadding=5 cellspacing=0><tr><td> </td></tr></table></td></tr></table>";?>';
}
function ReWidth(tw) {
table_width=tw;
}
function HideImg() {
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "hidden";
img_layer.filters.blendTrans.play();
}
//레이어이동
function mouseUp() {
move = 0
}
function mouseDown() {
if (drag) {
clickleft = window.event.x - parseInt(img_layer.style.left)
clicktop = window.event.y - parseInt(img_layer.style.top)
img_layer.style.zIndex += 1
move = 1
}
}
function mouseMove() {
if (move) {
img_layer.style.left = window.event.x - clickleft
img_layer.style.top = window.event.y - clicktop
}
}
//오프윈
function mouseStop() {
window.event.returnValue = false
}
//리사이즈
function LayerResize(imgwidth,imgheight) {
if (resizecount==0) originalsize=imgheight;
resizecount++;
if (resizecount<=<?=$resizingcount?>) {
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "visible";
img_layer.filters.blendTrans.play();
show_layer_img.height=(imgheight/3)*2;
return ReWidth(show_layer_img.width)
}
}
//본래크기로
function LayerOrsize() {
if (resizecount!=0) {
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "visible";
img_layer.filters.blendTrans.play();
show_layer_img.height=originalsize;
resizecount=0;
}
}
</script>
3. 중간부분의 썸네일 링크부분(새창띄우기 부분)을 아래로 변환
<?
// 큰 이미지 사이즈 얻기
$limg = $list[$i][file_image1];
if (file_exists($limg)) {
// $size = getimagesize($limg);
echo "<a href=\"javascript:showImgWin('$limg');\">";
}
?>
4. 맨아랫부분에 아래 레이어를 추가
<div id=img_layer style="position:absolute; left:<?=$left?>px; top:<?=$top?>px; z-index:2; visibility:hidden; filter:revealTrans(transition=23,duration=<?=$duration?>) blendTrans(duration=<?=$duration?>);" onmouseover="drag=1;move=0" onmouseout="drag=0"></div>
※ 안될지도 모릅니다. 너무 급하게 수정해서.. 테스트도 안해봐서 죄송합니다만 일단 소스나마 참고하시면 될 듯 해서 올립니다.
그럼 좋은 하루 되세요~
아~참, 소스는 http://morami.net/d_m/mg/index.html 이곳의 노디비부분을 참고하시면 될겁니다.
1. 맨 윗부분의 php에 아래 변수 추가
<?
// 레이어 변수 선언
$left="20"; //레이어의 위치 왼쪽 , px 단위 입니다.
$top="30"; //레이어의 위치 위에서 , px 단위 입니다.
$title_bar_color="#006699"; //레이어의 제목 부분 바탕 색깔
$title_text_color="#ffffff"; //레이어의 제목 글씨 색깔
$content_table_color="#006699"; //레이어의 내용 부분 바탕 색깔
$content_text_color="#ffffff"; //레이어의 내용 글씨 색깔 (필요시)
$duration="0.5"; //이미지가 열리는 시간 클수록 천천히 열립니다
$resizingcount="2"; //레이어 이미지의 축소 할 수 있는 횟수 2,3번이면 적당하겠네요.
?>
2. 상단의 자바스크립트 새창띄우기 부분을 변환, 또는 아래 스크립트를 삽입
<script language=javascript>
var x =0
var y=0
drag = 0
move = 0
window.document.onmousemove = mouseMove
window.document.onmousedown = mouseDown
window.document.onmouseup = mouseUp
window.document.ondragstart = mouseStop
var resizecount=0;
var originalsize;
var resizetarget;
//레이어
function ShowImg(img_name) {
resizecount=0;
var table_width=1;
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "visible";
img_layer.filters.blendTrans.play();
img_layer.innerHTML='<? echo "<table cellpadding=0 cellspacing=0 border=0 width='+table_width+'><tr><td bgcolor=$title_bar_color align=middle><table cellpadding=3 cellspacing=0 border=0><tr><td width=99%><font color=$title_text_color> $list[$i][subject]</font></td><td width=1% nowrap align=middle><font class=page color=$title_text_color></font> <a href=javascript:; onclick=LayerResize(show_layer_img.width,show_layer_img.height) onfocus=blur()>◑</a> <a href=javascript:; onclick=LayerOrsize() onfocus=blur()>●</a> </td></tr></table></td></tr><tr><td align=center bgcolor=$title_bar_color><img src='+img_name+' border=0 alt=\"클릭하면 닫힙니다\" onclick=HideImg() name=show_layer_img></td></tr><tr bgcolor=$content_table_color><td align=center valign=top width=100%><table width=100% cellpadding=5 cellspacing=0><tr><td> </td></tr></table></td></tr></table>";?>';
}
function ReWidth(tw) {
table_width=tw;
}
function HideImg() {
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "hidden";
img_layer.filters.blendTrans.play();
}
//레이어이동
function mouseUp() {
move = 0
}
function mouseDown() {
if (drag) {
clickleft = window.event.x - parseInt(img_layer.style.left)
clicktop = window.event.y - parseInt(img_layer.style.top)
img_layer.style.zIndex += 1
move = 1
}
}
function mouseMove() {
if (move) {
img_layer.style.left = window.event.x - clickleft
img_layer.style.top = window.event.y - clicktop
}
}
//오프윈
function mouseStop() {
window.event.returnValue = false
}
//리사이즈
function LayerResize(imgwidth,imgheight) {
if (resizecount==0) originalsize=imgheight;
resizecount++;
if (resizecount<=<?=$resizingcount?>) {
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "visible";
img_layer.filters.blendTrans.play();
show_layer_img.height=(imgheight/3)*2;
return ReWidth(show_layer_img.width)
}
}
//본래크기로
function LayerOrsize() {
if (resizecount!=0) {
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "visible";
img_layer.filters.blendTrans.play();
show_layer_img.height=originalsize;
resizecount=0;
}
}
</script>
3. 중간부분의 썸네일 링크부분(새창띄우기 부분)을 아래로 변환
<?
// 큰 이미지 사이즈 얻기
$limg = $list[$i][file_image1];
if (file_exists($limg)) {
// $size = getimagesize($limg);
echo "<a href=\"javascript:showImgWin('$limg');\">";
}
?>
4. 맨아랫부분에 아래 레이어를 추가
<div id=img_layer style="position:absolute; left:<?=$left?>px; top:<?=$top?>px; z-index:2; visibility:hidden; filter:revealTrans(transition=23,duration=<?=$duration?>) blendTrans(duration=<?=$duration?>);" onmouseover="drag=1;move=0" onmouseout="drag=0"></div>
※ 안될지도 모릅니다. 너무 급하게 수정해서.. 테스트도 안해봐서 죄송합니다만 일단 소스나마 참고하시면 될 듯 해서 올립니다.
그럼 좋은 하루 되세요~
아~참, 소스는 http://morami.net/d_m/mg/index.html 이곳의 노디비부분을 참고하시면 될겁니다.
새창을 띄우는것보다 소스를 손질해서 레이어로 띄우시면 될 듯합니다. 시간의 압박때문에 소스를 못올려드릴듯...;; ㅈㅅ합니다.
스킨폴더의 gblist.skin.php 파일의 자바스크립 showImgWin 변수를 활용하시면 될 듯합니다.
스킨폴더의 gblist.skin.php 파일의 자바스크립 showImgWin 변수를 활용하시면 될 듯합니다.