나는 laravel 환경에서 멋진 팝업으로 작업하고 있으며 둘 다 함께 작업하기를 원하므로 다음과 같이 썼습니다.
$(document).ready(function() {
$('.image-popup-vertical-fit').on('click',function(){
var image = $(this).attr('src');
popnow(image);
});
function popnow(a) {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
},
items: {
src: a
}
});
}
});
HTML :
<div class="col-lg-6 col-sm-6 margin-top-60">
{{HTML::image('images/recentprojects1.png','recent',array('class' => 'img-responsive img-center image-popup-vertical-fit')) }}
</div>
<div class="col-lg-6 col-sm-6 margin-top-60" id="test">
{{ HTML::image('images/pricing1.png','recent',array('class' => 'img-responsive img-center image-popup-vertical-fit')) }}
</div>
페이지를 새로 고침 한 후 처음으로 팝업 열기 이미지를 클릭하면 아무 일도 일어나지 않고 두 번째로 클릭하면 열립니다.
그러나 페이지를 새로 고침 한 후 처음으로 첫 번째 div를 클릭하고 그 후 두 번째를 클릭하면 첫 번째 클릭 한 div의 내용이 여전히 표시됩니다 (두 번째 div를 처음 클릭 할 때-잘못된 이미지).
따라서 var image모든 클릭 이 발생하지 않는 것 같습니다 . 내 기능에 문제가 있습니까?
console.log(a)상단에 추가 function popnow(a)하면 올바른 이미지 src가 기록됩니다.
각 이미지를 반복하고 각 이미지에 마법을 추가하면됩니다. 그런 다음 각 이미지를 클릭하기 만하면 팝업이 열립니다.
function popnow(){
$('.image-popup-vertical-fit').each(function(){
var image = $(this).attr('src');
$(this).magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
},
items: {
src: image
}
});
});
}
// Init function
popnow();
추신 : 저는 CDN의 플러그인을 사용했습니다. jsfiddle을 사용할 때 작업 공간이 아닌 CDN에서 플러그인 또는 라이브러리를로드하십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다