如何在jQuery，WordPress主题中从外部URL加载图片？ [英] How to load image from external URL in jQuery, WordPress theme?

问题描述

我已经下载了WordPress主题，我想根据我的需要进行修改。所以我的问题是：主题中有幻灯片，它加载了一个接一个放映的图像。我发布了下面的代码，但我们感兴趣的部分是我们为图像分配位置的部分。假设我只有一个图像：如果我在我的服务器上的某个地方有该图像，我可以在幻灯片中加载它，如果我添加了该图像在服务器上的位置http://myServer/path/to/the/image.jpg的路径。我试过了，它起作用了。问题是，我要加载的图像位于另一个外部URL上，因此当我将该行替换为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");

所以一般的问题是：如何在我的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/".

推荐答案

试试

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加载图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！