Question

I’m new to Javascript/Jquery and PHP and I’m experimenting with it. Basically, I’ve created a simple image gallery in which each picture is at an opacity of .4 until you mouse over it and it becomes 100% opacity. Now I’ve gone a step further and used PHP to scan a directory of images and add them to the list of pictures in the gallery. The current code looks like this:

$(document).ready(function(){

var i = 0;
var names;

function returndata(files){
    names = files;

    for(i=0; i < names.length ; i++){
        $('<li id="img_' + i + '"><img src="../Gallery_pictures/' + names[i] + '"/></li>').appendTo('#thumbnails ul');
    }       
}

 $.post('../php/read_directory.php',function(data){
    var files = $.parseJSON(data);
    returndata(files);
    });
});

The code works and adds the images to the list on the webpage, but how would I go about adding the Jquery fade to the newly created images? I’ve searched all over the place for an answer to this but maybe I’m just missing the answers. This and the image fade are in separate external Javascript files. Thanks in advance.

*EDIT:*Okay so I got it to work using your suggestions, but the problem now is that the script doesn’t start until an image is initially moused over. All the pictures start full opacity until moused over then they all become .4 opacity. Any way to fix this? I’m also going to try if I can easily do this in css.

*DOUBLE EDIT:*So I can easily do this with css and it works like I want it to. Thanks for the replies everyone.

Answer 1

Use on to set events on dynamically added content

$(document).on("mouseover", "#thumbnails img", function() {
    $(this).css("opacity", 1); 
});

$(document).on("mouseout", "#thumbnails img", function() {
    $(this).css("opacity", 0.4); 
});

If you’re using jQuery pre 1.7, then you can use delegate. Note that delegate takes the selector first, then the event name.

$(document).delegate("#thumbnails img", "mouseover", function() {
    $(this).css("opacity", 1); 
});

$(document).delegate("#thumbnails img", "mouseout", function() {
    $(this).css("opacity", 0.4); 
});

Avoid using live since it’s deprecated.