标签: fancybox

这里有一些代码,盒子显示正常,但没有任何选项似乎会影响任何东西!

弹出式HTML:

<div id="fb-pop">
    <div id="fb-content">
        <div class="fb-txt">
            <strong>Have you considered buying a license for Construct 2?</strong><br /><br />
            It comes with more lots more features and possibilities.  Make better games!<br />
            <span class="ti">(And no more annoying messages!)</span>
        </div>
        <a class="get" href="REPLACEME" title="Your support is appreciated!"></a><br />
        <a class="no-thx" href="javascript:void(0)" onclick="$.fancybox.close()" title="Are you sure?  Upgrading your license helps support Construct 2's development!">No thanks, maybe next time!</a>
    </div>
</div>
<a href="#fb-content" id="autostart"></a> 

页面底部的JS:

jQuery(document).ready(function () {

    $("a#autostart").fancybox({
        'transitionIn': 'elastic',
        'transitionOut': 'elastic', …

我正在使用cakephp 1.3 和fancybox ..我已经设法在fancybox 中放置了一个表单。现在我想将光标聚焦到输入字段之一。我已经厌倦了尝试很多事情。我的代码如下

<script type="text/javascript">
jQuery(document).ready( function() {
//document.getElementById('frmname.answer').focus(); 
jQuery("a#answer").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'    :  600, 
        'speedOut'   :  200, 
        'overlayShow'   :   false,
        'href'  : this.href,
});

}); /* */
</script>

我试过以下事情

'onComplete' : function() {
               $('#fancybox-frame').contents().find('#answer').focus();
            },

和

$('#answer').focus();

在我的脚本中。但没有好的结果>任何人都可以指出我对我的代码所做的错误。提前致谢。

我的fancybox内容是这样的：

<div style='display:none'>
    <div id='reply'>

        <h1>Reply For <?php echo $offer['OfferBoard']['headline'] ?></h1>


        <ul class="nrml_list" > 

                <?php echo $this->Form->create('OfferAnswer',array('id'=>'frm','name'=>'frmname'), array('action' => 'reply/'.$offer['OfferBoard']['id'],'inputDefaults'=> array('label'=>false))); ?>


                <li> 
                    <div class='ulabel' style="float:right;" >Reply Text</div>
                    <div>
                        <div class="left"><?php echo $form->textarea('answer',array('class'=>'tarea1','label'=>FALSE,'id'=>'answer')); ?></div>
                        <div …

所以我已经下载了 fancybox zip 并将其添加到我的网站。当我进入演示区时，除了 iframe 之外，一切都工作正常。无论如何我还没有编辑过代码。它在他们的网站上运行得很好，所以我不确定为什么在我的网站上会有所不同。我搜索过这个网站和其他网站，但一无所获。同样，我没有编辑任何代码，我只是将其解压缩并将其推送到我的服务器。有任何想法吗？ 在这里查看

在编辑模板时,我遇到了与fancybox一起工作的问题.我注意到'next'和'prev'按钮没有出现.是否有特定的js命令使它们出现？或者我应该在哪里看更准确？

我正在使用fancybox添加我网站的购物车部分.fancybox适用于Firefox,Chrome和IE9,但不适用于IE8.真的不知道为什么,请帮忙.

    $(document).ready(function() {

        $(".addToOrderButton").click(function(){
            $(".addToOrderButton").fancybox({
                'type'      : 'iframe',
                'width'     : '75%',
                'height'    : '75%',
                'autoScale'     : false,
                'transitionIn'  : 'none',
                'transitionOut' : 'none',
                'helpers'       : {overlay : { closeClick: false}},
                'href'          : 'includes/shopping_cart.php?drink_id='+$(this).attr("drink_id")

            });
        });

        $(".addToOrderButton").fancybox({
                 'type'     : 'iframe', 
            'width'     : '75%',
            'height'    : '75%',
            'autoScale'         : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none'



        });
    });

</script>
<button drink_id="$drink->id" id="addToOrderButton_$drink->id" class="addToOrderButton" type="button" name="drink_add" value="Add" style="border: 0;cursor: pointer;background: transparent">
    <img src="./images/add_but.png" alt="submit" />
</button>

所以我有一个看起来像这样的照片库：

<div id="gallery">
  <a href="thumb1.jpg" class="fancybox">
    <img class="item"  src="thumb1.jpg">
  </a>
  ...
</div>

我像这样在我的图像链接上初始化fancybox...

jQuery(document).ready(function() {
    jQuery('.fancybox').fancybox();
});

...但什么也没有发生 - 单击我画廊中的图像只是链接到 href'd 图像。

我从 Chrome 控制台没有收到任何错误，并jQuery('.fancybox')正确选择了我的所有<a>元素。

任何想法为什么fancybox似乎不起作用？

我试图找出如何设置 javascript cookie，以便在访问者的第 4 次页面浏览后显示一个fancybox 弹出窗口。

这是我用来显示 Fancybox 弹出窗口的代码，但正如您所看到的，这仅在第一次浏览时显示代码，一天后过期

function setCookie(c_name,value,exdays)
 {
     var exdate=new Date();
     exdate.setDate(exdate.getDate() + exdays);
     var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
     document.cookie=c_name + "=" + c_value + ";domain=.mysite.net;path=/";
 }

function getCookie(c_name)
 {
     var i,x,y,ARRcookies=document.cookie.split(";");
     for (i=0;i<ARRcookies.length;i++)
  {
     x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
     y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
     x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
       {
       return unescape(y);
       }
  }
 }

jQuery(document).ready(function() {
     var show = getCookie("fancyreg");
     if(show==null || show=="") {
       $.fancybox(
 {
        'type' : 'iframe',
        'href' : 'http://www.mysite.net/popup/', //URL to popup page or image
        'autoDimensions' : …

我有这种类型的标记

<div class="box" href="pic-gallery/img01.jpg">
  <div>----------</div>
</div>

现在,当我要验证它时,它显示错误,因为不允许在div内部使用href.那么如何验证这个错误？我曾经使用过

<div class="box" onclick="href='pic-gallery/img01.jpg'"></div>

但它没有打开图像,因为图片正在通过fancybox.所以请帮助我.任何帮助和建议将是非常值得注意的.

如何使用fancybox 1.2.6随时保持prev/next箭头可见？

/assets/fancybox-40d79ef494fcf5ca4727cb13b9e69c33.png 404 (Not Found) 

这是当我进入我的页面时看到的.fancybox-rails gem的图片无法加载 - 我谈论关闭按钮,背景和其他fancybox-rails css图像等图像.我可以做什么？我的所有CSS都有同样的问题,我改变了

url('something.jpg') 

至

image-url('something.jpg') 

但是这里我没有这个fancybox-rails gem的任何css文件,一切都在jquery.fancybox.js

在localhost上,一切只能在生产服务器上运行

如果有人对我的问题有更好的称号,请继续更改... ;-)

我一直在谷歌搜索相当长一段时间,但要么我没有问正确的问题,或者到目前为止没有人与此斗争.

我与TYPO3 7.6的fancybox v3.0.47(工作http://fancyapps.com/fancybox/)和我对于图像画廊创建了自己的内容元素.到现在为止还挺好.在客户要求将视频文件添加到该库之前,一切正常.该库使用fancyBox作为灯箱,我使用如下:

<div class="imgGalleryIMG">
  <a href="/fileadmin{file.originalFile.identifier}" data-fancybox="gallery" data-caption="{file.description}">
    <f:image image="{file}" crop="{file.crop}" />
  </a>
</div>

fancybox需要链接,里面的图像是预览图像(可以裁剪).

这正常工作与图片,我可以改变<f:image image="{file}",以<f:media file="{file}" />使被装载到内容元素与YouTube视频"从URL添加媒体"显示,并开始在其上点击时打不过这种方式从的fancybox的收藏夹就不会弹出和它保持与预览图像一样小.

我尝试使用不同的方法,我遇到了youtube视频.通过使用"从URL添加媒体",视频将作为youtube文件保存到文件列表(意味着它具有文件扩展名".youtube"),并且它的标题将成为文件的名称.当我使用时,<f:debug>我找不到真正的链接(例如https://www.youtube.com/watch?v=WEkSYw3o5is),也没有找到YouTube视频的视频ID(例如WEkSYw3o5is).如果我使用上面用于图像的方法,我有一个视频的预览图像,但是当我点击它时,灯箱会打开,除了youtube-video-id之外别无其他.

第二种方法:

<div class="imgGalleryIMG">
  <f:if condition="{file.originalFile.properties.extension} == 'youtube'">
    <f:then>
      <a href="{file.originalFile.identifier}" data-type="iframe" data-fancybox="gallery" data-caption="{file.description}">
        <f:image image="{file}" />
      </a>
    </f:then>
    <f:else>
      <a href="/fileadmin{file.originalFile.identifier}" data-fancybox="gallery" data-caption="{file.description}">
        <f:image image="{file}" crop="{file.crop}" />
      </a>
    </f:else>
  </f:if>
</div>

如果我是正确的,我需要的是youtube视频的链接,用于fancybox的链接,如文档中所述.

我真正想要的是youtube-video的显示图像,点击它将在灯箱中显示(没有自动播放).我怎样才能做到这一点？

我赞成一个只能改变模板的解决方案.

编辑

使用渲染后的第一种方法和fancybox实现其魔力,结果如下所示:

<div class="fancybox-container fancybox-show-controls fancybox-show-infobar fancybox-show-buttons fancybox-container--ready fancybox-controls--canzoomIn" role="dialog" tabindex="-1" id="fancybox-container-1" …

我使用fancybox,很少有一些图像不会加载到用户.如何确保图像始终加载,如果不加载,我可以重新加载页面或其他内容？