私のページには、それぞれ ajax で新しいページをロードするリンクのリストがあります。これらの新しいページには、画像のギャラリーとメイン画像が含まれています。私の目的は、メイン画像からソース URL を取得して、リンク ページの対応するリンクにサムネイルとして表示することです。
どうすればいいのかわかりません。誰かが私を正しい方向に向けて、従うべきコードを教えてくれたら、私は感謝します.
私のページには、それぞれ ajax で新しいページをロードするリンクのリストがあります。これらの新しいページには、画像のギャラリーとメイン画像が含まれています。私の目的は、メイン画像からソース URL を取得して、リンク ページの対応するリンクにサムネイルとして表示することです。
どうすればいいのかわかりません。誰かが私を正しい方向に向けて、従うべきコードを教えてくれたら、私は感謝します.
jQuery.get で外部ページを読み込むことができます。
$.get('my_external_page.html', function(data) {
// data is the pages contents.
});
次に、それをdivに押し込みます
$.get('my_external_page.html', function(data) {
// data is the pages contents.
var haystack = $('<div>').html(data);
var needle = haystack.find('.image-we-want');
var imageSrc = needle.attr('src');
});
それが始まりです。もちろん、jquery を使用できること、および検索している要素にクラスまたは ID があることを前提としています。
動作しました。おそらく最も賢い方法ではありませんが、うまくいきます。
リンク () でいっぱいのページがあります。と呼ばれるの下部に空の div もあります。コードは、これらのリンクにアイコンをロードします。リンクは、いくつかの画像を含む新しいページを指しています。アイコンは、ページの標準画像の縮小版です。
function iconPicHandler(){
var aTags = $('#linkpage a');
for(var i = 0; i < aTags.length; i++){
$('#invisible').load('page3.html #standardImage',function(aLink){
return function(){
$('<img src="'+ $('#standardImage').attr("href") +'" />')
.prependTo(aLink);
}
}
($(atags[i])));
}
$('#invisible').hide();
}
そのため、最初に行うことは、リンク ページ内のすべてのリンクを取得することです。残りのコードを for ループに入れて、すべてのリンクに対して同じことができるようにします。次に、「#standardImage」を page3.html から「#invisible」に読み込みます。#standardImage" は、page3 の standardImage の縮小版への URL を含む空の div です。URL は div の href 属性として保持されます。次に、トリッキーな部分が来ました。ここで何をしたかわかりません。しかし、コールバック関数として、私は最後に指定された 1 つの引数を取る関数を作成しました($(atags[i]))。この関数は、新しい関数を返します!これにより、atags(links) と新しく読み込まれたファイルの両方にアクセスできるようになりました。 $('#standardImage'). 関数内で $('#standardImage') から href を抽出し、リンクの先頭に追加された画像の src として使用します。
前に述べたように、これはあまりスマートな方法ではありませんが、仕事は完了します。たまたま同じような問題を抱えていた次の初心者の助けになるかもしれません。