Binding two array elements into one

Question

I have a issue which is hurting my head cant think how to do it. I have the following feed.

[{
    "title": "thumb_36cr8350.jpg",
    "url": "http://example.com/s3images/thumb_36cr8350.jpg",
}, {
    "title": "large_36cr8352.jpg",
    "url": "http://example.com/s3images/large_36cr8350.jpg",

}, {
    "title": "thumb_36cr8358.jpg",
    "url": "http://example.com/s3images/thumb_36cr8358.jpg",
}, {
    "title": "large_36cr8360_a.jpg",
    "url": "http://example.com/s3images/large_36cr8358.jpg",

}]

which i am looping through

var thumb = "<ul id='thumbs'>";
$.each(response, function (i, item) {
    var params = baseName(item.title).split("_");
    if (params[0] === 'thumb') {
        thumb += '<li><a class="group1" href="{this need to be the large thumb}"><img src="' + item.url + '" width="75" height="75"/></a></li>';
    }
});
thumb += "</ul>";
$('.conatiner').html('<div id="wrap">' + thumb + '</div>');

function baseName(str) {
    var base = new String(str).substring(str.lastIndexOf('/') + 1);
    if (base.lastIndexOf(".") != -1)
        base = base.substring(0, base.lastIndexOf("."));
    return base;
}

I need to somehow push the large pic into the href of the list for the Lightbox effect.

Cannot for the life of me think how to do this.

Any help please

score 1 · Accepted Answer · answered Jul 08 '13 at 13:44

1

Tell me if this is what you're looking for:

var thumb = "<ul id='thumbs'>";
$.each(response, function (i, item) {
    var params = baseName(item.title).split("_");
    if (params[0] === 'thumb') {
        thumb += '<li><a class="group1" href="#{url}"><img src="' + item.url + '" width="75" height="75"/></a></li>';
    } else {
        thumb = thumb.replace("#{url}", item.url);
    }
});
thumb += "</ul>";
$('.conatiner').html('<div id="wrap">' + thumb + '</div>');

function baseName(str) {
    var base = new String(str).substring(str.lastIndexOf('/') + 1);
    if (base.lastIndexOf(".") != -1)
        base = base.substring(0, base.lastIndexOf("."));
    return base;
}

answered Jul 08 '13 at 13:44

nicosantangelo

13,216
3
33
47

1

It depends on order in which items are passed in response... Just a note. – Olegas Jul 08 '13 at 13:45
Yes, I did it with the array the OP provided in mind (to keep it simple) – nicosantangelo Jul 08 '13 at 13:47
the output i am getting from console.log(thumb); is 12
– user1503606 Jul 08 '13 at 14:13
Uhm, that's weird, it's working for me with the response you provided, look: http://jsfiddle.net/VZGts/1/ – nicosantangelo Jul 08 '13 at 14:14
I guess it could be the response, try `console.log(response)`, and see what you get :) – nicosantangelo Jul 08 '13 at 14:22
Thankyou i managed to get it to work by swapping it around instead of thumb using large works nice now :0 – user1503606 Jul 08 '13 at 14:29

Binding two array elements into one

1 Answers1