PhotoSwipe 애드온에 본문 리사이즈 기능도 넣기

본문 리사이즈 애드온은 본문에 넣은 사진 크기가 본문을 넘어가면 리사이즈 해주는 기능이 있다.

그래서 포토 스와이프와 리사이즈 애드온을 같이쓰면 클릭했을 경우 이미지가 두개나 나와버려서 하나만 써야하는데..

 

그래서 그 두개를 합쳤다, 어차피 본문 리사이즈 기능만 필요하니까 리사이즈 기능만 때오면 된다.

 

포토 스와이프 애드온 폴더안에 있는 rx_photoswipe.js

파일을 열어 하단 부분

// execute above function
initPhotoSwipeFromDOM('.xe_content');

바로 위에 이걸 집어 넣어주자

 

/* Window Load */
$(window).load(function(){
	var regx_skip = /(?:(modules|addons|classes|common|layouts|libs|widgets|widgetstyles)\/)/i;
	var regx_allow_i6pngfix = /(?:common\/tpl\/images\/blank\.gif$)/i;
	/**
	 * 본문 폭 구하기 위한 개체
	 * IE6에서 본문폭을 넘는 이미지가 있으면 그 크기로 구해지는 문제 우회용
	 **/
	var dummy = $('<div style="height:1px;overflow:hidden;opacity:0;display:block;clear:both"></div>');

	/**
	 * 리사이즈 실행 함수
	 **/
	function doResize(contentWidth, count) {
		// 재시도 회수 제한
		if(!count) count = 0;
		if(count >= 10) return;

		var $img = this;
		var beforSize = {'width':$img.width(), 'height':$img.height()};

		// 이미지 사이즈를 구하지 못했을 때 재시도
		if(!beforSize.width || !beforSize.height) {
			setTimeout(function() {
				doResize.call($img, contentWidth, ++count)
			}, 200);
			return;
		}

		// 리사이즈 필요 없으면 리턴
		if(beforSize.width <= contentWidth) return;

		var resize_ratio = contentWidth / beforSize.width;

		$img
			.removeAttr('width').removeAttr('height')
			.css({
				'width':contentWidth,
				'height':parseInt(beforSize.height * resize_ratio, 10)
			});
	}

	$('.xe_content').each(function() {
		var contentWidth = dummy.appendTo(this).width();
		dummy.remove();
		if(!contentWidth) return;

		$('img', this).each(function() {
			var $img = $(this);
			var imgSrc = $img.attr('src');
			if(regx_skip.test(imgSrc) && !regx_allow_i6pngfix.test(imgSrc)) return;
			$img.attr('rel', 'xe_gallery');
			doResize.call($img, contentWidth);
		});

		/* live 이벤트로 적용 (image_gallery 컴포넌트와의 호환 위함) */
		$(this).on('mouseover', 'img[rel=xe_gallery]', function() {
			var $img = $(this);
			if(!$img.parent('a').length && !$img.attr('onclick')) {
				$img.css('cursor', 'pointer').click(slideshow);
			}
		});
	});
});

 

그리고 캐시파일 재생성후 사용하면 본문을 넘어가는 이미지는 자동으로 사이즈가 조절되며 클릭 시에도 정상적으로 작동한다.