리스트에서 아이프레임으로 본문 보여주기
아래 소스와 같이 리스트에서 제목이나 이미지 클릭시 아이프레임으로 페이지 이동하지않고 본문 내용을 띄우려고 합니다.
리스트에서 어떻게 하면 좋을지 궁금합니다.
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>
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 4개
"목록에서 내용 사용" 이 기능을 사용하시는 방법이 있습니다.
방법 2 :
그누는 list.skin.php 에서도 본문의 내용을 가지고 있습니다.
print_r2($list)를 찍어보시면
$list['wr_content'] 변수가 본문의 내용을 가지고 있는걸 확인할 수 있습니다.
각 리스트 하단에 해당 $list['wr_content']를 코딩으로 잡으시고 display:none;을 하셔서 내용을 가립니다.
각 제목을 클릭했을대 a링크를 제거 하시고 반응 이벤트를 js로 만드시는 방법이 있습니다.
어떻게 적용을 해야 할지 막막합니다.
리스트에서 제목이나 이미지 클릭시 모달창과 같이 본문내용을 출력하고자 합니다.
target='aaa'
<iframe name='aaa' width='700' height='500'></iframe>
그런데 이 방법이 더 복잡해질 것입니다