How can I fix this javascript function to fix the error message

Question

I am trying to use darkbox and have ran into an error I do not understand. I am displaying a random image when the page loads or refreshes. That part works okay, different images occur. However the error console on Safari reports "Can't find variable:$, and nothing happens when I click the image. The line in question is in the script near the end, $(document).ready(function()

This is my code. I am not very good at javascript so I am not surprised if the answer is obvious to others. Sorry about the badly formatted code.

<?php
  $imageList = array(); 
  foreach(glob('randomimages/*.*') as $file) {
    $imageList[] = $file;
  }
  $image = $imageList[array_rand($imageList)];      
?>

<img src="<?php echo $image?>" id="darkboximg" data-darkbox="randomimages/<?php echo $image?>">  
<div id="darkboximg" style="width:100%"></div>
  <script>
    $(document).ready(function(){
      $("#darkboximg").load("$image");
    });
  </script>
</div>

Your jQuery Code seems to be obsolet. You get your random file trough PHP. So you can remove the `script` part entirely. — Sebastian, Feb 23 '17 at 09:46

score 0 · Answer 1 · answered Feb 23 '17 at 09:47

0

$ is not a javascript variable. $ is an alias to Jquery. So add jquery before your script.

answered Feb 23 '17 at 09:47

nanda kishore reddy

384
2
8

score 0 · Answer 2 · answered Feb 23 '17 at 09:52

Make sure JQuery is added.

In $("#darkboximg").load("$image"); should be $("#darkboximg").load( <?php echo '"' . $image . '"' ?>);

Try the following:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
  <?php
    $imageList = array(); 
    foreach(glob('randomimages/*.*') as $file) {
        $imageList[] = $file;
    }
    $image = $imageList[array_rand($imageList)];  
  ?>
  <img src="<?php echo $image?>" id="darkboximg" data-darkbox="randomimages/<?php echo $image?>">

  <div id="darkboximg" style="width:100%"></div>
  <script>
    $(document).ready(function(){
      $("#darkboximg").load( <?php echo '"' . $image . '"' ?>);
    });
  </script>
</body>
</html>

score 0 · Answer 3 · answered Feb 23 '17 at 09:55

 <?php

    $imageList = array(); 
    foreach(glob('randomimages/*.*') as $file) {
        $imageList[] = $file;
    }
    $image = $imageList[array_rand($imageList)]; 
    ?>
    <script>
    var image = <?php $imageList[array_rand($imageList)] ?>;        

</script>
<img src="<?php echo $image?>" id="darkboximg" data-darkbox="randomimages/<?php echo $image?>">

            <div id="darkboximg" style="width:100%"></div>


            <script>
                $(document).ready(function(){
                    $("#darkboximg").load(image);
                });
            </script>

            </div>`enter code here`

score 0 · Answer 4 · answered Feb 23 '17 at 10:15

Thanks to those who offered answers. The problem was on the line

<img src="<?php echo $image?>" id="darkboximg" data-darkbox="randomimages/<?php echo $image?>">

Changed it to

<img src="<?php echo $image?>" id="darkboximg" data-darkbox="<?php echo $image?>">

and now it works.

How can I fix this javascript function to fix the error message

4 Answers4