CODEWITHSUNDEEP
jqueryhtml
Aaron Benjamin
Aaron Benjamin

Reputation: 1389

How can I output an <img> wrapped in a list and anchor?

I'm attempting to pull in some pics from flickr to my site and created an unordered list similar to the following using random images from the feed.

This should look something like: 

<li><a href='#'><img src='imagesource'/></a></li>

I'm only seeing the <img='imagesource'/> being loaded to the page.

Here's what I've got so far...any help would be appreciated:

if (i <= defaults.limit-1)
{
    var large = (item.media.m).replace('_m.jpg', '_b.jpg');

    // Assign the image with attributes
    flickrImage = $("<img/>").attr({
        src: large,
        class: "gal-image"
    });

    // Push flickr images into array
    flickrImages.push(flickrImage);
}

$('.gal-image').prepend('<li><a class="slide-img" data-lightbox="random" href="' + large + '">');
$('.gal-image').append('</a></li>');

Upvotes: 0

Views: 67

Answers (3)

guest271314
guest271314

Reputation: 1

Try

var flickrImage  = $("<img>").attr({
        "src": large,
        "class": "gal-image"
    }).on("load", function(e) {
  $(this)
  .wrap("<li><a class=slide-img data-lightbox=random href=" + this.src + ">");
});
// as pointed out at comments , not appear where `img` inserted into document ?
$("body").append(flickrImage);


var img = $("<img>").attr({
        "src": "http://lorempixel.com/400/200",
        "class": "gal-image"
    }).on("load", function(e) {
  $(this)
  .wrap("<li><a class=slide-img data-lightbox=random href=" + this.src + ">");
  $("body").prepend($(this).parents("li")[0].nodeName)
});
$("body").append(img);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 2

T J
T J

Reputation: 43166

The .prepend() and .append() method inserts content inside each element in the set of matched elements, at beginning and end respectively. It doesn't wrap the content around the matched element.

For wrapping an element with an HTML structure,

Use .wrap() method as follows:

$('.gal-image').wrap('<li><a class="slide-img" data-lightbox="random" href="' + large + '"></a></li>');

The .wrap() function can take any string or object that could be passed to the $() factory function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. A copy of this structure will be wrapped around each of the elements in the set of matched elements

P.S: jQuery creates DOM elements using the HTMLString and inserts into DOM, it doesn't insert closing tags...

Upvotes: 1

Scimonster
Scimonster

Reputation: 33409

prepend and append do so inside the element, not around it. Let's just redo the logic a tiny bit, and it'll all be fixed.

$('.gal-image').appendTo('<a class="slide-img" data-lightbox="random" href="' + large + '">').parent().appendTo('<li>');

There, done! appendTo will add the set inside the set given to the argument. In this case, we append it to an <a> created on the fly. We then add the image's parent (<a>) to an <li> created right here.

Upvotes: 1

Related Questions