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

}

//图像...

<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功能可能会在灯箱呼叫之后或灯箱呼叫之前呼叫。所以请调试一下。

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

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>

这只是提示的概述代码。

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

2 个答案: