current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

So I am trying to add another css class called popup to an .each function.

jQuery:

$.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');
        });

     });

CSS

.popup
{
position:absolute;
top:0px;
left:0px;
margin:100px auto;
width:200px;
height:150px;
font-family:verdana;
font-size:13px;
padding:10px;
background-color:rgb(240,240,240);
border:2px solid grey;
z-index:100000000000000000;
display:none
}

Thank you for your help and this is my frist post by the way so sorry if i sound nooby.

share|improve this question
 
to which element do you want to add the class? the image? –  Arun P Johny Oct 26 '13 at 0:35
 
what is your question? –  Saturnix Oct 26 '13 at 0:35
add comment

1 Answer

up vote 0 down vote accepted 
...
$('#photo-' + imageDataNum).css('background-image', 'url(' + imgURL + ')').removeClass('fade-out').addClass('fade-in').addClass('popup');
...

or

    $('<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');
    }).addClass('popup');
share|improve this answer
 
Hey and thanks for the quick response the first solution work however it failed to display the image but when checking through console in chrome the images are there and the css class has been applied –  phippsy20 Oct 26 '13 at 1:23
 
Sorry actually I just realised i'm going about this the wrong way i think. I have another function called Popup and the whole purpose is it is meant to pop up the a div in the center of the screen when an image is clicked. –  phippsy20 Oct 26 '13 at 1:29
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.