어제 자게에 포스팅한 lightbox를 미니위니에디터의 "이미지 삽입 기능"에 추가하는 팁입니다.
에디터에 적용하는 걸 보시면 게시판(홈)등의 업로드한 이미지에도 적용하는 것도 금방 하실겁니다
테터는 잘 사용안해서 완전 모릅니다. ^^
참~ 원래 포스팅한건 lightbox인데 요건 lightbox_plus라고해서 확대기능이 추가된듯 합니다.
lightbox_plus 원본출처
업로드와 에디터를 이용해서 삽입한 미리보기 (제 홈,,)
 적용방법
1. 여기를 클릭하셔서 필요한 파일을 다운로드하시고
압축을 풀고 미니위니에디터가 설치된 폴더에 파일들 또는 폴더 통채로 업로드 합니다.
파일만,, 또는 폴더채로 업로드시에 따라서 아래 자스의 경로만 제대로 잡아주심 되겠죠 ^^
2. 아래의 코드를 홈페이지 파일이 상단(예 / 헤더파일)에 삽입합니다.
<script language="javascript" type="text/javascript" src="업로드한 lightbox_plus.js의 경로"></script>
3. 이미지 삽입기능인 miniwini.visualEditor.dialogInsertImage.php 파일을 오픈하고
아래와 같은 부분을 찾습니다.
function genHTML()
{
var nBorder = document.getElementById("nBorder").value;
if (g_sAlign=="newline")
var sHTML = "<img style=\"border:"+nBorder+"px solid "+g_sBorderColor+"\" src='"+g_sUrl+"'><br>";
else
var sHTML = "<img style=\"border:"+nBorder+"px solid "+g_sBorderColor+"\" border=0 src='"+g_sUrl+"' align="+g_sAlign+">";
oObject.innerHTML = oObject.innerHTML + sHTML;
self.close();
}
|
위와 같은 부분을 아래와 같이 만들어 줍니다.
function genHTML()
{
var nBorder = document.getElementById("nBorder").value;
if (g_sAlign=="newline")
var sHTML = "<a href='"+g_sUrl+"' rel='lightbox'><img style=\"border:"+nBorder+"px solid "+g_sBorderColor+"\" src='"+g_sUrl+"'></a><br>";
else
var sHTML = "<a href='"+g_sUrl+"' rel='lightbox'><img style=\"border:"+nBorder+"px solid "+g_sBorderColor+"\" border=0 src='"+g_sUrl+"' align="+g_sAlign+"></a>";
oObject.innerHTML = oObject.innerHTML + sHTML;
self.close();
} |
<a href='"+g_sUrl+"' rel='lightbox'>이미지</a>
단순하게 링크로 감싸준게 끝입니다. ^^
----------- 추가 부분 ------------------------------
이용해서 제로보드의 게시판에 업로드한 이미지에 lightbox_plus를 적용합니다.
적용하고자 하는 스킨의 view.php를 오픈하고 상단에 아래의 코드를 넣어줍니다.
<? // 업로드 이미지에 lightbox_plus 적용 20060124
$image_pixel = 400; // 기본적인 이미지의 가로사이즈는 여기서 수정
if(eregi("\.jpg",$file_name1)||eregi("\.gif",$file_name1)||eregi("\.png",$file_name1)) {
$image_size1 = getimageSize($data[file_name1]);
$image_width1 = " width=$image_pixel ";
if($image_size1[0]>$image_pixel){
if($image_size1[1] <= 600) {
$image_size1[0] = $image_size1[0];
$image_size1[1] = $image_size1[1];
$image_size = 'no';
}else{
$image_size1[0];
$image_size1[1];
$image_size = 'yes';
}
$up_image1 = "<table cellpadding='0' cellspacing='0' align=center><tr><td>
<table cellpadding='0' cellspacing='0' width='100%' bgcolor='white'><tr><td><a href='$data[file_name1]' rel='lightbox' title='$subject'>
<img src=./$data[file_name1] $image_width1 style='BORDER-RIGHT: #e4e4e4 3px dashed; BORDER-TOP: #e4e4e4 3px dashed; BORDER-LEFT: #e4e4e4 3px dashed; BORDER-BOTTOM: #e4e4e4 3px dashed'></a></td></tr></table>
</td></tr></table><br>";}
else{
$up_image1 = "<table cellpadding='0' cellspacing='0' align=center><tr><td>
<table cellpadding='0' cellspacing='0' width='100%'><tr><td>
<img src=./$data[file_name1] border=0>
</td></tr></table>
</td></tr></table><br>";}
}
if(eregi("\.jpg",$file_name2)||eregi("\.gif",$file_name2)||eregi("\.png",$file_name2)) {
$image_size2 = getimageSize($data[file_name2]);
$image_width2 = " width=$image_pixel ";
if($image_size2[0]>$image_pixel){
if($image_size2[1] <= 600) {
$image_size2[0] = $image_size2[0];
$image_size2[1] = $image_size2[1];
$image_size = 'no';
}else{
$image_size2[0];
$image_size2[1];
$image_size = 'yes';
}
$up_image2 = "<table cellpadding='0' cellspacing='0' align=center><tr><td>
<table cellpadding='0' cellspacing='0' width='100%' bgcolor='white'><tr><td><a href='$data[file_name2]' rel='lightbox' title='$subject'>
<img src=./$data[file_name2] $image_width1 style='BORDER-RIGHT: #e4e4e4 3px dashed; BORDER-TOP: #e4e4e4 3px dashed; BORDER-LEFT: #e4e4e4 3px dashed; BORDER-BOTTOM: #e4e4e4 3px dashed'></a></td></tr></table>
</td></tr></table><br>";}
else{
$up_image2 = "<table cellpadding='0' cellspacing='0' align=center><tr><td>
<table cellpadding='0' cellspacing='0' width='100%' bgcolor='white'><tr><td>
<img src=./$data[file_name2] border=0>
</td></tr></table>
</td></tr></table><br>";}
}
?> |
출력하고자 하는 부분에 <?=$up_image1;?><?=$up_image2;?> 넣어주시면 끝
오늘도 즐거운 하루되세요~~~~
|
(park122812)
(drman2k)
(ttotte)
(91ses)
(idp7472)
(newbboy)
(sssjw2)
(dunpeel)
