Loop through PHP array with Jquery event handlers

Question

Background:
I have an HTML form with an internal PHP processing script that takes checkbox categories and converts them into a string of directory locations of images that is passed into a glob() function.

Situation:
I have an array of image src paths from glob function
example

<?php
  $images //ARRAY OF IMG SRC PATHS
?>

I want to attach click and keyboard events to loop through $images array
example

$(document).ready(function(){
  $('#img_viewer').click(function(){
    //LOOP THROUGH $images array on click one at a time
  });
});

Answer 1

First of all I would separate PHP logic:

images.php

<?php
    //some logic here
    echo json_encode($images);
?>

your javascript:

$(#img_viewer).click(function(){
    $.ajax({
    url: 'images.php',
    type: 'post',
    dataType: 'json',
    success: function(response){
        $.each( response, function( key, value ) {
                //in [value] is your src of images
        });
        }
    });
}

Answer 2

Why dont you try this

$(#img_viewer).click(function(){
           $.ajax({
           method:'post',
           url: 'the url for the php file',
           data:{}, // you can pass any data that can used to your php file
           success:function(respose){
            // do something
        }
      });
    })

Answer 3

First convert PHP array of images to Javascript array

<?php $php_array = array(//images); $js_array = json_encode($php_array); echo "var javascript_array = ". $js_array . ";\\n"; ?>

And set counter to

var counter = 0;

And then

$(document).ready(function(){ $(document).click(function(){ console.log(javascript_array[counter]); counter++;});