<div id="apContent">
  <div id="iDisplayContent1" class='displayContent' style="z-index:55;">
    <div id="theImgContainer1">
      <img src="" id="iImgDisplay1"/>
    </div>
  </div>
  <div id="iDisplayContent2" class='displayContent' style="z-index:50;">
    <div id="theImgContainer2">
      <img src="" id="iImgDisplay2"/>
    </div>
  </div>

    <div id="iDisplayNfo">
      <span id="iDisplayImgName">Image name</span>&nbsp<span id="iDisplayImgSep">#</span><span id="iDisplayImgNum">0</span>/<span id="iDisplayImgNb">0</span>
    </div>
</div>

function loadImg () {
  var
    datas = {
        imgUrl : [],
        imgCurrentLoad : -1,
        imgCurrentDisplay : -1,
        currentView:1,
        hiddenView:2,
        vIntervalID : 0,
        delay : 8000
      },

    initList = function ()
      {
        $('#iDisplayContent').css({opacity:0, visibility:'visible'});

        $.ajax(
          {
            type: "POST",
            url: "local/plugins/PP/pp_ajax.php",
            async: true,
            data: { ajaxfct:"public.pictures.getList", nb:15 },
            success:
              function(msg)
              {
                tmp=$.parseJSON(msg);
                for(var i=0;i<tmp.length;i++)
                {
                  datas.imgUrl.push(
                    {
                      url:tmp[i].url,
                      name:tmp[i].name,
                      width:0,
                      height:0
                    }
                  );
                }
                loadNext();
              }
          }
        );
      },

    loadNext = function ()
      {
        if(datas.imgCurrentLoad < datas.imgUrl.length-1)
        {
          var img = new Image();

          if(datas.imgCurrentLoad==1) displayFirst();

          datas.imgCurrentLoad++;
          $(img).bind('load',
            function ()
              {
                datas.imgUrl[datas.imgCurrentLoad].width=this.width;
                datas.imgUrl[datas.imgCurrentLoad].height=this.height;
                loadNext();
              }
            );
          img.src=datas.imgUrl[datas.imgCurrentLoad].url;
        }
      },

    displayFirst = function ()
      {
        datas.imgCurrentDisplay=-1;
        $("#iDisplayImgNum").html('1');
        $("#iDisplayImgNb").html(datas.imgUrl.length);
        $("#iDisplayNfo").css("display", "block");

        displayNext();

        datas.vIntervalID = window.setInterval(displayNext, datas.delay);
      },

    displayNext = function ()
      {
        datas.imgCurrentDisplay++;
        if(datas.imgCurrentDisplay>datas.imgCurrentLoad) datas.imgCurrentDisplay=0;

        //$("div.displayContent").css('visibility', 'visible');
        $("#iDisplayImgName").html(datas.imgUrl[datas.imgCurrentDisplay].name);
        $("#iDisplayImgNum").html(datas.imgCurrentDisplay+1);
        $("#iImgDisplay"+datas.hiddenView).attr('src', datas.imgUrl[datas.imgCurrentDisplay].url);

        $("#theImgContainer"+datas.hiddenView).css({width: datas.imgUrl[datas.imgCurrentDisplay].width+'px', height: datas.imgUrl[datas.imgCurrentDisplay].height+'px'});
        $('#iDisplayContent'+datas.hiddenView).fadeTo(1,1);
        $('#iDisplayContent'+datas.currentView).fadeTo(600,0,
          function ()
            {
              $(this).css('z-index', '50');
              $('#iDisplayContent'+datas.hiddenView).css('z-index', '55');

              if(datas.currentView==1)
              {
                datas.currentView=2;
                datas.hiddenView=1;
              }
              else
              {
                datas.currentView=1;
                datas.hiddenView=2;
              }
            }
        );
      };

  initList();
}


$(window).bind('load',
  function ()
  {
    var loader=new loadImg();
  }
);

div#apContent {
  max-width: 1024px;
  text-align: justify;
  margin-left:auto;
  margin-right:auto;
}


div#apContent div.displayContent {
  text-align:center;
  width:1024px;
  height:100%;
  position:absolute;
  background:#ffffff;
  opacity:0;
  filter:alpha(opacity=0);
}


div#apContent div#theImgContainer1,
div#apContent div#theImgContainer2 {
  border:8px solid #000000;
  display:block;
  margin-left: auto;
  margin-right: auto;
}
div#apContent div#iDisplayNfo {
  bottom: 24px;
  color: #999999;
  font-size: 25px;
  font-style: italic;
  padding: 8px;
  position: fixed;
  right: 0;
  display:none;
}
div#apContent span#iDisplayImgName {
  position: relative;
  left: 8px;
  top: 5px;
}
div#apContent span#iDisplayImgSep {
  left: 8px;
  position: relative;
  top: -5px;
}

div#apContent span#iDisplayImgNum,
div#apContent span#iDisplayImgNb {
  font-weight: bold;
  font-size: 125%;
  position: relative;
}
div#apContent span#iDisplayImgNum {
  left: 5px;
  top: -5px;
}
div#apContent span#iDisplayImgNb {
  left: -5px;
  top: 5px;
}

<?php
  // in this case, PHPWG_ROOT_PATH must be declared as an absolute path...
  define('PHPWG_ROOT_PATH',dirname(dirname(dirname(dirname(__FILE__)))).'/');

  define('IN_ADMIN', false);

  // the common.inc.php file loads all the main.inc.php plugins files
  include_once(PHPWG_ROOT_PATH.'include/common.inc.php' );
  include_once(PHPWG_PLUGINS_PATH.'GrumPluginClasses/classes/GPCAjax.class.inc.php');
  include_once(PHPWG_ROOT_PATH.'include/functions_mail.inc.php');

  class PP_Ajax extends CommonPlugin
  {
    /**
     * constructor
     */
    public function __construct($prefixeTable, $filelocation)
    {
      parent::__construct($prefixeTable, $filelocation);
      $this->checkRequest();
      $this->returnAjaxContent();
    }

    /**
     * check the $_REQUEST values and set default values
     *
     */
    protected function checkRequest()
    {
      global $user;

      if(!isset($_REQUEST['ajaxfct'])) $_REQUEST['ajaxfct']='';
      if(!isset($_REQUEST['errcode'])) $_REQUEST['errcode']='';

      // check if asked function is valid
      if(!($_REQUEST['ajaxfct']=='public.pictures.getList'
           )) $_REQUEST['ajaxfct']='';


      if($_REQUEST['ajaxfct']!='')
      {
        /*
         * check for public.pictures.getList
         */
        if($_REQUEST['ajaxfct']=="public.pictures.getList")
        {
          if(!isset($_REQUEST['nb'])) $_REQUEST['nb']=20;
        }
      }
    } //checkRequest


    /**
     * return ajax content
     */
    protected function returnAjaxContent()
    {
      $result="<p class='errors'>An error has occured</p>";
      switch($_REQUEST['ajaxfct'])
      {
        case 'public.pictures.getList':
          $result=$this->ajax_pp_public_picturesGetList($_REQUEST['nb'], 28); // replace 28 with your own album ID
          break;
      }
      GPCAjax::returnResult($result);
    }



    /**
     * return a list of pictures (picture url + page url)
     *
     * @param Int $nb : number of pictures to return (0 = no limits)
     *
     * @return String : json string of an array of pictures url
     */
    private function ajax_pp_public_picturesGetList($nb=0, $catId=0)
    {
      $returned=array();

      $sql="SELECT pi.path, pi.name
            FROM ".IMAGE_CATEGORY_TABLE." pic JOIN ".IMAGES_TABLE." pi ON pi.id = pic.image_id
            WHERE pic.category_id = ".pwg_db_real_escape_string($catId)."
            ORDER BY rand()";
      if($nb>0) $sql.=" LIMIT 0,".pwg_db_real_escape_string($nb).";";

      $result=pwg_query($sql);
      if($result)
      {
        while($row=pwg_db_fetch_row($result))
        {
          $returned[]=array(
            'url' => $row[0],
            'name' => ($row[1]==null)?'':$row[1]
          );
        }
      }

      return(json_encode($returned));
    }


  } //class


  $returned=new PP_Ajax($prefixeTable, __FILE__);
?>

  add_event_handler('loc_end_index', 'pp_Init', EVENT_HANDLER_PRIORITY_NEUTRAL+5);
  add_event_handler('loc_end_page_header', 'pp_AddHeaderItems');

  function pp_Init()
  {
    global $page, $template;
    
    if(isset($page['additional_page']) and 
       isset($page['additional_page']['permalink']) and
       $page['additional_page']['permalink']=="page_accueil")
    {      
      $template->assign('U_MODE_CREATED', "./index.php?/categories/created-monthly-list"); //duplicate_index_url($chronology_params, array('start', 'flat')));
      $template->assign('U_MODE_POSTED', "./index.php?/categories/posted-monthly-list");
    }
  }

  function pp_AddHeaderItems()
  {
    global $page;
        
    if(defined("IN_ADMIN")) return(false);
    
    GPCCore::addHeaderCSS('ppMonFichierCSS', 'local/css/monFichierCSS.css');
    
    if(isset($page['additional_page']))
    {
      if($page['additional_page']['permalink']=="page_accueil")
          GPCCore::addHeaderJS('ppPageAccueil', 'local/js/pageAccueil.js');
    }
  }