如何用灯箱实现点击计数器

Question

我想计算图像上的点击次数，并且该图像将显示在灯箱中。 这是我的代码：

//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...

<a href="uploadedimage/gallery/big/<?=$val['gallery_image']?>" rel="lightbox[100,200]" title="<?=ucfirst($val['category_name'])?>"><img src="uploadedimage/gallery/thumble/<?=$val['gallery_image']?>" onclick="hitcounter('<?=$val[image_id]?>')"/></a>
?>

我的问题是当我单击图像时它会返回错误。 请帮忙解决这个问题。提前致谢。您可以参考其他选项来同时显示灯箱和计数器吗？

Answer 1

问题是，当您的页面加载时。 Lightbox javascript 已经为您的标签生成动态节点。

要实现这一点，您可以尝试使用 onclick 函数。在该函数中，您应该使用您的图像 ID 来调用 AJAX 调用。您的 onclick 函数可能会在 lightbox 调用之后或 lightbox 调用之前调用。所以也请对此进行调试。

根据我的意见，这只是实现这一目标的一种方法。

Answer 2

将您的 php 代码放在另一个名为 hit_image.php 的文件中，然后将您的代码放在那里，

<?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);

}

现在您的 HTML 文件应该如下所示，

<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>

这只是提示的概述代码。