Search code examples
javascriptjqueryflickr

jQuery Flickrush - Wrapping <li> around the image

I have this div and unordered list:

<div id="flickr">
    <ul></ul>
</div>

I'm using this plugin - https://github.com/philipbeel/Flickrush

Here is the Javascript to make it work:

$(function() {
$("#flickr ul").flickrush({
    limit:20,
        id: "xxxxxxxx@xxx",
        random: false,
        ssl: true
}); 
});

Now it returns an <img> element only, but i need it to return a <li><img></li> for each result, as I have styled the <li> in a very specific way. I know it's this file i need to edit, but can't seem to figure out how to wrap the image in a list item. Any help?

Solution

  • Replace lines 59-63:

    flickrImage = $("<img/>").attr({
    src: item.media.m,
    alt: item.tags
});

    with:

    flickrImage = $('<li />').append(
    $("<img/>").attr({
        src: item.media.m,
        alt: item.tags
    })
);

    This uses .append() to append the img element to a newly created li.

    Here it is working: http://jsfiddle.net/33GVs/