拼凑后备答案

【问题标题】：Piecemaker fallback拼凑后备
【发布时间】：2014-02-28 03:06:50
【问题描述】：

我想知道是否有办法为 Piecemaker 包含后备功能，因此当在移动设备上查看网站时，页面会回退到使用基于 javascript 的滑块。

感谢任何帮助。

【问题讨论】：

标签： jquery flash fallback

【解决方案1】：

所以我想我找到了解决这个问题的方法，方法是遵循 crayon1 的思路并更改它嵌入 flash 的方式，以便可以包含备用子 html。这需要更改两个文件：

JavaScriptFlashGateway.js &

piecemaker-main.php （假设我们谈论的是 WordPress 插件）

在 JavaScriptFlashGateway.js 中，找到以下代码：

function FlashTag(src, width, height)
{
    this.src       = src;
    this.width     = width;
    this.height    = height;
    this.version   = '9,0,0';
    this.id        = null;
    this.salign = "tl";
    this.scale = "noscale";
    this.allowScriptAccess = "always";
    this.allowfullscreen = "true";
    this.bgcolor   = 'ffffff';
    this.flashVars = null;
    this.wmode     = null;
}

把它改成这样：

function FlashTag(src, width, height, fallback)
{
    this.src       = src;
    this.width     = width;
    this.height    = height;
    this.fallback  = fallback;
    this.version   = '9,0,0';
    this.id        = null;
    this.salign = "tl";
    this.scale = "noscale";
    this.allowScriptAccess = "always";
    this.allowfullscreen = "true";
    this.bgcolor   = 'ffffff';
    this.flashVars = null;
    this.wmode     = null;
}

然后再往下找到这一行：“FlashTag.prototype.toString = function()”

并将整个函数替换为：

FlashTag.prototype.toString = function()
{
    var ie = (navigator.appName.indexOf ("Microsoft") != -1) ? 1 : 0;
    var flashTag = new String();
    flashTag += '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ';
    if (this.id != null)
    {
        flashTag += 'id="'+this.id+'" ';
    }
    flashTag += 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version='+this.version+'" ';
    flashTag += 'width="'+this.width+'" ';
    flashTag += 'height="'+this.height+'">';
    flashTag += '<param name="movie" value="'+this.src+'"/>';
    flashTag += '<param name="quality" value="high"/>';
    flashTag += '<param name="bgcolor" value="#'+this.bgcolor+'"/>';
    flashTag += '<param name="scale" value="noscale"/>';
    flashTag += '<param name="allowScriptAccess" value="always"/>';
    flashTag += '<param name="salign" value="tl"/>';
    flashTag += '<param name="allowfullscreen" value="true"/>';
    flashTag += '<param name="wmode" value="transparent"/>';
    if (this.flashVars != null)
    {
        flashTag += '<param name="flashvars" value="'+this.flashVars+'"/>';
    }
    if(!ie) {
        flashTag += '<object type="application/x-shockwave-flash" ';
        flashTag += 'data="'+this.src+'" ';
        flashTag += 'width="'+this.width+'" ';
        flashTag += 'height="'+this.height+'">';
        flashTag += '<param name="movie" value="'+this.src+'"/>';
        flashTag += '<param name="quality" value="high"/>';
        flashTag += '<param name="bgcolor" value="#'+this.bgcolor+'"/>';
        flashTag += '<param name="scale" value="noscale"/>';
        flashTag += '<param name="allowScriptAccess" value="always"/>';
        flashTag += '<param name="salign" value="tl"/>';
        flashTag += '<param name="allowfullscreen" value="true"/>';
        flashTag += '<param name="wmode" value="transparent"/>';
        if (this.flashVars != null)
        {
            flashTag += '<param name="flashvars" value="'+this.flashVars+'"/>';
        }
    }
    flashTag += this.fallback;
    if(!ie) {
        flashTag += '</object>';
    }
    flashTag += '</object>';
    return flashTag;
}

然后在piecemaker-main.php中找到这一行：“var tag = new FlashTag('{$this->piecemakerSWF}', {$att['width']}+50, {$att['height ']}+100, '9,0,0');"

并用您需要的任何备用 html 替换 '9,0,0'。

那么你就准备好了！希望这会有所帮助:)

【讨论】：

【解决方案2】：

你能解决这个问题吗？我不认为 Piecemaker 默认有这个选项，而且我还没有看到用 javascript 100% 模仿 Piecemaker 的 Flash 效果的方法。

可能有更好的方法来做到这一点，但首先想到的是使用移动浏览器检测代码（其中有几种可用。不确定您喜欢哪种编码语言，但只需快速谷歌搜索，你可以找到不同的选项）。然后，您可以使用 Piecemaker 作为默认显示页面版本，或者，如果访问者使用移动浏览器，则使用您选择的 javascript/jQuery 滑块显示一个版本。

EDIT 看起来这是一个不错的选择，对于旧浏览器有一些后备：http://tympanus.net/Development/Slicebox/index4.html

希望有帮助！

【讨论】：