I have the following scenario.

I have a index.php page with the following JQuery code included

jQuery(document).ready(function(){
        jQuery('#sIMG img').click(function(){
              var currentSRC = jQuery(this).attr('src');

        var altSRC = jQuery(this).attr('title');

        var imgID = jQuery(this).attr('id');

        var cat = jQuery(this).attr('name');



        /*Fade, Callback, swap the alt and src, fade in */

        jQuery('#main').fadeOut('fast',function(){

            jQuery('#main').load("detail.php?id="+imgID+"&category="+cat);

            jQuery('#main').fadeIn('fast');

        });
        });
});

Now I have two div tags called #main and #right in the index.php page. When I click on a menu item right changes to a bunch of images, if I click on one of those images the above code should take effect and load into the main div, but it's just not working. the images are located within a div called sIMG. Any help will be appreciated