FancyBox를 사용하여 인라인 콘텐츠로드
글쎄, 나는 단순히이 게시물을 작성하여 동일한 문제를 겪을 수있는 다른 사람들을 돕기를 바랍니다.
공급 업체 웹 사이트의 예는 약간 모호하며 다음 시나리오를 가정했습니다.
href일부 콘텐츠에 대한 n 링크가 #id있습니다.
<a href="#content-div" class="fancybox">Open Example</a>
그리고 해당 콘텐츠를 보관할 div가 있습니다.
<div id="content-div" style="display: none">Some content here</div>
그런 다음 1 라이너를 통해 Fancybox를 실행하면됩니다.
$(".fancybox").fancybox();
당연히 Fancybox가 내용을 복사하고 변경 display: none하면 display: block모든 것이 정상이라고 생각할 것입니다 .
그러나 이것은 일어나지 않습니다.
여전히 콘텐츠를로드하지만 콘텐츠는 숨겨져 있으며 빈 Fancybox가 있습니다.*cry*
해결책은 매우 간단하지만 그것을 찾기 위해 머리에 머리카락을 약 2 시간 반 정도 걸렸습니다.
간단하게 포장 A를 콘텐츠 (중복) div 이 display: none와 밥이 삼촌이다.
<div style="display: none">
<div id="content-div">Some content here</div>
</div>
짜잔
내가 이것을 알아 낸 방법은 Fancybox 설치와 함께 제공되는 index.html / style.css 예제를 통해 진행되었습니다.
데모 웹 사이트에 사용되는 코드를보고 기본적으로 복사 / 붙여 넣기하면 괜찮습니다.
인라인 Fancybox가 작동하려면 index.html 파일에 다음 코드가 있어야합니다.
<head>
<link href="./fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />
<script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<a id="various1" href="#inline1" title="Put a title here">Name of Link Here</a>
<div style="display: none;">
<div id="inline1" style="width:400px;height:100px;overflow:auto;">
Write whatever text you want right here!!
</div>
</div>
</body>
스크립트 파일이 배치 된 폴더와 Head 태그에서 가리키는 위치를 정확하게 지정해야합니다. 일치해야합니다.
Wordpress 사용자를 위해 찾은 것입니다.
As obvious as it sounds, If your div is returning some AJAX content based on say a header that would commonly link out to a new post page, some tutorials will say to return false since you're returning the post data on the same page and the return would prevent the page from moving. However if you return false, you also prevent Fancybox2 from doing it's thing as well. I spent hours trying to figure that stupid simple thing out.
So for these kind of links, just make sure that the href property is the hashed (#) div you wish to select, and in your javascript, make sure that you do not return false since you no longer will need to.
Simple I know ^_^
참고URL : https://stackoverflow.com/questions/3963338/loading-inline-content-using-fancybox
'UFO ET IT' 카테고리의 다른 글
| Log4j에 현재 날짜를 포함하도록 로그 파일 이름 설정 (0) | 2020.11.07 |
|---|---|
| 컴파일러 최적화로 버그가 발생할 수 있습니까? (0) | 2020.11.07 |
| 번들 식별자 및 푸시 인증서… aps-environment 자격 오류 (0) | 2020.11.07 |
| Qt : 종횡비를 유지하면서 QPixmap을 포함하는 QLabel 크기 조정 (0) | 2020.11.07 |
| 중첩 된 파이썬 사전 및 목록에서 모든 키 발생 찾기 (0) | 2020.11.07 |