How to implement hit counter with light box - php

Question

I want to count the number of hit on an image and also the image will show in a lightbox.
here is my code:
//image-show-content.php
<script>
function hitcounter(imgid)
{
//alert(imgid);
var imgid = imgid;
window.location.href ="image-show-content.php?img_id="+imgid;
}
</script>
<?php
if(!empty($_REQUEST['img_id']))
{
$show = "SELECT * FROM `tbl_image_gallery` WHERE image_id =".$_REQUEST['img_id']." ";
$result_show = mysql_query($show);
$row = mysql_fetch_array($result_show);
$new_click_count = $row['click_on_image'] +1;
$update_sql = "UPDATE `tbl_image_gallery` SET click_on_image =".$new_click_count." WHERE image_id=".$_REQUEST['img_id']."";
$result_sql= mysql_query($update_sql);
}
//image...
<img src="uploadedimage/gallery/thumble/<?=$val['gallery_image']?>" onclick="hitcounter('<?=$val[image_id]?>')"/>
?>
My problem is when I click on an image it return an error.
please help to solve it.Thanks in advance.Can you refer some other option to show light box and hit counter together.

Answer 1

Problem is, when your page loads. Lightbox javascript is already generating dynamic node for your tag.
To achieve this you can try with onclick function into . In that function you should call AJAX call with your image id. It would be possible that your onclick function may call after lightbox call OR before lightbox call. So please debug for this too.
This would be only one way to achieve this as per my opinion.

Answer 2

Place your php code in one another file called, hit_image.php and place your code there,
<?php
if(!empty($_REQUEST['image_id']))
{
$show = "SELECT * FROM `tbl_image_gallery` WHERE image_id =".$_REQUEST['image_id']." ";
$result_show = mysql_query($show);
$row = mysql_fetch_array($result_show);
$new_click_count = $row['click_on_image'] +1;
$update_sql = "UPDATE `tbl_image_gallery` SET click_on_image =".$new_click_count." WHERE image_id=".$_REQUEST['image_id']."";
$result_sql= mysql_query($update_sql);
}
Now your HTML file should be like follow,
<script type="text/javascript">
function counter(imageId)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","hit_image.php?image_id="+imageId,true);
xmlhttp.send();
}
</script>
<a onclick="counter(<?=$val[image_id]?>)" rel="lightbox[100,200]" title="<?=ucfirst($val['category_name'])?>"><img src="uploadedimage/gallery/thumble/<?=$val['gallery_image']?>" onclick="hitcounter('<?=$val[image_id]?>')"/></a>
This is just overview code for your hints.