Question

I’ve created a comics website, http://www.hittingtreeswithsticks.com/, where if you click on a comic thumbnail it will take you to the full size of the image (the viewimage.php template).

On the viewimage.php template, I’m using javascript/jquery to cycle through images I’ve stored in an array so that users will not have to reload the page each time.

There seems to be two problems with this:

1) I also have a “like/dislike” feature I’d like to add… so that you can vote per image, as well as a facebook like button (so the user can like PER IMAGE). Currently, since jQuery is cycling through the images, it’s not updating the id for that image you clicked on. (In this image, if I press right arrow key to go next, the id should increment to 35).

2) Eventually I’d like to make money off of Ad Revenue. Sources say that if I use jQuery to get the next image, instead of reloading the page, the Ad won’t be refreshed… and I’ll generate a lot less ad revenue.

So, my question is… is it possible for Jquery to handle these issues, or do I have to do page refreshes to increment the IDs and refresh the Ads?

Thanks!

EDIT: I’ve added in

window.history.pushState(null, null, 'http://www.hittingtreeswithsticks.com/?action=viewimage&site=comics&id=imgIndex');

Code (this doesn’t seem to be working, and in fact blocks the “next” code from working)

    $("#next").click(function() {
        imgIndex++;
            if (imgIndex > imgArray.length-1) 
            {
                imgIndex = 0;
            }
            img.src = imgArray[imgIndex];
            window.history.pushState(null, null, 'http://www.hittingtreeswithsticks.com/?action=viewimage&site=comics&id=imgIndex');
    });

UPDATED:

Error:

Answer 1

Regarding your first problem, you can use pushState(). At the time you replace the image, you can also update the url. This adds a new history entry and replaces the url in the browser, but doesn’t actually reload the page. Example:

window.history.pushState(null, null, 'http://www.hittingtreeswithsticks.com/?action=viewimage&site=comics&id=N&cat=&title=TITLE');

(Just replace N and TITLE appropriately here). So that solves that. Note that this is not a jQuery feature, but vanilla javascript.

Regarding issue 2, it depends on how your ads are set up, but that’s probably the case that they won’t be automatically reloaded. In most cases, you can also reload the ads via javascript, but the specifics would depend upon the details of how your ads are served; you should probably post a separate question asking how to load ads asynchronously via javascript and give the specifics of how your ad server works.