Question

我已经下载了WordPress主题，我想根据自己的需要对其进行修改。所以我的问题是：主题中有幻灯片显示，它正在加载一个接一个显示的图像。我发布了下面的代码，但我们感兴趣的部分是我们为图像分配位置的部分。假设我只有一张图片：如果我在服务器的某处有图像，我可以在幻灯片中加载它，如果我在服务器http://myServer/path/to/the/image.jpg上添加该图像的路径。我试过了，它正在工作。问题是我要加载的图片位于另一个外部网址上，因此当我用http://myOtherServer/path/to/the/image.jpg替换该行时，图片未显示。

我在控制台遇到的错误是：

Uncaught Error: Syntax error, unrecognized expression: http://myOtherServer/path/to/the/image.jpg

这是我的.php脚本中的jQuery代码：

$j(document).ready(function(){     

    $j('#kenburns_overlay').css('width', $j(window).width() + 'px');
    $j('#kenburns_overlay').css('height', $j(window).height() + 'px');
    $j('#kenburns').attr('width', $j(window).width());
    $j('#kenburns').attr('height', $j(window).height());

    $j(window).resize(function() {
        $j('#kenburns').remove();
        $j('#kenburns_overlay').remove();

        $j('body').append('<canvas id="kenburns"></canvas>');
        $j('body').append('<div id="kenburns_overlay"></div>');

        $j('#kenburns_overlay').css('width', $j(window).width() + 'px');
        $j('#kenburns_overlay').css('height', $j(window).height() + 'px');
        $j('#kenburns').attr('width', $j(window).width());
        $j('#kenburns').attr('height', $j(window).height());
        $j('#kenburns').kenburns({
            images: "http://myServer/path/to/the/image.jpg", 
            frames_per_second: 30,
            display_time: 5000,
            fade_time: 1000,
            zoom: 1.2,
            background_color:'#000000'
        });
    });
    $j('#kenburns').kenburns({
        images: "http://myServer/path/to/the/image.jpg",  
        frames_per_second: 30,
        display_time: 5000,
        fade_time: 1000,
        zoom: 1.2,
        background_color:'#000000'
    });             
});

我也尝试添加：

var imgS = new Image();
imgS.src = 'http://myOtherServer/path/to/the/image.jpg';

然后用以下代码替换路径：

images: imgS,

它给了我错误：

Resource interpreted as Image but transferred with MIME type text/html: "<currentUrl>/object%20HTMLImageElement/".

顺便说一句。在我的.php脚本的顶部，我有：

header("content-type: application/x-javascript");

所以一般的questin是：如何在我的jQuery代码中获取存储在另一台服务器上的图像？

编辑1：

这是kenburns内部可能需要图像的部分：

$.fn.kenburns = function(options) {
...

        var image_paths = options.images;
        var images = [];
        $(image_paths).each(function(i, image_path){
            images.push({path:image_path,
                         initialized:false,
                         loaded:false});
        });
...
}

编辑2：

我还尝试创建<img src="http://myOtherServer/path/to/the/image.jpg"/>标记，然后将其作为对象传递，但我又得到了错误：

 Resource interpreted as Image but transferred with MIME type text/html: "<currentUrl>/object%20HTMLImageElement/".

Answer 1

试试这个

HTML

<div id="otherImages" style="display:none !important;">
<img src="http://myOtherServer/path/to/the/image.jpg" />
</div>

修改

js（之前未尝试$.fn.kenburns）

$j('#kenburns').kenburns({
        images: "http://webpage.domain" + "#otherImages",  
        frames_per_second: 30,
        display_time: 5000,
        fade_time: 1000,
        zoom: 1.2,
        background_color:'#000000'
    });

如何在jQuery，WordPress主题中从外部URL加载图像？

1 个答案: