trigger hitcounter with lightbox

davidarnoult

Hello,

I have integrated fancybox3 in my theme (yes it works fine!) and I wish now to use the fancybox javascript event (afterShow) to increment the hitcounter of the displayed image in Zenphoto database.

The idea is to create a js function, that send a http request to a php script that would add 1 to hitcounter. This mechanism used to run fine with Menalto gallery2.

Js function in album.php

function counter(itemId) {
        alert(itemId);

        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()
        {
          
        }
        xmlhttp.open("GET","/counter.php?id="+itemId,true);
        xmlhttp.send();
    }

I have found in extension slideshow2 slideshow-counter.php that could be the base for counter.php I would need to adjust to increment the hitcounter.

require_once("../../functions.php");

$album_name = sanitize($_GET["album"]);
$img_name = sanitize($_GET["img"]);

if ($album_name && $img_name ) {
    $album = newAlbum($album_name);
    $image = newImage($album, $img_name);
    //update hit counter
    if (!$album->isMyItem(LIST_RIGHTS)) {
        $hc = $image->getHitcounter()+1;
        $image->set('hitcounter', $hc);
        $image->save();
    }
}

Any idea if that could work ? Any other simpler solution between JS and PHP/ZP?

Thanks for your feedback...

acrylian

I think that slideshow counter is not used at all and was forgotten to be removed. The problem is that it requires a bit more setup.

You are on the right track in general. You basically have to send the request to the current page (I would use POST instead of GET).

Since we have jQuery on board you could use its ajax request facility (which also should cover those compatibility issues like the ActiveX stuff - is that really still used?).

Use a unique POST index like "mysite_fancybox", then also submit the hitcount, the album name and the image name. Then you should be able to use code like that from the counter within your theme's functions.php. If you don't use a custom theme I generally recommend a plugin. Then you don't have to include the main functions.php to setup the necessary context.

Btw, there are plans to replace the current Colorbox plugin with fancybox.

acrylian

To add if you submit the data only on the current album or single image page you basically don't need to submit the image as that is known via the global object. On the single image page you even would already know the image by that.

davidarnoult

Thanks @acrylian. One thing I don't get: If I submit my parameters ID+Image+Album name (actually I just need the image ID) using AJAX to the current page album.php, how can I call my function HitCounter defined in my theme functions?

So basically, If I sum up, in album.php, I should have

• JS fancybox to call function counter() one the event afterShow
• JS function counter() to pass ZP parameters (ID+image name) to the current page (album.php) using AJAX or xmlhttp POST

In my theme functions.php, I would have

• Function sethitcounter (like in slideshow-counter.php) to get parameters from POST to hitcounter.

Is that correct?

I don't understand the index mysite_fancybox detail (sorry about my developer limitations..)

Good to hear there's a plan to integrate fancybox in the future...

Thanks for helping

acrylian

I don't understand the index mysite_fancybox detail (sorry about my developer limitations..)

This is just to make sure you are really getting the values from your form. If another form also uses $_GET or $_POST['album'] you could accidentally fetch those values which may cause errors if those are different. Alternatively you could submit the image id uniquely named like 'yoursite_hitcounter_imageid'. Let's work with that as an example.

AJAX or xmlhttp POST

Technically basically just different names. I mentioned ajax because the jQuery functionalitly is named like that.
http://api.jquery.com/jquery.ajax/

So on the fancybox afterShow even you could direcltty do a request possible (sorry, not familar with all fancybox details). That would submit to the current page.

Basically in your theme functions.php you would have code similar to the counter from the slideshow. Something like this should work:

if(isset($_POST['yoursite_hitcounter_imageid']))) { // your value was submitted.
  $imageid = sanitize_numeric($_POST['yoursite_hitcounter_imageid']));
  $image = getItemById('images', $imageid); // gets the object
  $hc = $image->getHitcounter()+1;
  $image->set('hitcounter', $hc);
  $image->save();
}

vincent3569

hi
as I use fancybox in the zpBootstrap theme, I am interested by this function, if you can share it with other.

davidarnoult

Hello,

Thanks. I just need a last litlle help to complete the job ;-)

I have published the suggested code in functions.php of my theme litterally.

In the album.php, I have this javascript function which is called by the lightbox event afterShow:

function counter(itemId) {
alert(itemId);

    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","/themes/mythemepath/functions.php?yoursite_hitcounter_imageid="+itemId,true);
    xmlhttp.send();
}

ItemID value in alert is OK and correct. But the GET on the php file does not seem to work and counter is not hit...

Is it the right way to implement the code? Ho to debug this case?

Thanks for your help.

davidarnoult

here is the code in functions.php

if(isset($_POST['yoursite_hitcounter_imageid'])) { // your value was submitted.
$imageid = sanitize_numeric($_POST['yoursite_hitcounter_imageid']);
print $imageid;
$image = getItemById('images', $imageid); // gets the object
$hc = $image->getHitcounter()+1;
$image->set('hitcounter', $hc);
$image->save();
}


acrylian

You need to use your site's url instead of the deep link to the functions.php file as that of course lacks all context that way:
yoursite.com?yoursite_hitcounter_imageid=itemId

davidarnoult

Thanks for your help. I have integrated your change. But it required some more tweaks.

Finally, by replacing POST by GET in functions.php, it works!


if(isset($_GET['yoursite_hitcounter_imageid'])) { // your value was submitted.

$imageid = sanitize_numeric($_GET['yoursite_hitcounter_imageid']);
$image = getItemById('images', $imageid); // gets the object
$hc = $image->getHitcounter()+1;
$image->set('hitcounter', $hc);
$image->save();

}

I will clean and optimize the code and share it with @vincent3569 if he could integrate this in his theme ;-)

Thanks anyway for your availibility and great support ;-)

ZenPhoto is awesome!

acrylian

Yes, you need to check GET since you used GET in your JS code (didn't look at that part, sorry) ;-)

xmlhttp.open("GET","/themes/mythemepath/functions.php?yoursite_hitcounter_imageid="+itemId,true);

Glad to be able to help ;-)