jquery load not reading string as variable (php hybrid)

I'm writing out a javascript string to be parsed by jquery - it works fine as an alert but not in the jquery load function

PHP:

$imgData = 'http://www.domain.com/_image.php/_MG_4156.jpg'  ;

which is a php script to generate a thumbnail on the fly

<script type='text/javascript' language='javascript' charset='utf-8'>
<!--
    var chart1img_".$i_gall." = new Image();
    var imgData   = '".$imgData."';

    $(chart1img_".$i_gall.").load(function () {
        $(this).hide();
        $('#thumb_img_div_".$i_gall."').removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the ima开发者_如何学Goge could not be loaded
        alert(imgData);
    }).attr('src', imgData); 
  //}).attr('src', 'http://www.domain.com/_image.php/_MG_4156.jpg'); 

//-->
</script>";

If I hardcore the string it works. If I use it as the imgData variable it fails, but the alert works using imgData

Tried string combos all ways. Defeated. Any ideas?

you need add php tags in your code

<script type='text/javascript' language='javascript' charset='utf-8'>
<!--
    var chart1img_"<?php echo $i_gall;?>" = new Image();
    var imgData   = '<?php echo $imgData?>';

    $("chart1img_<?php echo $i_gall;?>").load(function () {
        $(this).hide();
        $('#thumb_img_div_<?php echo $i_gall;?>').removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
        alert(imgData);
    }).attr('src', imgData); 
  //}).attr('src', 'http://clients.flatearth.co.uk/benhopper/project/_image.php/_MG_4156.jpg'); 

//-->
</script>";

Using closures will give you a cleaner code.

Also, use json_encode to send values to JavaScript.

For example,

echo "
<script type='text/javascript'>
(function() {

    var image   = new Image(),
        imgData = " . json_encode($imgData) . ",
        i_gall  = " . json_encode($i_gall) . ";

    $(image).load(function () {
        $(this).hide();
        $('#thumb_img_div_' + i_gall).removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
        alert(imgData);
    }).attr('src', imgData); 

})();
</script>";

This minimizes the number of embedded PHP value be defining them as JavaScript variables.

You can also put them in functions:

<script type='text/javascript'>
function loadAndShowImage(imgData, i_gall) {

    var image   = new Image()

    $(image).load(function () {
        $(this).hide();
        $('#thumb_img_div_' + i_gall).removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
        alert(imgData);
    }).attr('src', imgData); 

}
</script>

and then output just the dynamic parts:

echo "
<script type='text/javascript'>
    loadAndShowImage(" . json_encode($imgData) . ", " . json_encode($i_gall) . ");
</script>";

Not sure what the problem is other than it's one of the characters in the full variable?:

var imgData   = 'http://www.domain.com/_image.php/".$r_gall['image']."?width=145&height=205&cropratio=145:205&image=/images_cms/".$r_gall['image']."';

But I kept as much of the string in JS and just replaced the dynamic parts with PHP