공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

썸네일 미리보기 - 모니터 사사분면 처리하기

serpiko 2020. 10. 11. 22:08

썸네일 프리뷰 jquery 코드를 가져왔는데 브라우저 오른쪽, 브라우저 하단에 잘리는 현상때문에

 

가져온 라이브러리의 이미지 처리 방식을 전부 수정하였다.

 

제이쿼리는 그냥 셀렉터 내용만 있으니 중요한게 아니라서 패스하고, 아래의 속성들로 구현할 수 있다.

 

window.innerWidth,

window.innerHeight

nautralWidth

nautalHeight 

 

참고로 가로는 510px 로 고정이고, 세로 사이즈는 비례식을 적용하여 동적으로 적용해야

 

정확하게 높이까지 적용 될 것이다.

 

HTML

<html>
  <body>
    ...
    <img src="이미지URL" data-preview-image="이미지URL">
    ...
    <script src="jquery-3.4.1.min.js"></script>
    <script src="serpiko-imagepreview.js"></script>
  </body>
</html>

 

serpiko-imagepreview.js

/**
 * serpiko 허정진
 * 
 * 2020.10.11
 * 
 */
(function($) {
	$.previewImage = function(options) {
	  var element = $(document);
	  var namespace = '.previewImage';
	    	
		var opts = $.extend({
			// 옵션
			'xOffset': 20,
			'yOffset': -20,
			'fadeIn': 'fast',

			// 기본 css
			'css': {         
				'padding': '8px',
				'border': '1px solid gray',
				'background-color': '#fff',
				'z-index': 9999,
			},

			// 고정값
			'eventSelector': '[data-preview-image]',
			'dataKey': 'previewImage',
			'overlayId': 'preview-image-plugin-overlay',
		}, options);

		var _calcWidth, _calcHeight;
		
		element.off(namespace);
			
		element.on('mouseover' + namespace, opts.eventSelector, function(e) {
			
			// 현재 마우스 커서
			const pageX = e.pageX;
			const pageY = e.pageY;

			// 이미지 원본 사이즈
			const naturalWidth = e.currentTarget.naturalWidth;
			const naturalHeight = e.currentTarget.naturalHeight;
			console.log("원래좌표", pageX, pageY);
			const src = $(this).data(opts.dataKey);

			var $element = $('<p>')
					.attr('id', opts.overlayId)
					.css('position', 'absolute')
					.css('display', 'none');

			if (opts.css) $element.css(opts.css);

			if( !src ) {
				_calcWidth = 160; // fixed
				_calcHeight = 30;
				$element.text(`썸네일 경로가 없습니다`).css("width", _calcWidth+"px");
			}else {
				_calcWidth = 510; // fixed
				// 비례식 naturalWidth : naturalHeight = _calcWidth : (h)
				_calcHeight = Math.floor( ( naturalHeight * _calcWidth ) / naturalWidth );
				$element.append($('<img>').attr('src', src));
			}

			// 사사분면
			const {quadrant,x,y} = getQuadrant(pageX,pageY);
			console.log("mouseover", quadrant, x, y);

			// 렌더
			render("append", $element,x,y);
		});
		
		//
		function getQuadrant(x, y){

			const windowWidth = window.innerWidth;
			const windowHeight = window.innerHeight;
			let quadrant = "";

			if( windowHeight/2 > y) quadrant += "Top";
			else quadrant += "Bottom";

			if( windowWidth/2 < x) quadrant += "Right";
			else quadrant += "Left";

			// console.log(quadrant);

			if( "TopLeft" === quadrant ){
				x = x + opts.xOffset;
				y = y + opts.yOffset;
			}else if( "TopRight" === quadrant ){
				x = x - _calcWidth - opts.xOffset;
				y = y + opts.yOffset;
			}else if( "BottomLeft" === quadrant ){
				x = x + opts.xOffset;
				y = y - _calcHeight - opts.yOffset;
			}else if( "BottomRight" === quadrant ){
				x = x - _calcWidth - opts.xOffset;
				y = y - _calcHeight - opts.yOffset;
			}

			return {quadrant, x, y};
		}

		//
		function render(mode="append",$element,x,y){

			if( "append" === mode ){
				$('body').append($element);
			}
			
			$element
				.css("top", y + "px")
				.css("left", x + "px")
				.fadeIn(opts.fadeIn);
		}
		

		element.on('mouseout' + namespace, opts.eventSelector, function() {
			$('#' + opts.overlayId).remove();
		});
		
		element.on('mousemove' + namespace, opts.eventSelector, function(e) {
			const pageX = e.pageX;
			const pageY = e.pageY;

			const {quadrant,x,y} = getQuadrant(pageX,pageY);
			console.log("mousemove", quadrant, x, y);
			render("move", $('#' + opts.overlayId) ,x,y);
		});
		
		return this;
	};
	
	$.previewImage();
})(jQuery);

 

 

스크립트 복사하기

더보기

/**

 * serpiko 허정진

 * 

 * 2020.10.11

 * 

 */

(function($) {

  $.previewImage = function(options) {

    var element = $(document);

    var namespace = '.previewImage';

        

    var opts = $.extend({

      // 옵션

      'xOffset': 20,

      'yOffset': -20,

      'fadeIn': 'fast',

 

      // 기본 css

      'css': {         

        'padding': '8px',

        'border': '1px solid gray',

        'background-color': '#fff',

        'z-index': 9999,

      },

 

      // 고정값

      'eventSelector': '[data-preview-image]',

      'dataKey': 'previewImage',

      'overlayId': 'preview-image-plugin-overlay',

    }, options);

 

    var _calcWidth, _calcHeight;

    

    element.off(namespace);

      

    element.on('mouseover' + namespace, opts.eventSelector, function(e) {

      

      // 현재 마우스 커서

      const pageX = e.pageX;

      const pageY = e.pageY;

 

      // 이미지 원본 사이즈

      const naturalWidth = e.currentTarget.naturalWidth;

      const naturalHeight = e.currentTarget.naturalHeight;

      console.log("원래좌표", pageX, pageY);

      const src = $(this).data(opts.dataKey);

 

      var $element = $('<p>')

          .attr('id', opts.overlayId)

          .css('position', 'absolute')

          .css('display', 'none');

 

      if (opts.css) $element.css(opts.css);

 

      if( !src ) {

        _calcWidth = 160; // fixed

        _calcHeight = 30;

        $element.text(`썸네일 경로가 없습니다`).css("width", _calcWidth+"px");

      }else {

        _calcWidth = 510; // fixed

        // 비례식 naturalWidth : naturalHeight = _calcWidth : (h)

        _calcHeight = Math.floor( ( naturalHeight * _calcWidth ) / naturalWidth );

        $element.append($('<img>').attr('src', src));

      }

 

      // 사사분면

      const {quadrant,x,y} = getQuadrant(pageX,pageY);

      console.log("mouseover", quadrant, x, y);

 

      // 렌더

      render("append", $element,x,y);

    });

    

    //

    function getQuadrant(x, y){

 

      const windowWidth = window.innerWidth;

      const windowHeight = window.innerHeight;

      let quadrant = "";

 

      if( windowHeight/2 > y) quadrant += "Top";

      else quadrant += "Bottom";

 

      if( windowWidth/2 < x) quadrant += "Right";

      else quadrant += "Left";

 

      // console.log(quadrant);

 

      if( "TopLeft" === quadrant ){

        x = x + opts.xOffset;

        y = y + opts.yOffset;

      }else if( "TopRight" === quadrant ){

        x = x - _calcWidth - opts.xOffset;

        y = y + opts.yOffset;

      }else if( "BottomLeft" === quadrant ){

        x = x + opts.xOffset;

        y = y - _calcHeight - opts.yOffset;

      }else if( "BottomRight" === quadrant ){

        x = x - _calcWidth - opts.xOffset;

        y = y - _calcHeight - opts.yOffset;

      }

 

      return {quadrant, x, y};

    }

 

    //

    function render(mode="append",$element,x,y){

 

      if( "append" === mode ){

        $('body').append($element);

      }

      

      $element

        .css("top", y + "px")

        .css("left", x + "px")

        .fadeIn(opts.fadeIn);

    }

    

 

    element.on('mouseout' + namespace, opts.eventSelector, function() {

      $('#' + opts.overlayId).remove();

    });

    

    element.on('mousemove' + namespace, opts.eventSelector, function(e) {

      const pageX = e.pageX;

      const pageY = e.pageY;

 

      const {quadrant,x,y} = getQuadrant(pageX,pageY);

      console.log("mousemove", quadrant, x, y);

      render("move", $('#' + opts.overlayId) ,x,y);

    });

    

    return this;

  };

  

  $.previewImage();

})(jQuery);

 

원본 :https://github.com/zpalffy/preview-image-jquery

 

 

zpalffy/preview-image-jquery

jQuery plugin that adds an image preview mouseover to any element on the page with a data-preview-image attribute. - zpalffy/preview-image-jquery

github.com

결과

만약 썸네일 src가 유효하지 않다면... 아래와 같이 표시되도록 하였다.

저작자표시 비영리 동일조건

'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

ajaxSetup  (0) 2019.01.16
tabulator 자주쓰는 고급옵션  (0) 2018.12.18
tabulator 를 이용한 테이블안에 테이블 띄우기 by ajax  (0) 2018.07.09
img가 로드되고 난 이후에 w,h 반환받고 이미지 비율에 따른 계산하기  (0) 2016.08.30
jquery context 라이브러리에서 메뉴 분기처리하여 보이고 추가하고 삭제하기..  (0) 2016.08.25
댓글