Facebook images on website, editing jquery - php

Question

This is "my code" for pulling images from Facebook and displaying them.
But I want to wrap images around < a href="image.source" class="highslide" onclick="return hs.expand(this) >
Please help me outputting:
<a href="image.source" class="highslide" onclick="return hs.expand(this)>
<img src"image.source" width="167" height="167">
</a>
Original code:
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript">
$.getJSON('http://graph.facebook.com/261512740659107/photos').then(function (response) {
// 0-8, 0 returns the largest available images, 8 the smallest
var imageIndex = 4;
var images = _(response.data)
.chain()
.pluck('images')
.pluck(imageIndex)
.value();
console.log(images);
_(images).each(function (image) {
$('#image-container').append(
$('<img>').attr('src', image.source).attr('height', 167).attr('width', 167));
});
});
</script>

Answer 1

You can use the jQuery wrap() function to put the <a> tag around your <img> tags.
Just use appendTo() instead to get the instance of the new element so that you can then wrap() it.
$.getJSON('http://graph.facebook.com/261512740659107/photos').then(function (response) {
// 0-8, 0 returns the largest available images, 8 the smallest
var imageIndex = 4;
var images = _(response.data)
.chain()
.pluck('images')
.pluck(imageIndex)
.value();
_(images).each(function (image) {
$($('<img>').attr({'src': image.source, 'height': 167, 'width': 167})).appendTo('#image-container').wrap('<a href="' + image.source + '" class="highslide" onclick="return hs.expand(this);" />');
});
});