[Tip] 세팅된 magnific popup에 추가 작업하기

[Tip] 세팅된 magnific popup에 추가 작업하기

반응형 페이지에서 쓰기 편한 팝업 플러그인으로

magific popup(https://dimsemenov.com/plugins/magnific-popup/)을 자주 쓰는 편인데,

근래에 해당 팝업이 세팅되어있는 페이지의 추가 작업이 있었습니다.

1/ 페이지가 열릴 때, 팝업을 오픈 시킬 것 

2/ 팝업에 내부링크(a태그 id속성, 책갈피 anchor 기능) 클릭 시, 이동 후 팝업을 닫을 것

 1번의 경우에는 페이지가 열릴 때, 팝업이 오픈되어 있어야 하므로,

 

(function($) {
    $(window).load(function () {
        $.magnificPopup.open({
            items: {
                src: 'img/이미지명.jpg'
            },
            type: 'image'

        }, 0);
    });
})(jQuery);

기존 magnific popup 소스에 내용을 추가하여 가볍게 완료. 이제 남은 건 2번의 경우였는데요. 

클릭 시, 해당 내부 링크로 이동 후 닫혀야 했기 때문에 소스 자체를 다시 수정해야 했습니다. 

아래가 수정된 소스 내용입니다.

 

(function($) {
    $(window).load(function () {
        $.magnificPopup.open({
          items: {
                src: $('<a  href="#내부링크" class="mfp-img" onClick="closePopup();"><img src="img/이미지명.jpg"></a>'),
	type: 'inline'
			}
        }, 0);
    });
})(jQuery);

내부링크를 클릭 시, 이동 후 닫혀야하기 때문에 onClick에 함수를 넣어주시고,

 

function closePopup() {
  $.magnificPopup.close();
}

이렇게 소스를 넣어주면 완성입니다.

위 소스처럼 이미지 자체에 a링크를 걸어 내부적으로 이동하는 방법이 있는 반면, 

이미지 안에 버튼을 넣어 버튼을 클릭 시, 다른 페이지로 이동해야하는 때가 있는데 그럴 때는,

 

var data = [
  {
    userWebsite_href: '이동할 페이지.html', 
    userAvatarUrl_img: 'img/팝업 이미지명.png'
  }
];

(function($) {
    $(window).load(function () {
        $.magnificPopup.open({
 key: 'my-popup', 
  items: data,
  type: 'inline',
  inline: {
    markup: '<div class="white-popup"><div class="mfp-close"></div>'+
              '<a class="mfp-userWebsite">'+
                '<div class="mfp-userAvatarUrl"></div>'+
              '</a>'+'<a href="#">'+
                '<img src="img/버튼 이미지명.png" class="btn">'+
              '</a>'+
            '</div>'
  },
  gallery: {
    enabled: true 
  },
  callbacks: {
    markupParse: function(template, values, item) {
    }
  }
		
        }, 0);
    });
})(jQuery);

소스가 다소 복잡해지기는 했지만 위 방법으로 추가 작업까지 완료하였습니다.