6

I'm working on making an image slider that loads the image the user clicks on using jQuery. I have it working great in Chrome but when I tried it in firefox and IE it's not loading the image at all. Here's my code:

    $("img.clickable").click( function() {
    $("#image_slider").animate({opacity:1.0,left:200},"slow");
    $("#image_container").attr("src",event.target.src);
    ihidden = false;
});

When I try running this in firefox or IE it just doesn't load the image at all. Any ideas? :)

CaffeinatedCM
  • 754
  • 1
  • 11
  • 24

4 Answers4

10

You need to define the event in the arguments.

$("img.clickable").click( function(event) {
    $("#image_slider").animate({opacity:1.0,left:200},"slow");
    $("#image_container").attr("src",event.target.src);
    ihidden = false;
});

Otherwise it is going to use window.event.

alex
  • 479,566
  • 201
  • 878
  • 984
1

try using $(this).attr('src') instead of event.target.src

CrayonViolent
  • 32,111
  • 5
  • 56
  • 79
1

Try this :

target = (window.event) ? window.event.srcElement /* for IE */ : event.target
jwerre
  • 9,179
  • 9
  • 60
  • 69
  • Not really desirable when jQuery already abstracts that away. You should also check for `target` first, with a fallback on `srcElement`. – alex Feb 04 '12 at 22:28
0

$("img.clickable").click( function(e) { $("#image_slider").animate({opacity:1.0,left:200},"slow"); $("#image_container").attr("src",$(e.target).attr('src')); ihidden = false; });

This should work just fine

samccone
  • 10,746
  • 7
  • 43
  • 50