Question

I’m trying to dynamically load an image into a div by clicking on another div. I’m trying to use the div’s id to call the matching photo and then have it fade in.

I can’t quite get it working, here is the fiddle http://jsfiddle.net/X82zY/36/

and I’ll also put the code here

HTML:

<div id="container">
    <img id="preload" onload="fadeIn(this)" src="#" style="display:none;" />
</div>

<div id="TDodd" class="iso"></div>

JS

function fadeIn() {
    $(this).fadeIn(1000);
}

$(".iso").click(function() {

  var id = $(this).attr('id');

    $('#container 
img').attr('src','http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

    fadeIn();

});

Thanks for any help I can get here.

Answer 1

Syntax error:

$('.iso').click(function() {
       ^

You can also get your elements by id and not by class.
Other problem is that your content is being dynamically created, so you have to use on instead, and bind the event to the document.

So your code should be:

$(document).on('click', '#TDodd', function() {
  var id = this.id;
  $('#preload').prop('src', 'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

  fadeIn('#TDodd');
});

demo