[jquery] 페이지로드시 jQuery Fancybox를 시작하는 방법은 무엇입니까?

Program / 글쓴이

페이지로드시 Fancybox (예 : Fancybox의 모달 또는 라이트 박스 버전) 를 시작하고 싶습니다 . 숨겨진 앵커 태그에 바인딩하고 JavaScript를 통해 해당 앵커 태그의 클릭 이벤트를 실행할 수 있지만 Fancybox를 직접 시작하고 추가 앵커 태그를 피하는 것이 좋습니다.

답변

Fancybox는 현재 자동 실행 방법을 직접 지원하지 않습니다. 작업 할 수 있었던 해결 방법은 숨겨진 앵커 태그를 만들고 클릭 이벤트를 트리거하는 것입니다. jQuery 및 Fancybox JS 파일이 포함 된 후 클릭 이벤트를 트리거하는 호출이 포함되어 있는지 확인하십시오. 내가 사용한 코드는 다음과 같습니다.

이 샘플 스크립트는 HTML에 직접 포함되지만 JS 파일에도 포함될 수 있습니다.

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>

답변

문서 준비에서이 함수를 호출하여이 작업을 수행했습니다.

$(document).ready(function () {
        $.fancybox({
            'width': '40%',
            'height': '40%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});

답변

간단 해:

다음과 같이 먼저 요소를 숨기십시오. 

<div id="hidden" style="display:none;">
    Hi this is hidden
</div>

그런 다음 자바 스크립트를 호출합니다.

<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox("#hidden");
    });
</script>

아래 이미지를 확인하십시오.

여기에 이미지 설명 입력

다른 예시: 

<div id="example2" style="display:none;">
        <img src="http://theinstitute.ieee.org/img/07tiProductsandServicesiStockphoto-1311258460873.jpg" />
    </div>

 <script type="text/javascript">
        $(document).ready(function() {
            $.fancybox("#example2");
        });
    </script>

여기에 이미지 설명 입력

답변

Window.load (document.ready ()와 반대) 는 Fancybox 2.0 의 JSFiddler onload 데모 에서 사용되는 트릭 으로 보입니다 .

$(window).load(function()
{
    $.fancybox("test");
});

다른 곳에서 document.ready ()를 사용하고있을 수 있으며 IE9는 둘의로드 순서에 화가 나 있습니다. 이렇게하면 두 가지 옵션이 남습니다. 모든 것을 window.load로 변경하거나 setTimer ()를 사용합니다.

답변

또는 fancybox가 설정된 후 JS 파일에서 이것을 사용하십시오.

$('#link_id').trigger('click');

필자는 Fancybox 1.2.1이이 작업을 수행해야 할 때 내 테스트와 달리 기본 옵션을 사용할 것이라고 믿습니다.

답변

왜 아직 답이 아닌가? :

$("#manual2").click(function() {
    $.fancybox([
        'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
        'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
        {
            'href'  : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
            'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
        }
    ], {
        'padding'           : 0,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'image',
        'changeFade'        : 0
    });
});

이제 링크를 트리거하십시오 !!

Fancybox 홈페이지 에서 가져 왔습니다.

답변

내가 찾은 가장 좋은 방법은 다음과 같습니다.

<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox(
             $("#WRAPPER_FOR_hidden_div_with_content_to_show").html(), //fancybox works perfect with hidden divs
             {
                  //fancybox options
             }
        );
    });
</script>