페이지 로드 시 jQuery 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의 JSFidder on load demos에서 사용되는 트릭으로 나타납니다.
$(window).load(function()
{
$.fancybox("test");
});
다른 곳에서 document.ready()를 사용하고 있을 수 있으며 IE9는 두 가지의 로드 순서에 화가 납니다.이렇게 하면 모든 것을 window.load로 변경하거나 setTimer()를 사용하는 두 가지 옵션이 있습니다.
또는 팬시박스가 설정된 후 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
});
});
이제 당신의 링크를 작동시키세요!!
이것은 팬시박스 홈페이지에서 받았습니다.
제가 찾은 최선의 방법은 다음과 같습니다.
<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>
저의 경우 다음이 성공적으로 작동할 수 있습니다.페이지가 로드되면 즉시 라이트 박스가 팝업됩니다.
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>
알렉스의 대답은 훌륭하지만, 기본적인 팬시박스 스타일이라고 부르는 것에 유의해야 합니다.고유한 사용자 정의 규칙이 있는 경우, 호출만 하면 됩니다.trigger click on the 특정 앵커
$(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');
});
실제로 "라이브" 이벤트를 사용하여 외부 JS 파일에서만 fancyBox 링크를 트리거할 수 있었습니다.
먼저 미래의 동적 앵커에 라이브 클릭 이벤트를 추가합니다.
$('a.pub').live('click', function() {
$(this).fancybox(... fancybox parameters ...);
})
그런 다음 본체에 앵커를 부착합니다.
$('body').append('<a class="iframe pub" href="your-url.html"></a>');
그런 다음 앵커를 "클릭"하여 팬시박스를 트리거합니다.
$('a.pub').click();
팬시 박스 링크는 이제 "거의" 준비가 되었습니다."거의"인 이유는? 두 번째 클릭을 트리거하기 전에 지연을 추가해야 할 것 같기 때문입니다. 그렇지 않으면 스크립트가 준비되지 않습니다.
우리 닻에 애니메이션을 사용하는 것은 빠르고 더러운 지연이지만 잘 작동합니다.
$('a.pub').slideDown('fast', function() {
$('a.pub').click();
});
여기 있습니다, 당신의 팬시 박스가 로드되어 나타날 것입니다!
HTH
이게 도움이 될지도...이는 전체 크기의 jQuery 캘린더 클릭 이벤트(http://arshaw.com/fullcalendar/) 에서 사용되었습니다. 하지만 jQuery에서 시작하는 팬시박스를 다루는 데 더 일반적으로 사용될 수 있습니다.
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;
}
또한 기본 자바스크립트 기능을 사용하여 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 response에서 그것을 열려고 한다면 다음과 같습니다.
$.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'
}
);
});
이게 도움이 될겁니다..
링크를 이렇게 넣으시면 됩니다(숨겨집니다).아마 전일 것입니다.</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 trigger 기능으로 하면 됩니다.
$( 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>
Fancybox 3.5.7 버전을 사용하여 별도의 자바스크립트 없이 자동으로 실행할 수 있었습니다.당신의 팬시박스 "그룹"에 대한 참조를 URL의 앵커 링크로 추가하기만 하면 됩니다.
예를 들어 마크업의 경우:
<a href="foo.jpg" data-fancybox="gallery">Click me</a>
다음 링크만 사용하면 됩니다.
https://example.org/slideshow.php#gallery-1
그러면 페이지 로드 시 슬라이드 쇼가 자동으로 열립니다!
jqmodal을 사용할 수도 있습니다. 가볍고 사용하기 쉽습니다.당신은 전화로 모달 박스를 보여줄 수 있습니다.
$('.box').jqmShow()
언급URL : https://stackoverflow.com/questions/807271/how-to-launch-jquery-fancybox-on-page-load
'programing' 카테고리의 다른 글
| CSS 스프라이트에서 이미지를 스케일링하려면 어떻게 해야 합니까? (0) | 2023.09.09 |
|---|---|
| 브라우저 개발 도구에서 ajax 호출이 동기식인지 비동기식인지 확인하려면 다음과 같이 하십시오. (0) | 2023.09.09 |
| VBA에서 감가상각되지 않는 방법으로 SQL Server에 액세스하는 방법은 무엇입니까? (0) | 2023.09.09 |
| 판다에서 read_excel을 사용하여 공정 속도를 높이는 방법은? (0) | 2023.09.09 |
| MySQL/MariaDB 사용자 정의 변수가 grafana에서 작동하도록 하려면 어떻게 해야 합니까? (0) | 2023.09.09 |