페이지로드에서 jQuery Fancybox를 시작하는 방법은 무엇입니까?
https://stackoverflow.com/questions/807271
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
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>
그런 다음 JavaScript에게 전화하십시오.
<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는이 둘의로드 순서에 화를 낼 수 있습니다. 이렇게하면 두 가지 옵션이 남습니다. 모든 것을 창으로 변경하거나 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>
제 경우에는 다음이 성공적으로 작동 할 수 있습니다. 페이지가로드되면 LightBox가 즉시 팝업됩니다.
jQuery : 1.4.2
Fancybox : 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>
Alex의 대답은 훌륭합니다. 그러나 기본 Fancybox 스타일을 호출한다는 점에 주목하는 것이 중요합니다. 자신의 사용자 정의 규칙이 있으면 해당 특정 앵커를 클릭하십시오.
$(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');
});
실제로 "Live"이벤트를 사용하여 외부 JS 파일에서만 멋진 박스 링크를 트리거했습니다.
먼저 미래의 동적 앵커에 라이브 클릭 이벤트를 추가하십시오.
$('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();
});
여기로 이동, 당신의 멋진 박스는 onload가 나타납니다!
HTH
어쩌면 이것은 도움이 될 것입니다 ... 이것은 전체 크기의 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;
}
기본 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>
클릭 할 버튼이없는 경우. Ajax 응답으로 열고 싶다면 다음과 같습니다.
$.fancybox({
href: '#ID',
padding : 23,
maxWidth : 690,
maxHeight : 345
});
$(document).ready(function() {
$.fancybox(
'<p>Yes. It works <p>',
{
'autoDimensions' : false,
'width' : 400,
'height' : 200,
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
});
도움이 될 것입니다 ..
아마 당신은 사용할 수 있습니다 JQMODAL가볍고 사용하기 쉽습니다. 전화로 모달 상자를 보여줄 수 있습니다
$('.box').jqmShow()
이렇게 링크를 넣을 수 있습니다 (숨겨 질 것입니다. </body>)
<a id="clickbanner" href="image.jpg" rel="gallery"></a>
그리고 이와 같은 rel 속성 또는 클래스 작동
$(document).ready(function() {
$("a[rel=gallery]").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
maxWidth : 800,
maxHeight : 600
});
});
jQuery 트리거 기능으로 수행하십시오
$( window ).load(function() {
$("#clickbanner").trigger('click');
});
HTML :
<a id="hidden_link" href="LinkToImage"></a>
JS :
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
