Replace section of href with jQuery

I have been searching for an answer but found nothing that fits my particular situation.

A stripped down example of what I'm working on can be found here: http://jsbin.com/qujojuriri/1/edit?html,js,output

So I am building an image gallery that uses a Flickr JSON feed to retrieve images from my account, so that in order to update the gallery on my website I just have to upload the image to Flickr with a certain tag.

$(document).ready(function() {
    $.getJSON(
        "http://api.flickr.com/services/feeds/photos_public.gne?id=125573694@N07&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/photos_public.gne?id=125573694@N07&lang=en-us&format=json&jsoncallback=?

Flickr adds a special suffix to the end of each image URL to determine the photo quality. For example, an image URL with the suffix "_m" will be smaller then the same URL with the suffix "_c".

What I would like to do is have the thumbnail images for my gallery to show at one quality, but then when I click on that thumbnail it opens a new tab with a higher quality version of the image. My problem is that with the JSON feed (link is at the bottom of the code snippet), it only provides the link to the "m" suffix. I am not interested in changing the contents of JSON feed to include other suffixes, but instead using jQuery to adjust the URL I've retrieved to replace the "_m" suffix with the "_c" suffix.

I've tried adding the following code after my initial jQuery to do this but it doesn't do anything.

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

To summarize: Right now, when I click on the images I've retrieved from the JSON feed, it opens the URL with a "_m" suffix, and I would like to use jQuery to change that to "_c". Thanks!

P.S. I only have a basic knowledge of jQuery so I'd love it if you could provide thorough answers or even perhaps edit the jsbin link I provided above with the corrected code. Thanks!

Solution

You can just replace the _m before assigning the image the link. Your code looks good I just added a line.

// 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'>");

Also remove the <img src='"+ item.media.m +"'> as it is redundant.

Demo:

$(document).ready(function() {
  $.getJSON(
    "https://api.flickr.com/services/feeds/photos_public.gne?id=125573694@N07&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>