2016-10-17 17 views
1

私は答えを探していますが、私の特定の状況に合ったものは何も見つかりませんでした。hrefのセクションをjQueryに置き換えてください。

Aは、私が働いているものの例をストリップダウンここで見つけることができます:http://jsbin.com/qujojuriri/1/edit?html,js,output

は、だから私はその順序でのように、私の口座から画像を取得するためにFlickrのJSONフィードを使用して画像ギャラリーを構築しています私のウェブサイトでギャラリーを更新する画像をFlickrに特定のタグでアップロードするだけです。

$(document).ready(function() { 
    $.getJSON(
     "http://api.flickr.com/services/feeds/[email protected]&lang=en-us&format=json&jsoncallback=?", { 
     tags: "favorite" 
     }, function(data) { 
      $.each(data.items, function(i, item) { 
       $("<img/>").addClass("class").attr("src", item.media.m).appendTo(
       "#favgallery").wrap(
       "<a href='"+ item.media.m +"' target='_blank'><img src='"+ item.media.m +"'>" 
       ); 
      }); 
    }); 
}); 

//JSON Feed: http://api.flickr.com/services/feeds/[email protected]&lang=en-us&format=json&jsoncallback=? 

Flickr adds a special suffix to the end of each image URL to determine the photo quality。たとえば、接尾辞「_m」の画像URLは接尾辞「_c」の同じURLよりも小さくなります。

ギャラリーのサムネイル画像をある品質で表示したいのですが、そのサムネイルをクリックすると、画像の高品質バージョンの新しいタブが開きます。私の問題は、JSONフィード(リンクはコードスニペットの最後にあります)では、接尾辞 "m"へのリンクのみを提供することです。私はJSONフィードの内容を他の接尾辞を含むように変更するのではなく、 "_m"接尾辞を "_c"接尾辞に置き換えるためにjQueryを使用してURLを調整しました。

これを行うために私の最初のjQueryの後に次のコードを追加しようとしましたが、何もしません。今、私はJSONフィードから取得してきた画像をクリックすると、それは「_m」接尾辞でURLを開き、私はそれを変更するjQueryのを使用したい:要約する

$('a').each(function(){ 
    this.href = this.href.replace('_m', '_c'); 
}); 

"_c"ありがとう!

P.S.私はjQueryの基本知識しか持っていないので、徹底的な回答を提供したり、上で訂正されたコードで提供されたjsbinリンクを編集することができれば、それが大好きです。ありがとう!

+0

のようなもの試してみてください: '$(この).ATTR( "HREF"、 "yourNewInfoを");' – Hackerman

答えて

0

イメージをリンクに割り当てる前に、_mを置き換えることができます。あなたのコードは良く見えます。私はちょうどラインを追加しました。

// use different link for a tags 
var imageLink = item.media.m.replace('_m', '_c'); 

// update div with images 
$("<img/>").addClass("class").attr("src", item.media.m).appendTo("#favgallery").wrap("<a href='" + imageLink + "' target='_blank'>"); 

<img src='"+ item.media.m +"'>も冗長ですので、削除してください。

デモ:

$(document).ready(function() { 
 
    $.getJSON(
 
    "https://api.flickr.com/services/feeds/[email protected]&lang=en-us&format=json&jsoncallback=?", { 
 
     tags: "favorite" 
 
    }, 
 
    function(data) { 
 
     $.each(data.items, function(i, item) { 
 

 
     // use different link for a tags 
 
     var imageLink = item.media.m.replace('_m', '_c'); 
 

 
     // update div with images 
 
     $("<img/>").addClass("class").attr("src", item.media.m).appendTo("#favgallery").wrap("<a href='" + imageLink + "' target='_blank'>"); 
 
     }); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="favgallery"></div>

+0

はよろしいですか? http://farm6.staticflickr.com/5296/29369593373_8cafa3b716_c.jpgは私に何のエラーも与えませんが、より大きなイメージを表示します。 – user2812130

+0

ありがとうございました!!!!完璧に動作します:) – user2812130

+0

コンピュータ/インターネットフリッツ一日中...それは動作します。とにかく私は答えとフィドルを更新しました。 – thekodester

関連する問題