Tag: fancybox

具有低高景观方向的移动设备中的Fancybox缩放问题: 问题描述：我在响应式页面设计中使用Fancybox v2.1.5。我遇到的问题是移动设备较小，矩形比方形。当设备处于纵向方向并且我调用Fancybox时，它将显示为屏幕宽度，标题文本将包含在图像下方。这不是问题，因为在纵向模式下通常有很多额外的屏幕空间。但是，当我将设备更改为横向时，Fancybox会根据较短的屏幕高度缩小其高度。宽度也明显缩小。由于标题框宽度也由Fancybox容器的宽度控制，该宽度调整为图像宽度，这意味着文本包装更多，并且通常会导致图像缩小，因为它调整得更小以适应所需的空间标题文字包装。我没有成功尝试使用Fancybox CSS和媒体查询但是在这里阅读其他post表明你需要javascriptfunction才能有效地做到这一点，虽然我对html和CSS非常稳定，但我仍然对javascript相当不稳定。期望的function：我希望能够测试“短”屏幕高度并格式化Fancybox标题，以尽可能多地为图像提供空间。理想情况下，这可以通过高于控制Fancybox Title字体大小并允许标题框扩展到容器边界之外。任何编码建议forms的帮助或指向我错过的其他post将不胜感激。

Fancybox v2覆盖/格式标题: 如何覆盖新版花式框中的标题？ $(document).ready(function() { $(“.photogalleryLightbox li a”).fancybox({ helpers:{ title: { type: ‘inside’, beforeShow: function(opts) { console.log(‘beforeShow title helper’); }, }, buttons : {} }, beforeShow: function() { console.log(‘beforeShow’); // var obj = $(currentArray[currentIndex]); // from prev. version // if (obj.next().length) return obj.next().html(); // from prev. version } }); }); 我试过这个，但不知道如何将变量作为索引。

jQuery：改变fancybox的宽度: 我在网站上显示不同类型的图像。附加到每个图像我想添加一些文字。我已经在html文档的title-element中写了这个文本。这段文字长了几句。现在发生的事情是，fancybox变得非常狭窄（因为图片非常小）而且文本看起来非常愚蠢。我试图改变fancybox代码中的宽度和高度值，但它似乎仍然无法正常工作。我也尝试在css中修复它，并且我将标题文本变得更宽，但是fancybox仍然太窄，所以文本部分在框内和框外。如何将fancybox大小更改为固定大小，以便标题文本看起来不那么愚蠢？到目前为止，我已经这样做了： jQuery的： $(“.fancybox”).fancybox({ helpers : { title: { type: ‘inside’, position: ‘top’, } }, openSpeed: ‘slow’, closeSpeed: ‘slow’, }); CSS .fancybox { width: 600px; height: 600px; } .fancybox-title { width: auto; height: auto; } .fancybox-title .child { min-width: auto; height: auto; }

Fancybox2：修改多个画廊的调用: 我正在生成一个HTML页面，其中包含MySQL数据库中保存的信息的多个图库，我需要修改Fancybox2调用，如下所示 $(document).ready(function() { $(“a[rel=gall24],a[rel=gall30], etc, etc etc”).fancybox({ … }); }); 如何在调用中添加元素引用？也就是说，我需要在调用中添加一个可变数量的a[rel=XXX] 。我是否使用调用中的值和引用创建变量？如果是这样，我不确定语法，并会欣赏一个例子。

如何从按钮onclick事件启动fancybox来绘制谷歌图表？: 我们可以在弹出式花式框中绘制谷歌图表吗？我在表格中显示了数据，每行都有一个按钮，用于显示每条记录的谷歌图表。目前，我的图表始终显示在表格后面的底部，但是当记录在屏幕上滚动时，用户需要滚动到底部才能获得图表视图。有可能使用fancybox或某种方式来解决这个不方便的问题吗？谢谢你的建议！ HTML： data … pie chart JS： function drawPieChart(dataArr, elementId) { //dataArr : the data to display //elementId : element where to display chart var data = google.visualization.arrayToDataTable(dataArr); var chart = new google.visualization.PieChart(document.getElementById(elementId)); chart.draw(data, options); } function showChart(){ //alert(“readyState=” + xhr2.readyState); if(xhr2.readyState == 4) { if(xhr2.status == 200){ var allEmp = […]

Angularjs控制器被称为两次？: 我使用ngResource从服务器调用数据。但是，我已经发现由于某种原因，我的控制器被调用了两次。这是我的代码; App.js文件 // declare a module var blogApp = angular.module(‘blogApp’, [‘ngResource’]); HomeController.js文件; blogApp.controller(“HomeController”, function ($scope, $resource) { var HotNews = $resource(‘/api/article/hotnews?culture=en-US’); $scope.news = HotNews.query(); alert(“hello”); //here i see hello alert box two times }); 我的看法; {{headline.description}} » more 更新：问题出在主布局的fancybox.js文件中; 源文件是; @Scripts.Render(“~/bundles/jquery”) 当我评论出fancybox时，一切正常，但当我把它添加回去时，我得到两次警报框;

使用fancybox查看完整大小的图像: 我正在尝试开发一些代码，其中jquery获取图像并调整它们以适应父div，可以选择单击图像以使用fancybox以完整大小查看它。我正在尝试使用“扩展”类来完成所有图像，并且预计每页的图像不会超过该类。以下是我到目前为止所提出的内容。图像调整得很好，我可以点击图像来显示fancybox，但它是resize，而不是原始大小。我有fwidth和fheight作为原始维度的变量，但是指定它们不起作用，因为它是内联的。所以，我需要使用一个我已经想到的iframe，并试图绕过它包裹一个链接并将链接指定为具有指定尺寸的iframe，为链接抓取.attr（“src”）。但无论我做什么，它都会转到fancybox中的404页面。以下是我所拥有的，不确定如何继续，或者我是否以错误的方式思考这个问题？ if($(‘img.expand’).length){ var parentClass = $(‘img.expand’).parent().attr(“class”); var fwidth = $(‘img.expand’).attr(“width”); var fheight = $(‘img.expand’).attr(“height”); if($(‘img.expand’).parents().is(‘.grid_10’)){ $(‘img.expand’).each(function() { var maxwidth = 590; var obj = $(‘img.expand’); var width = obj.width(); var height = obj.height(); if (width > maxwidth) { //Set variables for manipulation var ratio = (height / width […]

检查jQuery“Fancybox”是否已经注册？: 我正在重新编写一个像这样的jQuery fancybox： $(document).ready(function() { $(“#help”).fancybox({ ‘width’: ‘90%’, ‘height’: ‘90%’, ‘autoScale’: true, ‘transitionIn’: ‘elastic’, ‘transitionOut’: ‘none’, ‘titleShow’: false, ‘type’: ‘iframe’ }); }); 但是，在页面传输/回发时，它会多次注册，这会减慢到破坏的程度。有没有办法检查事件是否已经注册，如果没有，请注册？伪代码： //check if fancybox has not been registered if($(“help”).fancybox == null)) { //register fancy box }

显示jquery fancybox作为ajax的成功: 我有：显示fancybox和的链接，当在ajax成功点击submit按钮时，在页面上显示一条消息。他们都很好。代码如下。 $(document).ready(function () { //this fancybox appears when … clicked $(“.fancybox-effects-d”).fancybox({ padding:15, closeBtn:true, }); $(“form#submit”).submit(function () { var name = $(‘#name’).attr(‘value’); var password = $(‘#password’).attr(‘value’); $.ajax({ type:”POST”, url:”index/success”, data:{ name:name, password:password}, success:function () { //this form disappears and div appears when submit button of the … clicked $(‘form#submit’).hide(function () { $(‘div#errors’).fadeIn(3000); […]