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

95

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

jquery  jquery-plugins  fancybox 
— Blegger
소스
공식 fancybox 웹 사이트 ( fancybox.net )에 가면 자동 팝업이 표시되므로 페이지 소스를 확인하여 어떻게했는지 확인할 수 있습니다 (힌트 : 수락 된 답변과 동일하지 않음)
— Nippysaurus
15
다른 사람들을 위해 시간을 절약하려면-$ (function () {$ .fancybox ( '<div> Change me </ div>', {padding : 20});});
— nikib3ro 2012 년

답변:

162

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

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

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>
— Blegger
소스
1
참고로 $ (document) .ready (function () {$ ( "# hidden_link"). fancybox (). trigger ( 'click');}); 다음과 같습니다. function LaunchFancyBox () {$ ( "# hidden_link"). fancybox (). trigger ( 'click'); } $ (문서) .ready (LaunchFancyBox ());
— Mark Schultheiss
4
$(document).ready(LaunchFancyBox());해야하는 것과 동일 합니다 $(document).ready(LaunchFancyBox);. (마지막에 함수 호출이 없다는 점에 유의하십시오).
— Adam Luter 2010
나는 이것을 시도했지만 성공하지 못했습니다. . 나는 내용을 전달 ... 그때는 {($ .fancybox를 호출 Ajax를 통해 내용을로드했다
— giubueno
@Blegger 솔루션 $ ( "# hidden_link"). fancybox (). trigger ( 'click'); 나를 위해 완벽하게 작동합니다.
— Mukesh
66

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

$(document).ready(function () {
        $.fancybox({
            'width': '40%',
            'height': '40%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});
— 조던 C
소스
href 매개 변수를 처리하는 데 문제가 발생했기 때문에 이것은 나를 위해 작동하지 않았습니다. "대기"애니메이션이 영원히 표시됩니다.
— Boris van Schooten 2011
3
이것은 fancybox 개발자가 스스로 개발하는 방법 인 것 같다는 점은 주목할 가치가 있습니다. fancybox 웹 사이트 ( fancybox.net )로 이동하면 "fancybox2가 출시되었습니다!"라는 모달 대화 상자가 표시됩니다. ... 해당 페이지의 소스를 보면이 답변에 설명 된 기술을 사용했음을 알 수 있습니다.
— Nippysaurus 2011
이것이 받아 들여진 대답이어야합니다! 허용되는 솔루션은 작동하지만 클릭 이벤트를 트리거하는 숨겨진 앵커를 추가하는 것이 실제로 가장 깨끗한 것은 아닙니다.
— luigi7up
동의합니다. 숨겨진 링크를 사용하는 것은 해킹입니다. 제대로하세요.
— Jamsi 2014 년
아주 간단합니다! 감사! 자동 재생 유튜브가 삽입되어 있습니다. 동영상이 끝나 자마자 라이트 박스를 닫을 수있는 방법이 있나요?
— Antonio Almeida
12

간단 해:

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

<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>

여기에 이미지 설명 입력

— 히샴 무니 어
소스
10

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

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

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

— 크리스 S
소스
이 답변은 페이지를 ios와 같은 경고 팝업으로 시작한 다음 닫을 수 있기를 원할 때 더 잘 작동합니다. 내가 그것을 구현하려고 할 때 가장 인기있는 대답은 내가 fancybox.close를 클릭 할 때마다 요소가 사라지는 대신 다시로드됩니다. 감사!
— Nathaniel Flick
귀하의 답변은 가장 관련성이 높고 100 % 정확합니다. 감사.
— Schalk Keun
8

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

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

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

— cynge13
소스
5

왜 아직 답이 아닌가? :

$("#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 홈페이지 에서 가져 왔습니다.

— 도마
소스
5

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

<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>
— 아레나 루
소스
옵션의 닫는 대괄호가 주석 처리 되었기 때문에 실패합니다.
— Teekin
¡ 깨끗하고 쉽습니다! 완벽하게 작동합니다. 감사!
— Carolina
4

제 경우에는 다음이 성공적으로 작동 할 수 있습니다. 페이지가로드되면 라이트 박스가 즉시 팝업됩니다.

JQuery : 1.4.2

팬시 박스 : 1.3.1

<body onload="$('#aLink').trigger('click');">
<a id="aLink" href="http://www.google.com" >Link</a></body>
<script type="text/javascript">
    $(document).ready(function() {

        $("#aLink").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>
— CMen
소스
3

Alex의 대답은 훌륭합니다. 그러나 이것이 기본 fancybox 스타일을 호출한다는 점에 유의하는 것이 중요합니다. 사용자 지정 규칙이있는 경우 .trigger를 호출하여 특정 앵커를 클릭해야합니다.

$(document).ready(function() {
$("#hidden_link").fancybox({ 
    'padding':          0,
    'cyclic':       true,
    'width':        625,
    'height':       350,
    'padding':      0, 
    'margin':      0, 
    'speedIn':      300,
    'speedOut':     300,
    'transitionIn': 'elastic',
    'transitionOut': 'elastic',
    'easingIn':     'swing',
    'easingOut':    'swing',
    'titleShow' : false
}); 
    $("#hidden_link").trigger('click');
});
— 앤드류 스콧 킴리
소스
2

실제로 "live"이벤트를 사용하여 외부 JS 파일에서만 fancyBox 링크를 트리거 할 수있었습니다.

먼저 향후 동적 앵커에 실시간 클릭 이벤트를 추가합니다.

$('a.pub').live('click', function() {
  $(this).fancybox(... fancybox parameters ...);
})

그런 다음 앵커를 본문에 추가합니다.

$('body').append('<a class="iframe pub" href="your-url.html"></a>');

그런 다음 앵커를 "클릭"하여 fancyBox를 트리거합니다.

$('a.pub').click();

fancyBox 링크는 이제 "거의"준비가되었습니다. 왜 "거의"? 두 번째 클릭을 트리거하기 전에 약간의 지연을 추가해야하는 것 같기 때문에 그렇지 않으면 스크립트가 준비되지 않았습니다.

앵커에서 일부 애니메이션을 사용하면 빠르고 더러운 지연이지만 잘 작동합니다.

$('a.pub').slideDown('fast', function() {
  $('a.pub').click();
});

여기에 fancyBox가 onload에 나타납니다!

HTH

— 캡슐
소스
1

아마도 이것이 도움이 될 것입니다 ... 이것은 전체 크기의 jQuery 캘린더 클릭 이벤트 ( http://arshaw.com/fullcalendar/ )에서 사용되었습니다 ...하지만 jQuery에 의해 시작되는 fancybox를 처리하는 데 더 일반적으로 사용될 수 있습니다.

  eventClick: function(calEvent, jsEvent, view) {
      jQuery("body").after('<a id="link_'+calEvent.url+'" style="display: hidden;" href="http://thisweekinblackness.com/wp-content/uploads/2009/01/steve-urkel.jpg">Steve</a>');
      jQuery('#link_'+calEvent.url).fancybox(); 
      jQuery('#link_'+calEvent.url).click();
      jQuery('#link_'+calEvent.url).remove();
    return false;
  }
— 리
소스
1

기본 JavaScript 함수 setTimeout()를 사용 하여 DOM이 준비된 후 상자 표시를 지연 할 수도 있습니다 .

<a id="reference-first" href="#reference-first-message">Test the Popup</a>

<div style="display: none;">
    <div id="reference-first-message" style="width:400px;height:100px;overflow:auto;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#reference-first").fancybox({
            'titlePosition'         : 'inside',
            'transitionIn'          : 'fade',
            'transitionOut'         : 'fade',
            'overlayColor'          : '#333',
            'overlayOpacity'        : 0.9
        }).trigger("click");

        //launch on load after 5 second delay
        window.setTimeout('$("#reference-first")', 5000);
    });
</script>
— 존 Kary
소스
1

클릭 할 수있는 버튼이없는 경우. ajax 응답에서 열려면 다음과 같을 것입니다.

$.fancybox({
      href: '#ID',
      padding   : 23,
      maxWidth  : 690,
      maxHeight : 345
});
— 마하 데브
소스
1 
$(document).ready(function() {
    $.fancybox(
      '<p>Yes. It works <p>',
       {
        'autoDimensions'    : false,
        'width'             : 400,
        'height'            : 200,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
       }
    );
});

도움이 될 것입니다 ..

— 프라 바가 란
소스
0

다음과 같이 링크를 넣을 수 있습니다 (숨겨집니다. 이전 일 수 있음 </body>).

<a id="clickbanner" href="image.jpg" rel="gallery"></a>

그리고 이와 같은 작업 상대 속성 또는 클래스

$(document).ready(function() {
    $("a[rel=gallery]").fancybox({
        openEffect  : 'elastic',
        closeEffect : 'elastic',
        maxWidth    : 800,
        maxHeight   : 600
    });
});

jquery 트리거 함수로 수행하십시오. 

$( window ).load(function() {
  $("#clickbanner").trigger('click');
});
— 닉스
소스
0

HTML :

<a id="hidden_link" href="LinkToImage"></a>

JS :

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>
— AnasSafi
소스
1
이 코드가 질문에 답할 수 있지만 문제를 해결하는 방법 및 / 또는 이유에 대한 추가 컨텍스트를 제공하면 답변의 장기적인 가치가 향상됩니다.
— Nic3500
-1

아마도 jqmodal 을 사용할 수 있으며 가볍고 사용하기 쉽습니다. 호출하여 모달 상자를 표시 할 수 있습니다.

$('.box').jqmShow()
— 림보이
소스
FancyBox의 클래스가 아니기 때문에 이것이 작동하지 않는다고 생각합니다
— Jose Basilio
1
내 디자이너는 Fancybox의 모양과 느낌을 원하며 jqmodal을 위해 구현하려는 노력을 거치지 않는 것을 선호합니다. 또한 우리는 이미 사이트에서 Fancybox를 사용하고 있으며 두 가지 다른 라이트 박스 구현을 지원하고 싶지 않습니다.
— Blegger 2009
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.