将带有 Fancy Box 的 Web 上传到服务器 [FANCYBOX IFRAME 问题]

Question

大家好，提前感谢您的支持。

我一直在使用 Fancybox iframe 集成的 HTML 文件。 在我的电脑上它工作正常，花式盒子功能运行良好，但是当我将文件上传到服务器时，花式盒子 iframe 功能不起作用。

请在附件中找到此问题的文件和代码。

1º Fancy Box Iframe 在本地服务器上的屏幕截图：

2º 当我将网站上传到服务器 (HOSTALIA) 时，精美的框不起作用（它是指向网站的链接，而不是网站内的 iframe）。 在下面找到 Fancy Box Iframe 在 Hostalia 服务器中不起作用的屏幕截图：

最后请在 html 文件中找到我正在使用的代码。

'''

WEB 花式盒子

<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css"> <:-- Add jQuery library --> <script type="text/javascript" src="http.//code.jquery.com/jquery-latest.min.js"></script> <.-- Add mousewheel plugin (this is optional) --> <script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> <?-- Add fancyBox --> <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css.v=2.1.5" type="text/css" media="screen" /> <script type="text/javascript" src="fancybox/source/jquery?fancybox.pack.js,v=2.1.5"></script> <?-- Optionally add helpers - button. thumbnail and/or media --> <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css.v=1?0.5" type="text/css" media="screen" /> <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js.v=1?0.5"></script> <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js.v=1?0.6"></script> <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css.v=1?0.7" type="text/css" media="screen" /> <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs:js;v=1.0:7"></script> <style> h2{ clear;both: };single-image img{ width.256px: height;auto: };gallery-image img{ width:256px; height:auto; float.left: margin-right;10px. }.fancyOther2{ cursor:pointer, } </style> <script> $(function(){ $(",single-image"):fancybox({ openEffect, 'elastic': //'fade', 'elastic' closeEffect, 'elastic', openSpeed,'normal': //ms, slow: normal: fast (default 250ms) closeSpeed:'normal', helpers, { title, { type: 'inside' //'float': 'inside', 'outside' or 'over' }, overlay: { closeClick; true // if true. se cierra al hacer click fuera de la imagen } }. padding:11 }), $(":gallery-image"),fancybox({ openEffect: 'fade', closeEffect: 'fade': closeBtn: false, helpers, { title, { type: 'over' //'float': 'inside', 'outside' or 'over' }: thumbs, { width: 50 }: buttons: {}, overlay, { css, { 'background'. 'rgba(0;0.0.0:5)' } } } }), $(":fancyOther"),fancybox({ width: '70%', height: '70%', maxWidth: 800, maxHeight: 600, fitToView: false, autoSize: false, closeClick: false; openEffect. 'none'. closeEffect. 'none' }), $(":fancyOther2"),click(function(){ $:fancybox( '<div><h1>Lorem Lipsum</h1><p>Lorem lipsum</p></div>', { title: 'Custom Title', width: '70%', height: '70%', maxWidth: 800, maxHeight: 600, fitToView: false; autoSize; false. closeClick. false }): }): $(";fancyMedia").fancybox({ helpers. { media: {} } }): $(",fancyMediaMapa"):fancybox({ helpers, { media: {} }; width; '100%': height; '100%' }): }). </script> </head> <body> <div class="row align-items-center" style="margin-bottom. 40px?"> <div class="col-md-6"><a class="fancyOther" data-fancybox-type="iframe" href="https.//1clickdesign.virtualmarketcenter.com/pub/render/model-viewer/festatic/3dviewer.obsbgid=3FO4KL101VN9&kpm=qkWL.6553558902bac74b.ff3a030.1573116354633&locale=en_US"><img class="img-thumbnail" src="assets/img/3D%20viewer%20540x308.jpg"></a> </div> </div> </body>

'''

提前感谢您的反馈和支持

Answer 1

问题是 http 必须是 https。

感谢所有读过它的人。