반응형
[Tip] 세팅된 magnific popup에 추가 작업하기
반응형 페이지에서 쓰기 편한 팝업 플러그인으로
magific popup(https://dimsemenov.com/plugins/magnific-popup/)을 자주 쓰는 편인데,
근래에 해당 팝업이 세팅되어있는 페이지의 추가 작업이 있었습니다.
2/ 팝업에 내부링크(a태그 id속성, 책갈피 anchor 기능) 클릭 시, 이동 후 팝업을 닫을 것
1번의 경우에는 페이지가 열릴 때, 팝업이 오픈되어 있어야 하므로,
기존 magnific popup 소스에 내용을 추가하여 가볍게 완료.
이제 남은 건 2번의 경우였는데요.
내부링크를 클릭 시, 이동 후 닫혀야하기 때문에 onClick에 함수를 넣어주시고,
이렇게 소스를 넣어주면 완성입니다.
소스가 다소 복잡해지기는 했지만 위 방법으로 추가 작업까지 완료하였습니다.
(function($) {
$(window).load(function () {
$.magnificPopup.open({
items: {
src: 'img/이미지명.jpg'
},
type: 'image'
}, 0);
});
})(jQuery);
클릭 시, 해당 내부 링크로 이동 후 닫혀야 했기 때문에 소스 자체를 다시 수정해야 했습니다.
아래가 수정된 소스 내용입니다.
(function($) {
$(window).load(function () {
$.magnificPopup.open({
items: {
src: $('<a href="#내부링크" class="mfp-img" onClick="closePopup();"><img src="img/이미지명.jpg"></a>'),
type: 'inline'
}
}, 0);
});
})(jQuery);
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);
반응형
'[공부]하는 몽씨 > tip' 카테고리의 다른 글
| [Tip] 워드프레스 관련 메모2 (0) | 2020.03.18 |
|---|---|
| [Tip] 워드프레스 관련 메모 (0) | 2020.03.17 |
| [Tip] Esc로 팝업창 닫기 (0) | 2017.10.18 |
| [Tip] background로 이미지를 넣을 경우 익스플로러에서 흐릿하게 뭉개지는 현상 (0) | 2017.10.10 |
| [Tip] modal popup 띄울 때 slick slider가 움직이게 만들기 (0) | 2017.08.29 |
