first commit
chicpro
95
cheditor5/lightbox/css/imageUtil.css
Normal file
@ -0,0 +1,95 @@
|
||||
/************************************************
|
||||
|
||||
CHEditor Image Caption Util
|
||||
|
||||
************************************************/
|
||||
img.chimg_photo
|
||||
{
|
||||
border: 1px darkgray solid;
|
||||
padding:10px;
|
||||
}
|
||||
div.imgblock
|
||||
{
|
||||
}
|
||||
div.leftjust
|
||||
{
|
||||
}
|
||||
div.rightjust
|
||||
{
|
||||
}
|
||||
div.caption
|
||||
{
|
||||
margin-top: 5px;
|
||||
margin-left: 0.2em;
|
||||
color: darkgray;
|
||||
font-size: 9pt;
|
||||
}
|
||||
div.caption-marker
|
||||
{
|
||||
float: left;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
div.caption-text
|
||||
{
|
||||
float: left;
|
||||
clear: right;
|
||||
text-align: left;
|
||||
}
|
||||
.imageUtil {
|
||||
cursor: url(icons/imageutil/zoomin.cur), pointer;
|
||||
outline: none;
|
||||
}
|
||||
.imageUtil img {
|
||||
border: 2px solid gray;
|
||||
}
|
||||
.imageUtil:hover img {
|
||||
border: 2px solid silver;
|
||||
}
|
||||
|
||||
.imageUtil-image {
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
.imageUtil-image-blur {
|
||||
}
|
||||
.imageUtil-caption {
|
||||
display: none;
|
||||
border-bottom: 1px solid white;
|
||||
font-family: gulim, Verdana, Helvetica;
|
||||
font-size: 9pt;
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.imageUtil-loading {
|
||||
display: block;
|
||||
color: white;
|
||||
font-size: 9px;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
padding: 3px;
|
||||
border-top: 1px solid white;
|
||||
border-bottom: 1px solid white;
|
||||
background-color: black;
|
||||
padding-left: 22px;
|
||||
background-image: url(icons/imageutil/loader.gif);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 3px 1px;
|
||||
}
|
||||
|
||||
a.imageUtil-credits,
|
||||
a.imageUtil-credits i {
|
||||
padding: 2px;
|
||||
color: silver;
|
||||
text-decoration: none;
|
||||
font-size: 10px;
|
||||
}
|
||||
a.imageUtil-credits:hover,
|
||||
a.imageUtil-credits:hover i {
|
||||
color: white;
|
||||
background-color: gray;
|
||||
}
|
||||
.imageUtil-display-block {
|
||||
display: block;
|
||||
}
|
||||
.imageUtil-display-none {
|
||||
display: none;
|
||||
}
|
||||
23
cheditor5/lightbox/demo.html
Normal file
@ -0,0 +1,23 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>CHEditor Lightbox 데모</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
|
||||
|
||||
<!-- imageUtil.js 파일의 위치를 지정합니다. -->
|
||||
<script type="text/javascript" src="imageUtil.js"></script>
|
||||
|
||||
<!-- lightbox.js 파일의 위치를 지정합니다. -->
|
||||
<!-- lightbox.js 파일에 설정되어 있는 cheditorPath 경로를 수정해 주십시오. -->
|
||||
<script type="text/javascript" src="lightbox.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h4>이미지를 클릭하면 확대하실 수 있습니다.</h4>
|
||||
<h4>확대한 후 이미지를 원하는 위치로 잡아 끌 수 있습니다.</h4>
|
||||
<!-- lightbox 컨테이너 개체: 화면에 출력되지 않습니다. -->
|
||||
<div id="lightbox-container"></div>
|
||||
|
||||
<p>
|
||||
<img class="chimg_photo" src="sample.jpg" alt="라이트박스 데모입니다." height="200" width="300">
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
1224
cheditor5/lightbox/imageUtil.js
Normal file
BIN
cheditor5/lightbox/images/1.png
Normal file
|
After Width: | Height: | Size: 156 B |
BIN
cheditor5/lightbox/images/2.png
Normal file
|
After Width: | Height: | Size: 344 B |
BIN
cheditor5/lightbox/images/3.png
Normal file
|
After Width: | Height: | Size: 150 B |
BIN
cheditor5/lightbox/images/4.png
Normal file
|
After Width: | Height: | Size: 358 B |
BIN
cheditor5/lightbox/images/5.png
Normal file
|
After Width: | Height: | Size: 155 B |
BIN
cheditor5/lightbox/images/6.png
Normal file
|
After Width: | Height: | Size: 334 B |
BIN
cheditor5/lightbox/images/7.png
Normal file
|
After Width: | Height: | Size: 146 B |
BIN
cheditor5/lightbox/images/8.png
Normal file
|
After Width: | Height: | Size: 297 B |
BIN
cheditor5/lightbox/images/fullexpand.gif
Normal file
|
After Width: | Height: | Size: 209 B |
BIN
cheditor5/lightbox/images/loader.gif
Normal file
|
After Width: | Height: | Size: 673 B |
BIN
cheditor5/lightbox/images/zoomin.cur
Normal file
|
After Width: | Height: | Size: 326 B |
BIN
cheditor5/lightbox/images/zoomout.cur
Normal file
|
After Width: | Height: | Size: 326 B |
58
cheditor5/lightbox/lightbox.js
Normal file
@ -0,0 +1,58 @@
|
||||
// ================================================================
|
||||
// CHEditor lightbox
|
||||
// ----------------------------------------------------------------
|
||||
// Author: Na Chang-Ho (chna@chcode.com)
|
||||
// Homepage: http://www.chcode.com
|
||||
// Copyright (c) 1997-2009 CHSOFT
|
||||
// ================================================================
|
||||
|
||||
// lightbox 디렉토리 경로 설정
|
||||
var lightBoxPath = "./";
|
||||
|
||||
var lightBoxCssPath = lightBoxPath + "css/imageUtil.css";
|
||||
var lightBoxIconPath = lightBoxPath + "images/";
|
||||
|
||||
function runLightbox() {
|
||||
var head = document.getElementsByTagName('head');
|
||||
var css = head[0].appendChild(document.createElement('link'));
|
||||
css.setAttribute('type', 'text/css');
|
||||
css.setAttribute('rel', 'stylesheet');
|
||||
css.setAttribute('media', 'all');
|
||||
css.setAttribute('href', lightBoxCssPath);
|
||||
|
||||
hs.iconsPath = lightBoxIconPath;
|
||||
|
||||
var img = document.images;
|
||||
var container = document.getElementById('lightbox-container');
|
||||
if (typeof container == 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
for (var i=0; i<img.length; i++) {
|
||||
if (img[i].className != 'chimg_photo') continue;
|
||||
if (typeof img[i].parentNode != 'undefined' && img[i].parentNode.tagName != 'A') {
|
||||
var a = document.createElement('A');
|
||||
a.id = "lightbox_" + i;
|
||||
a.href = img[i].src;
|
||||
a.className = "imageUtil";
|
||||
|
||||
var alt = img[i].getAttribute("alt");
|
||||
|
||||
a.onclick = function() {
|
||||
this.parentNode.insertBefore(container, this);
|
||||
return hs.run(this, alt);
|
||||
};
|
||||
img[i].parentNode.insertBefore(a, img[i]);
|
||||
a.appendChild(img[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (window.addEventListener) {
|
||||
window.addEventListener('DOMContentLoaded', runLightbox, false);
|
||||
window.addEventListener('load', runLightbox, false);
|
||||
}
|
||||
else if (window.attachEvent)
|
||||
window.attachEvent('onload', runLightbox);
|
||||
else
|
||||
window.onload = runLightbox;
|
||||
BIN
cheditor5/lightbox/sample.jpg
Normal file
|
After Width: | Height: | Size: 378 KiB |