[magnificPopup] LayerPopup Library

• target:  간단한 이미지 LayerPopup Library

---

• method: 

  - html

<div id="image-preview" class="white-popup mfp-hide>
	<img id="imagePreview" alt="미리보기" src=""/>
</div>

  - javascript

/* 기본형 */
$.magnificPopup.open({
		items: {src: 'img/이미지명.jpg'}
	,	type: 'image'
	,	closeBtnInside: true
}, 0);


/* 직접 LayerPopup 요소에 설정 */
$.magnificPopup.open({
		items: {src: '#image-preview'}
	,	type: 'inline'
	,	closeBtnInside: true
    ,	callbacks: {
			open: function() {$('#image-preview').find('#imagePrivew').attr('src', 'imageURL');}
		,	close: function() {$('#image-preview').find('#imagePrivew').attr('src', '');}
  	}
}, 0);

 

---

• desc: 기본형의 경우, 별도로 요소를 생성해주지 않아도 자체적으로 src을 통해 가져온 image를 LayerPopup형태로 보여줌

  * 별도의 퍼블을 적용하고자 하는 경우, 해당 퍼블 html에 이미지 미리보기할 <img/>를 선언한 후, 해당 요소의 id를 items의 src로 작성해주면 적용

 

  * 추가 자세한 사항은 https://dimsemenov.com/plugins/magnific-popup/ 에서 확인

---