Question

I have a comics website which loops through all images in a db and displays them as thumbnails. The user can click on one of those images to see it in normal size on a viewcomic.php template.

I’d like to allow users to press left and right arrows to navigate images.

In viewcomic.php, I have the following javascript which only runs when I comment out any php.

     //so if I comment out this line, it will run fine 
var imgArray = [<?php echo implode(',', getImages()) ?>];

$(document).ready(function() {
    var img = document.getElementById("theImage");
    alert("run");
    var imgIndex = 0;
    $(document).keydown(function (e) {
        if (e.which == 39) {
            alert("next image");
            img.src = imgArray[imgIndex++]
        }

    });
}); 

In firebug, I’m getting the following error:

invalid regular expression flag a
[Break On This Error]   

Referring to:

 var imgArray = [/images/all_comics/'Number_1.jpg',/images/all_comics/'Number_2.j...

But, Firebug shows that imgArray seems to be properly filled with jscript-readable strings:

 var imgArray = [/images/all_comics/'Number_1.jpg',/images/all_comics/'Number_2.jpg',/images/all_comics/'Number_3.jpg',/images/all_comics/'Number_4.jpg',/images/all_comics/'Number_5.jpg'];

Any ideas would be appreciated!

Thank you!

Answer 1

As the Firebug error states, because your array values are quoted incompletely, it parses them as faulty regular expressions because of the slashes which are regexp delimiters.

Instead of

/images/all_comics/'Number_1.jpg'

you need to quote the whole value as

'/images/all_comics/Number_1.jpg'