Как сделать так, чтобы лайтбокс fancybox отображался при загрузке страницы

Привет, мне нужна помощь в открытии лайтбокса fancybox при загрузке страницы.

Вот мой пример страницы

Я пытаюсь добиться открытия лайтбокса при загрузке страницы с помощью html-страницы, такой как iframe, внутри лайтбокса.

Мой js-вызов:

jQuery(document).ready(function() {
    $.fancybox(

        {
      'autoDimensions'  : false,
      'width'               : 350,
      'height'              : 650,
      'transitionIn'        : 'none',
      'transitionOut'       : 'none',
      'type': 'iframe',
      'href': 'http://www.meandhimclients.co.uk/beachhorizon/bh_wordpressdev/wp-content/themes/beach%20horizon/lighttest.html'
        }
    );
});

Lightbox загружается, поэтому js в порядке, но моя html-страница не загружается в окне. Любая помощь приветствуется.

Спасибо Роб


jquery fancybox
person user1347007    schedule 10.05.2012    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Я не знаю, является ли это причиной вашей проблемы, но у вас дважды вызывается fancybox: один раз минимизированный и один раз полный исходный код

<!-- HERE -->
<script type="text/javascript" src="http://www.meandhimclients.co.uk/beachhorizon/bh_wordpressdev/wp-content/themes/beach horizon/js/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="http://www.meandhimclients.co.uk/beachhorizon/bh_wordpressdev/wp-content/themes/beach horizon/js/jquery.easing-1.3.pack.js"></script>
<!-- AND HERE -->
<script type="text/javascript" src="http://www.meandhimclients.co.uk/beachhorizon/bh_wordpressdev/wp-content/themes/beach horizon/js/jquery.fancybox-1.3.4.pack.js"></script>
<script src="http://www.meandhimclients.co.uk/beachhorizon/bh_wordpressdev/wp-content/themes/beach horizon/js/fancyboxcall.js"></script>

Также более читабельно использовать относительные пути (я думал, что вы ссылаетесь извне):

<script type="text/javascript" src="/beachhorizon/bh_wordpressdev/wp-content/themes/beach horizon/js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/beachhorizon/bh_wordpressdev/wp-content/themes/beach horizon/js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="/beachhorizon/bh_wordpressdev/wp-content/themes/beach horizon/js/fancyboxcall.js"></script>
person Kyle Macey    schedule 10.05.2012

arrow_upward
0
arrow_downward

Вы редактировали свою версию файла fancybox.js? он кажется поврежденным. Попробуйте скачать его и переустановить еще раз.

Вы получаете эту ошибку:

Timestamp: 11/05/2012 11:29:38 AM
Error: missing ) after argument list
Source File: http://www.meandhimclients.co.uk/beachhorizon/bh_wordpressdev/wp-content/themes/beach%20horizon/js/jquery.fancybox-1.3.4.pack.js
Line: 45
Source Code:
b.fn.fancybox.defaults={padding:10,margin:40,opacity:false,modal:false,cyclic:false,scrolling:"auto",width:560,height:340,autoScale:true,autoDimensions:true,centerOnScroll:false,ajax:{},swf:{wmode:"transparent"},hideOnOverlayClick:true,hideOnContentClick:false,overlayShow:true,overlayOpacity:0.7,overlayColor:"#777",titleShow:true,titlePosition:"float",titleFormat:null,titleFromAlt:false,transitionIn:"fade",transitionOut:"fade",speedIn:300,speedOut:300,changeSpeed:300,changeFade:"fast",easingIn:"swing",
person JFK    schedule 11.05.2012

arrow_upward
0
arrow_downward

Разве Fancybox не средство просмотра изображений, а не всплывающее окно iframe? Если вы хотите, чтобы iFrame появлялся во всплывающем окне, вы можете создать изображение границы, а затем создать в нем iframe, а затем в функции document.ready сделать так, чтобы он отображался с исчезновением, примерно так:

document.ready(function(){
  $("lightbox").fadeIn();
});
person ToshNeox    schedule 12.05.2012