이미지 원본보여주기 관련 스크립트 입니다 정보
이미지 원본보여주기 관련 스크립트 입니다
본문
<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
function ShowImg(file_name){
var file_name;
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "visible";
img_layer.filters.blendTrans.play();
img_layer.innerHTML="<table cellpadding=50 cellspacing=0 border=1 bordercolor='#D9D9D9' bordercolorlight='#D9D9D9' bordercolordark='white' onclick=HideImg() bgcolor='white'><tr><td><img src=" + file_name + " border=0 alt='클릭하면 닫힙니다' style='border:1px #DBDACA solid'></td></tr></table>";
}
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
}
</script>
쿼리문...........
<? for ($i=0; $i<count($list); $i++) {
echo "<a href=javascript:ShowImg('원본주소') onfocus=blur()><img src='썸네일주소'></a> </br>";
}
?>
<div id=img_layer style="position:absolute; left:500px; top:100px; z-index:2; visibility:hidden; filter:revealTrans(transition=23,duration=0.5) blendTrans(duration=0.2);" onmouseover="drag=1;move=0" onmouseout="drag=0"></div>
이렇게 했을때 클릭 했을때 보여지는 레이어는 항상 지정한 위치에 뛰워집니다.
문제는 리스트가 많이 될때 스크롤 해야 하는데 원본그림 보여지는 레이어가 위로 올라가서 보이지가 않는다는 것입니다.
이것을 클릭한 이미지가 속해 있는 td 기준으로 따라다니면서 레이어를 보이게 할 수 없을까요??
아니면 모니터 중심에 항상 뛰워도 좋구요,,
포인트는 더 걸어야 할것 같은데 이것밖에 없네요,,
감사 드립니다,,,
원본은 블루비 입니다.
http://www.blueb.co.kr/bbs.php?table=JS_01&query=view&uid=44&p=9
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
function ShowImg(file_name){
var file_name;
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "visible";
img_layer.filters.blendTrans.play();
img_layer.innerHTML="<table cellpadding=50 cellspacing=0 border=1 bordercolor='#D9D9D9' bordercolorlight='#D9D9D9' bordercolordark='white' onclick=HideImg() bgcolor='white'><tr><td><img src=" + file_name + " border=0 alt='클릭하면 닫힙니다' style='border:1px #DBDACA solid'></td></tr></table>";
}
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
}
</script>
쿼리문...........
<? for ($i=0; $i<count($list); $i++) {
echo "<a href=javascript:ShowImg('원본주소') onfocus=blur()><img src='썸네일주소'></a> </br>";
}
?>
<div id=img_layer style="position:absolute; left:500px; top:100px; z-index:2; visibility:hidden; filter:revealTrans(transition=23,duration=0.5) blendTrans(duration=0.2);" onmouseover="drag=1;move=0" onmouseout="drag=0"></div>
이렇게 했을때 클릭 했을때 보여지는 레이어는 항상 지정한 위치에 뛰워집니다.
문제는 리스트가 많이 될때 스크롤 해야 하는데 원본그림 보여지는 레이어가 위로 올라가서 보이지가 않는다는 것입니다.
이것을 클릭한 이미지가 속해 있는 td 기준으로 따라다니면서 레이어를 보이게 할 수 없을까요??
아니면 모니터 중심에 항상 뛰워도 좋구요,,
포인트는 더 걸어야 할것 같은데 이것밖에 없네요,,
감사 드립니다,,,
원본은 블루비 입니다.
http://www.blueb.co.kr/bbs.php?table=JS_01&query=view&uid=44&p=9
댓글 전체
img_layer 가 활성화 되면서 갱신되는 것입니다.
위치를 변경하시려면... 테이블에 각각 img_layer_고유번호 넣으시고
javascript 에서 고유번호를 넘겨 받아서 나머지 부분은 비활성화 하시고, 고유번호만 활성화 하세요.
그리고 목록에는 고유번호dvi는 .. 표에 맞춰서 여러개 그려주시면 될듯 하네요.
위치를 변경하시려면... 테이블에 각각 img_layer_고유번호 넣으시고
javascript 에서 고유번호를 넘겨 받아서 나머지 부분은 비활성화 하시고, 고유번호만 활성화 하세요.
그리고 목록에는 고유번호dvi는 .. 표에 맞춰서 여러개 그려주시면 될듯 하네요.
네 저도 그렇게 시도 해봤습니다.
아무래 해도 않되더군요,,,
보여주는 레이어를 쿼리문 아쪽으로 넣어서 복수로 생성하면
오류가 생기는듯 하구요,,,
아무래 해도 않되더군요,,,
보여주는 레이어를 쿼리문 아쪽으로 넣어서 복수로 생성하면
오류가 생기는듯 하구요,,,
오류가 생기는 소스를 주시겠어요? (html로 보여주셔도 되구요)
그러면 답변 드리기가 더 편할듯 싶네요.
그러면 답변 드리기가 더 편할듯 싶네요.
newstart 님 감사 드립니다..
다시 계속 수정중인데,,,, 일부개선점은 있으나 근본은 이해 됬습니다.
마무리 된다 해도 썩 좋지 않는 결과 일듯 하여
일단은 고려중입니다,
어째든 대단히 감사 드립니다...
자바스크립트로
모니터 기준으로 항상 중간에 뛰울 수는 있찌요??
다시 계속 수정중인데,,,, 일부개선점은 있으나 근본은 이해 됬습니다.
마무리 된다 해도 썩 좋지 않는 결과 일듯 하여
일단은 고려중입니다,
어째든 대단히 감사 드립니다...
자바스크립트로
모니터 기준으로 항상 중간에 뛰울 수는 있찌요??
링크를 가봤더니 아무래도 모니터 중앙이 아니고 브라우저 중앙인것 같습니다.
긴 스크롤되야 하는 페이지에서는 중앙은 한참 아래 이니까요,,,
긴 스크롤되야 하는 페이지에서는 중앙은 한참 아래 이니까요,,,
스크롤이 길 경우에는 노출된 페이지의 중앙이 맞을텐데요?