How can I add a simple counter function in javascript jquery?

Question

I'm using Shadowbox a jquery overlay and I wanted to count how many people are actually using the overlay. Thus, I would need a function that would write a counter to a file or sending a query through a php api...

has to be a a php url api because I cant use php on the server where the overlay is.

So I need help with executing a javascript function on the overlay click, tips on how to make a counter query through GET method.

Thanks

<script type="text/javascript">

Shadowbox.init({ handleOversize: "resize", overlayOpacity: 0.9

           });

Answer 1

When you bind your click handler to open the shadownbox, add a binding for an ajax call, such as this:

$.ajax({
   type: "GET",
   url: "stats.js",
   data: "name=urlOrNameOfItem"
 });

Replace urlOrNameOfItem with something meaningful so you can track what has been clicked. I assume you know in php how to handle a query string.

See JQuery docs: http://api.jquery.com/jQuery.ajax/

Answer 2

Before you display your Shadowbox throw an Ajax query to a php script which would save the current request in a db (including $_SERVER info for better analysis). This PHP script can fetch the current count of views for that image from the Db and update it accordingly.

I'm guessing the shadowbox function is called as a onclick event on your image so just add the Ajax call something like this:

 $.ajax({

   url: 'path-to-counter-script.php?i='+image-identifier,

   success: function() {

      //display shadowbox

   }
});