StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POApplying Jquery to dynamically created images
text
Body
copied!<p>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:</p> <pre><code>$(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); }); }); </code></pre> <p>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.</p> <p>*<em>EDIT:</em>*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.</p> <p>*<em>DOUBLE EDIT:</em>*So I can easily do this with css and it works like I want it to. Thanks for the replies everyone.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload