WordPress テーマをダウンロードしましたが、必要に応じて変更したいと考えています。だから私の問題は次のとおりです。テーマにスライドショーがあり、次々に表示される画像をロードしています。以下にコードを投稿しましたが、私たちが興味を持っているのは、画像に場所を割り当てる部分です。画像が 1 つしかないとします。その画像がサーバーのどこかにある場合、その画像のサーバー上の場所のパスを追加すると、スライドショーに読み込むことができます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/".