Tag: fancybox 2

将各种“rel”属性添加到fancybox画廊

我有一个包含4个fancybox（v.2）画廊的页面，当我点击第一个画廊时，他绕过页面上的所有画廊，这很糟糕。 所以我想给每个画廊一个不同的“rel”属性（rel =“gallery1”，rel =“gallery2”，rel =“gallery3”……）。 所以我需要数这些画廊并给他们数字。 我的代码： $(document).ready(function() { $(“.fancybox”) .attr(‘rel’, ‘gallery’) .fancybox({ openEffect : ‘none’, closeEffect : ‘none’, padding : 0, loop : false }); }）;

fancbybox pinterest jQuery

我想将pinterest按钮添加到我的fancybox图像中 我将我的getscript函数放在beforeLoad和fancbyox的afterLoad函数中，但我不知道如何设置data-pin-hover =“true” $.getScript(‘//assets.pinterest.com/js/pinit.js’, function() { }); 任何帮助，将不胜感激。

Fancybox 2不能使用jQuery 1.7.2

我试图使任何Lightbox类型的代码工作，它似乎不适用于jQuery 1.7.2。 我基本上是在iFrame中制作一个表单。 当有人点击横幅时，它会在灯箱中打开一个optin表单，他们可以注册邮件列表。 我目前正在使用Fancybox 2，当我使用时它看起来很漂亮： 但是当我回到： 它不再有效。 我想也许我可以在网站上使用1.7版本，但是当我这样做时，它会导致首页上的图片幻灯片停止工作。 现在，我用jQuery 1.7.2和1.8做了一个JSFiddle，他们都工作了。 所以现在我不知道是什么导致了这个问题。 为了清楚起见，我正在使用XAMPP在我的计算机上测试该站点而没有任何其他代码或插件，以避免在我最初测试时发生冲突。 我知道这不是一个可以用jQuery.noConflict解决的问题，因为它不能处理页面清理代码。 这是我用来测试function的代码： $(document).ready(function() { $(“.various”).fancybox({ maxWidth : 800, maxHeight : 600, fitToView : false, width : ‘70%’, height : ‘70%’, autoSize : true, closeClick : false, openEffect : ‘elastic’, closeEffect : ‘elastic’, helpers : { overlay : { css : { ‘background’ […]

旧的IE中不存在Fancybox覆盖

我已经制作了这个测试页面，用于在网站上使用fancybox，它可以在PC上的所有Mac浏览器，iOS和非IE浏览器上使用。 Windows 8上的最新IE也没问题。 但是在XP上的IE8,7和6不会在页面上显示透明覆盖或弹出框阴影，并且弹出窗口下的页面上的链接仍然是可点击的（我不想要）。 （注意，测试页面上的弹出图像不一定是正确的最终图像 – 没关系）。 可能我已经搞砸了某个地方的js（除了能够改变非常基本的配置，我在js中没有专业知识）。 我注意到fancybox演示页面在旧IE中运行良好。 我不喜欢旧IE中的盒子阴影，但我需要叠加的模态行为。 我会非常感激地收到任何错误指示。

如何在关闭时刷新Fancybox内容？

有没有办法在关闭时重置fancybox实例或刷新它的内容？ 请注意，它从同一页面上的div中获取内容。 我想让它显示像重新打开fancybox时首次加载到dom中的内容。 我想这更像是一个javascript / jQuery的东西，而不是Fancybox的东西，对吧？ $.fancybox.open({ href: ‘#popup’, padding: 0, autoWidth: true, arrows: false, closeBtn: false, scrollOutside: true, helpers: { overlay: { css: { ‘background’: ‘rgba(0, 0, 0, 0.5)’ }, locked: false } }, afterClose: function() { // Reset or refresh here } });

Fancybox v2与Durandal无法合作

我无法让Fancybox与Durandal合作。 我使用John Papa的热毛巾模板作为我的起点。 问题：每当我点击图像时，它都会导航到图像路径，而不是将其覆盖在页面顶部。 库：Jquery v 1.9.1和FancyBox 2.1.4。 视图： 视图模型： define([‘services/logger’, ‘services/dataservice’], function (logger, dataservice) { var vm = { viewAttached: viewAttached, activate: activate, }; return vm; function activate() { //Do something // return promise } function viewAttached() { $(“.fancybox”).fancybox(); } }); BundleConfig： bundles.Add( new ScriptBundle(“~/scripts/vendor”) .Include(“~/scripts/jquery-{version}.js”) .Include(“~/scripts/jquery.fancybox.js”) .Include(“~/scripts/bootstrap.js”) ); bundles.Add( new StyleBundle(“~/Content/css”) .Include(“~/Content/ie10mobile.css”) .Include(“~/Content/bootstrap.css”) […]

如何在fancybox iframe中显示ajax响应

我有2个jsp的products.jsp和viewcart.jsp。现在我试图使用fancybox在iframe中显示购物车（viewcart.jsp）。 当我点击添加到购物车，iframe不会弹出。 这就是我所做的。 我应该如何将ajax响应传递给iframe？ $(document).ready(function(){ $(‘.cart’).click(function() { var pdtid = $(this).attr(‘data-productid’); $.ajax({ url : ‘${pageContext.request.contextPath}/addtocart’ + pdtid, dataType: ‘json’, type : ‘GET’, data :{‘id’: pdtid}, success: function(response) { $.fancybox(response,{ ‘width’ : 900, ‘height’ : 520, ‘autoScale’ : false, ‘transitionIn’ : ‘elastic’, ‘transitionOut’ : ‘elastic’, ‘type’ : ‘iframe’, ‘href’ : “${pageContext.request.contextPath}/viewcart.html” }); } }); }); }); […]

fancybox 2 iframe加载问题

我在最近推出的网站上遇到了fancybox 2的问题。 我使用我的页面上的链接在fancybox灯箱中打开galleria（galleria.io）画廊和PDF文件。 对于照片画廊（galleria），我在fancybox iframe中加载另一个网页，我正在定义明确的缩略图，所以所有全尺寸的照片不必立即加载。 对于PDF内容，我直接在iframe中加载PDF文件。 但是，通常情况下，第一次点击链接时iframe不会出现（永久加载动画）。 关闭fancybox并再次单击链接可以加载内容。 这适用于广场和PDF内容。 我开发和测试该网站主要在FF但似乎问题发生在IE也。 在搜索了互联网的答案之后，我发现的最接近的问题是stackoverflow： /问题/ 4710023 / jQuery的的fancybox – 工作 – 但只-时任您点击这个图像，两次 （尝试交换与此处发布的解决方案相似的条款，但在iframe内部生成404） /问题/ 9779250 /的fancybox-2需要两点击 （信息不足） /问题/ 14819642 /的fancybox粘连加载的iframefunction于即 （指IE，但禁用预载声音很有希望，我即将试一试） 我是一个家庭建设者，而不是代码建设者，所以我确信在建立我的网站的过程中我做错了。 我很感激任何提供的帮助！ 谢谢！ 链接到示例： （在开发中）画廊页面： http ： //www.sonahomes.com/gallery/ （现场）主页： http ： //www.sonahomes.com [主页上方的页脚上有“精选列表”，其中包含PDF和照片库的链接……最右边的列表加载了一个带有19的图库相片] 码： 链接到iframe中打开PDF： PDF Flyer 链接到iframe中的open galleria gallery： 19 Photos （我知道上面的galleria链接中的额外div不完全正确，但我不认为它与问题有关，因为同样的问题发生在上面链接的图库页面上，只有文本链接） 使用fancybox在页面上初始化： $(document).ready(function() { $(“.various”).fancybox({ […]

由于固定导航，增加顶部和底部边距FancyBox v2

我目前正在开发一个网站，以后会有回应。 该网站主要由图像组成，而这些图像在点击时又会加载到FancyBox中。 FancyBox的v2现在具有响应性，因此在屏幕尺寸变化时重新调整图像等大小。 作为我设计的一部分，我有两个固定的横幅，显示在页面的顶部和底部，见下图： 默认情况下，FancyBox周围有一个边距，因此它的样式很好。 然而，随着我添加到横幅的固定定位，我需要增加顶部和底部边距。 我已经浏览了JS源代码，但我不能在我的生活中找到我应该添加额外余量的地方。 在过渡等方面存在各种各样的边缘（我认为这是我感到困惑的地方）。 理论上我只需要在边距上添加“x”像素数量，其中x是横幅的高度。 另外，我不确定如何在响应式设计中复制它，因为横幅在移动设备上可能稍微浅一些。 添加边距意味着图像与横幅之间存在微小差距，目前图像位于横幅后面。 请参阅下图，了解我希望它的样子： 我很感激以前做过这些事情的想法/例子。 亚当，先谢谢你。

将URL添加到由Fancybox2-AJAX调用的Iframe基于Iframe的ID

好吧，我有这个工作减去了一旦我通过AJAX使用fancybox调用这个工作的事实。 静态示例： $(“div.video-container iframe”).each(function(){var idAdd=$(this).attr(“id”);$(this).attr(“src”,”http://www.youtube.com/embed/”+idAdd+”?rel=0&autoplay=0&modestbranding=1&showinfo=0&autohide=1″)}) 现在，当我拿下这个并将3个iframe拉入.txt文件并使用fancybox2-ajax调用从index.html文件中调用它时，它会失败： index.html的： Link Link Link 文本文件包含iframe： 每当AJAX调用iframe时，我如何编写JS代码运行？