How to implement an onclick function to an array of divs

Question

I'm using the Flickr API and I want to create a onlick popup div for each image which shows the image in a larger form like this http://fancybox.net/.

How can I implement this so that the onclick function will be applied to each div in the div container?

The project: http://jsfiddle.net/phippsy20/rtzp8/

jQuery: so this statement makes the divs

for (var i = 0; i < 210; i++) {
  $('<div />').attr('id', 'photo-' + i).addClass('photo').appendTo('#photo-container');
}

This function loads the picture from flickr as the background image:

$.each(data.photos.photo, function(i, photo) {
        var imgURL = 'http://farm' + photo.farm + '.staticflickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_n.jpg';

        console.log(imgURL);

        // Pre-cache image
        $('<img />').attr({'src': imgURL, 'data-image-num': i}).load(function() {
           console.log('image loaded');
           var imageDataNum = $(this).attr('data-image-num');
           $('#photo-' + imageDataNum).css('background-image', 'url(' + imgURL + ')').removeClass('fade-out').addClass('fade-in');

        })

Duplicate of your own question http://stackoverflow.com/questions/19602643/popup-onclick-function-applied-to-an-array-of-divs — The Alpha, Oct 27 '13 at 01:09
put minimum relevant code, this question is awfully written. — Itay Moav -Malimovka, Oct 27 '13 at 01:09
Your question is not clear so you never got an answer from any of your questions. — The Alpha, Oct 27 '13 at 01:09
Yer I know its not very well written and I'm just on a bit of a tight time frame and obviously i'm a newby. I just really need some help with this and I not sure what should or shouldn't be included. — phippsy20, Oct 27 '13 at 01:28
Yes i understand that, I really am sorry but i'm just feeling the stress and need some help. What would you suggest I do? — phippsy20, Oct 27 '13 at 01:42

score 1 · Answer 1 · answered Oct 27 '13 at 03:08

1

Ok, if i understand your question, this may help you:

$("#heading-name div").each(function(i){        
    $(this).attr("onclick","popup("+i+")");
});

Demo working: http://jsfiddle.net/k2h8p/1/ (test the code locally in your computer)

answered Oct 27 '13 at 03:08

Duver

500
4
12

Ahh well not quite what i was looking for, sorry about this but i'm finding this really hard to explain what is going on with my code so what i want it to look like is this: http://fancybox.net/ . And ill try and update the post to try and refine it a bit. – phippsy20 Oct 27 '13 at 04:57
I'm not level 5 yet so I'm unable to at the moment. – phippsy20 Oct 27 '13 at 21:33

How to implement an onclick function to an array of divs

1 Answers1