trigger hitcounter with lightbox

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

Comments

  • acrylian Administrator
    edited May 15

    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 Administrator

    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 Member
    edited May 17

    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 Administrator
    edited May 18

    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();
    }
    
  • hi
    as I use fancybox in the zpBootstrap theme, I am interested by this function, if you can share it with other.

Sign In or Register to comment.