리스트에서 아이프레임으로 본문 보여주기 정보
리스트에서 아이프레임으로 본문 보여주기
첨부파일
본문
아래 소스와 같이 리스트에서 제목이나 이미지 클릭시 아이프레임으로 페이지 이동하지않고 본문 내용을 띄우려고 합니다.
리스트에서 어떻게 하면 좋을지 궁금합니다.
else
echo "<a href='{$list[$i][href]}'>{$list[$i][subject]}</a>";
이것은 어떻게 해 할지 궁금합니다.
<html>
<head>
<title>심플 라이트박스 효과</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
</head>
<body>
<style type="text/css">
html { width:100%; height:100%; }
body { width:100%; height:100%; margin: 0px; padding: 0px; font-size:9pt; }
.SLB_center { cursor:pointer; visibility:hidden; border: solid 2px #ff0000; }
.SLB_close { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }
.SLB_caption { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }
#SLB_loading { cursor: pointer; display:none; z-index: 99998; position:absolute; font-family: verdana,tahoma; font-size: 9pt; padding: 3px 0px 4px 0px;}
</style>
<script language="javascript" type="text/javascript">
// 심플 라이트박스 효과 by 알릭 (2007/03/01)
// http://www.alik.info
var SLB_cnt = 0;
function SLB_show(url, type)
{
var a = document.getElementById('SLB_film');
var b = document.getElementById('SLB_content');
var c = document.getElementById('SLB_loading');
if(url) {
a.style.top = 0;
a.style.left = 0;
a.style.display = "";
a.style.height = document.body.scrollHeight + 'px';
document.getElementById('SLB_loading').style.display = "block";
SLB_setCenter(c,true);
if(type == 'image') {
b.innerHTML="<img src=" + url + " class='SLB_center' onload='SLB_setCenter(this);' />";
if(arguments[2]) a.onclick = function () { SLB_show() };
if(arguments[3]) b.innerHTML += "<div class='SLB_caption'>"+ arguments[3] +"</div>";;
} else if (type == 'iframe') {
b.innerHTML="<iframe src=" + url + " width="+ arguments[2] +" height="+ arguments[3] +" class='SLB_center' marginwidth='0' marginheight='0' frameborder='0' vspace='0' hspace='0' onload='SLB_setCenter(this);' /></iframe>";
if(arguments[4]) {
b.innerHTML += "<div class='SLB_close' onclick='SLB_show();' title='닫기'>close</div>";
}
b.onclick = ''; b.firstChild.style.cursor = 'default';
} else if (type='html'){
b.innerHTML = url;
SLB_setCenter(b.firstChild);
if(arguments[2]) b.onclick = '';
}
hideSelect();
} else {
a.onclick = '';
a.style.display = "none";
b.innerHTML = "";
b.onclick = function () { SLB_show() };
c.style.display = "none";
showSelect();
SLB_cnt = 0;
}
}
function SLB_setCenter(obj) {
if (obj) {
var h = window.innerHeight || self.innerHeight || document.body.clientHeight;
var w = window.innerWidth || self.innerWidth || document.body.clientWidth;
var l = (document.body.scrollLeft + ((w-(obj.width||parseInt(obj.style.width)||obj.offsetWidth))/2));
var t = (document.body.scrollTop + ((h-(obj.height||parseInt(obj.style.height)||obj.offsetHeight))/2));
if((obj.width||parseInt(obj.style.width)||obj.offsetWidth) >= w) l = 0;
if((obj.height||parseInt(obj.style.height)||obj.offsetHeight) >= h) t = document.body.scrollTop;
document.getElementById('SLB_content').style.left = l + "px";
if(SLB_cnt == 0) {
document.getElementById('SLB_content').style.top = t + "px";
if(document.getElementById('SLB_content').offsetHeight >= h) {
SLB_cnt ++;
}
}
obj.style.visibility = 'visible';
if(obj.nextSibling && (obj.nextSibling.className == 'SLB_close' || obj.nextSibling.className == 'SLB_caption')) {
obj.nextSibling.style.display = 'block';
if(document.getElementById('SLB_content').offsetHeight < h) {
document.getElementById('SLB_content').style.top = parseInt(document.getElementById('SLB_content').style.top) - (obj.nextSibling.offsetHeight/2) + "px";
}
}
if(!arguments[1]) {
document.getElementById('SLB_loading').style.display = "none";
} else {
obj.style.left = l + "px";
obj.style.top = t + "px";
}
}
}
</script>
<div id="SLB_film" style="z-index: 99997; position:absolute; display:none; width:100%; height:100%; background-color:#fafafa; filter:Alpha(opacity=60); opacity:0.6; -moz-opacity:0.6;"></div>
<div id="SLB_content" onClick="SLB_show();" align="center" style="z-index: 99999; position:absolute;"></div>
<div id="SLB_loading" onClick="SLB_show();" title="로딩중...클릭시 취소"><img src="loading.gif" border="0"></div>
<div style="margin:10px 0px 0px 20px;"><a onClick="SLB_show('http://www.naver.com','iframe', 1000, 400, true);" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>아이프레임 띄우기</a>
</body>
</html>
리스트에서 어떻게 하면 좋을지 궁금합니다.
else
echo "<a href='{$list[$i][href]}'>{$list[$i][subject]}</a>";
이것은 어떻게 해 할지 궁금합니다.
<html>
<head>
<title>심플 라이트박스 효과</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
</head>
<body>
<style type="text/css">
html { width:100%; height:100%; }
body { width:100%; height:100%; margin: 0px; padding: 0px; font-size:9pt; }
.SLB_center { cursor:pointer; visibility:hidden; border: solid 2px #ff0000; }
.SLB_close { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }
.SLB_caption { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }
#SLB_loading { cursor: pointer; display:none; z-index: 99998; position:absolute; font-family: verdana,tahoma; font-size: 9pt; padding: 3px 0px 4px 0px;}
</style>
<script language="javascript" type="text/javascript">
// 심플 라이트박스 효과 by 알릭 (2007/03/01)
// http://www.alik.info
var SLB_cnt = 0;
function SLB_show(url, type)
{
var a = document.getElementById('SLB_film');
var b = document.getElementById('SLB_content');
var c = document.getElementById('SLB_loading');
if(url) {
a.style.top = 0;
a.style.left = 0;
a.style.display = "";
a.style.height = document.body.scrollHeight + 'px';
document.getElementById('SLB_loading').style.display = "block";
SLB_setCenter(c,true);
if(type == 'image') {
b.innerHTML="<img src=" + url + " class='SLB_center' onload='SLB_setCenter(this);' />";
if(arguments[2]) a.onclick = function () { SLB_show() };
if(arguments[3]) b.innerHTML += "<div class='SLB_caption'>"+ arguments[3] +"</div>";;
} else if (type == 'iframe') {
b.innerHTML="<iframe src=" + url + " width="+ arguments[2] +" height="+ arguments[3] +" class='SLB_center' marginwidth='0' marginheight='0' frameborder='0' vspace='0' hspace='0' onload='SLB_setCenter(this);' /></iframe>";
if(arguments[4]) {
b.innerHTML += "<div class='SLB_close' onclick='SLB_show();' title='닫기'>close</div>";
}
b.onclick = ''; b.firstChild.style.cursor = 'default';
} else if (type='html'){
b.innerHTML = url;
SLB_setCenter(b.firstChild);
if(arguments[2]) b.onclick = '';
}
hideSelect();
} else {
a.onclick = '';
a.style.display = "none";
b.innerHTML = "";
b.onclick = function () { SLB_show() };
c.style.display = "none";
showSelect();
SLB_cnt = 0;
}
}
function SLB_setCenter(obj) {
if (obj) {
var h = window.innerHeight || self.innerHeight || document.body.clientHeight;
var w = window.innerWidth || self.innerWidth || document.body.clientWidth;
var l = (document.body.scrollLeft + ((w-(obj.width||parseInt(obj.style.width)||obj.offsetWidth))/2));
var t = (document.body.scrollTop + ((h-(obj.height||parseInt(obj.style.height)||obj.offsetHeight))/2));
if((obj.width||parseInt(obj.style.width)||obj.offsetWidth) >= w) l = 0;
if((obj.height||parseInt(obj.style.height)||obj.offsetHeight) >= h) t = document.body.scrollTop;
document.getElementById('SLB_content').style.left = l + "px";
if(SLB_cnt == 0) {
document.getElementById('SLB_content').style.top = t + "px";
if(document.getElementById('SLB_content').offsetHeight >= h) {
SLB_cnt ++;
}
}
obj.style.visibility = 'visible';
if(obj.nextSibling && (obj.nextSibling.className == 'SLB_close' || obj.nextSibling.className == 'SLB_caption')) {
obj.nextSibling.style.display = 'block';
if(document.getElementById('SLB_content').offsetHeight < h) {
document.getElementById('SLB_content').style.top = parseInt(document.getElementById('SLB_content').style.top) - (obj.nextSibling.offsetHeight/2) + "px";
}
}
if(!arguments[1]) {
document.getElementById('SLB_loading').style.display = "none";
} else {
obj.style.left = l + "px";
obj.style.top = t + "px";
}
}
}
</script>
<div id="SLB_film" style="z-index: 99997; position:absolute; display:none; width:100%; height:100%; background-color:#fafafa; filter:Alpha(opacity=60); opacity:0.6; -moz-opacity:0.6;"></div>
<div id="SLB_content" onClick="SLB_show();" align="center" style="z-index: 99999; position:absolute;"></div>
<div id="SLB_loading" onClick="SLB_show();" title="로딩중...클릭시 취소"><img src="loading.gif" border="0"></div>
<div style="margin:10px 0px 0px 20px;"><a onClick="SLB_show('http://www.naver.com','iframe', 1000, 400, true);" style='cursor:pointer; border-bottom:2px solid blue; line-height:2;'>아이프레임 띄우기</a>
</body>
</html>
댓글 전체
방법1 : 관리자모드에서 해당 게시판 설정에서
"목록에서 내용 사용" 이 기능을 사용하시는 방법이 있습니다.
방법 2 :
그누는 list.skin.php 에서도 본문의 내용을 가지고 있습니다.
print_r2($list)를 찍어보시면
$list['wr_content'] 변수가 본문의 내용을 가지고 있는걸 확인할 수 있습니다.
각 리스트 하단에 해당 $list['wr_content']를 코딩으로 잡으시고 display:none;을 하셔서 내용을 가립니다.
각 제목을 클릭했을대 a링크를 제거 하시고 반응 이벤트를 js로 만드시는 방법이 있습니다.
"목록에서 내용 사용" 이 기능을 사용하시는 방법이 있습니다.
방법 2 :
그누는 list.skin.php 에서도 본문의 내용을 가지고 있습니다.
print_r2($list)를 찍어보시면
$list['wr_content'] 변수가 본문의 내용을 가지고 있는걸 확인할 수 있습니다.
각 리스트 하단에 해당 $list['wr_content']를 코딩으로 잡으시고 display:none;을 하셔서 내용을 가립니다.
각 제목을 클릭했을대 a링크를 제거 하시고 반응 이벤트를 js로 만드시는 방법이 있습니다.
답변은 감사하지만 어렵네요...
어떻게 적용을 해야 할지 막막합니다.
리스트에서 제목이나 이미지 클릭시 모달창과 같이 본문내용을 출력하고자 합니다.
어떻게 적용을 해야 할지 막막합니다.
리스트에서 제목이나 이미지 클릭시 모달창과 같이 본문내용을 출력하고자 합니다.
a 링크에 타겟을 iframe으로 주면 됩니다
target='aaa'
<iframe name='aaa' width='700' height='500'></iframe>
그런데 이 방법이 더 복잡해질 것입니다
target='aaa'
<iframe name='aaa' width='700' height='500'></iframe>
그런데 이 방법이 더 복잡해질 것입니다
라이트 박스를 이용해서 제가 해결했습니다..