CKeditor + lightbox + 이미지 사이즈 제한

이것 저것 찾고 찾고 ㅠㅠ 이틀의 성과는 달랑 요거;

asp.net에서 작업

내용 보여줄 Label 클래스 viewContent로 정하고 jQuery로 클래스 찾아내고 그 안에서 img태그 찾아내고 rel속성 추가해주기

이미지 사이즈도 600넘으면 줄여주기... label이 깨지니까;;;

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" src="/lib/lightbox/js/prototype.js"></script>

<div id="wrap"style="display:inline; overflow:hidden;">

<asp:Label class="viewContent" ID="lblContent" runat="server"></asp:Label>

</div>

<script type="text/javascript">

/*<![CDATA[ */

jQuery.noConflict();

//이미지 사이즈 조절

var yourdiv = jQuery("span.viewContent"); //span에 viewContent 클래서 찾기

var image = yourdiv.find("img"); //img태그 찾아서 image에 저장. 배열형태

image.each(function i() {

var imgObj = new Image(); //이미지 객체 생성

imgObj.src = jQuery(this).attr("src"); //위에서 찾은 img 태그 이미지 할당

if (imgObj.width > 600) { //가로사이즈 600으로 제한 600보다 크면 사이즈 줄이기

var ratio = 600 / imgObj.width;

imgObj.width = 600;

imgObj.height = Math.round(imgObj.height * ratio);

//this.removeAttribute('width');

//this.removeAttribute('height');

this.style.width = imgObj.width + "px"; //스타일속성으로 사이즈 조정

this.style.height = imgObj.height + "px";

//this.setStyle("width:" + imgObj.width + "px");

//this.setStyle("height:" + imgObj.height + "px");

}

});

var images = yourdiv.find("img:not(a > img)"); //링크 걸린게 아닌경우 imges에 저장

images.each(function i() {

var jQuerythis = jQuery(this);

jQuerythis.wrap('<a rel="lightbox" href="' + jQuerythis.attr("src") + '"/>'); //lightbox에서 사용할 rel추가

});

/*<![CDATA[ */

</script>

단점은 이게 이미지 사이즈 조절 적용이 잘 안되기도 한다;; 스크립트를 읽는 시점이 문제인건지 100%완벽하게 작동하지 않는다.

원본 사이즈는 유지하고 보여주는 것만 사이즈 조절해서 뿌려주고 싶은데 ckeditor에서 조절하는 법을 찾던지 서버스크립트단에서 수정하던지;; 어째 ㅠㅠ