#1 2011-10-13 20:39:36

grum
Équipe Piwigo
50% Nantes - 50% Paris
2007-09-10
2502

Diaporama en page d'accueil

Suite topic [Forum, topic 21042] Changer l'image de ma page d'accueil style "diaporama", faire un diaporama en page d'accueil comme sur mon site http://streetart.grum.fr

L'astuce est un peu compliquée...

1/ Créer un album virtuel
Créez un album virtuel, déclarez le comme privé.
Associez à cet album les photos que vous souhaiter voir défiler en diaporama.

Repérez le numéro identifiant votre album (quand vous êtes en modification sur l'album, regardez l'url de la page ; çà ressemble à quelque chose comme çà admin.php?page=cat_modify&cat_id=28 : ici le numéro identifiant l'album est 28)

2/ Créer une page additionnelle
Au préalable, installez le plugin [extension by P@t] Additional Pages

Définir pour le paramètre lien permanent quelque chose comme page_accueil
Cocher la case Remplace la page d'accueil de votre galerie
Définir le contenu de la page avec :

Code:

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

3/ Créer les fichiers javascript, CSS et PHP
Enregistrer le code suivant dans un fichier texte que vous enregistrerez sous le nom pageAccueil.js

Code:

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

déposez via FTP ce fichier dans le répertoire ./local/js de votre galerie (créez le répertoire au besoin)



Enregistrer le code suivant dans un fichier texte que vous enregistrerez sous le nom monFichierCSS.css

Code:

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

=> adaptez au besoin le CSS avec celui de votre site
déposez via FTP ce fichier dans le répertoire ./local/css de votre galerie (créez le répertoire au besoin)




Enregistrer le code suivant dans un fichier texte que vous enregistrerez sous le nom pp_ajax.php

Code:

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

=> pensez à modifier le numéro de l'album virtuel (ici 28) par le votre !!
déposez via FTP ce fichier dans le répertoire ./local/plugins/PP de votre galerie (créez le répertoire au besoin)


4/ Créer un plugin personnel
Au préalable, installez le plugin [extension by Piwigo Team] LocalFiles Editor ainsi que le plugin [extension by grum] Grum Plugin Classes

Dans l'onglet plugin personnel, rajoutez le code suivant :

Code:

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

==> attention, ici le répertoire local est défini 'en dur', c'est parce que je suis fainéant :-)
===> attention, adaptez le nom de votre lien permanent, ici c'est toujours l'exemple pour page_accueil

Il ne reste plus qu'à activez le plugin via [ Administration >> Plugin >> Gérer ]


Si je n'ai rien oublié et si vous avez suivi les instruction comme il faut, çà devrait être bon...


Mes photos avec Piwigo évidemment !
[ www.grum.fr ] [ photos.grum.fr ]

Hors ligne

#2 2011-10-15 23:01:47

pcc
Membre
2010-11-03
188

Re: Diaporama en page d'accueil

Bon j'ai tout lu et en appliquant à la lettre je dois pouvoir le faire.

Un truc me gêne: ==> attention, ici le répertoire local est défini 'en dur', c'est parce que je suis fainéant :-)
Ca veut dire quoi?


Créer son site photo? PIWIGO bien sûr!!

Hors ligne

#3 2011-10-15 23:17:32

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
14123

Re: Diaporama en page d'accueil

pcc a écrit:

Un truc me gêne: ==> attention, ici le répertoire local est défini 'en dur', c'est parce que je suis fainéant :-)
Ca veut dire quoi?

Alors être un fainiant c'est un peux dure à expliquer cela dépend des personnes :-D


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

#4 2011-10-15 23:19:52

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
14123

Re: Diaporama en page d'accueil

Tu parlais peux être de répertoire locel ?

Avec une seule installation de Piwigo, tu peux avoir une multitude de site qui on simplement chacun un répertoire local

si tu n'as rien modifié à Piwigo tes fichiers de conf et perso sont dans local donc ce que te propose Grum est OK


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

#5 2011-10-17 14:04:48

pcc
Membre
2010-11-03
188

Re: Diaporama en page d'accueil

ddtddt a écrit:

Tu parlais peux être de répertoire locel ?

Avec une seule installation de Piwigo, tu peux avoir une multitude de site qui on simplement chacun un répertoire local

si tu n'as rien modifié à Piwigo tes fichiers de conf et perso sont dans local donc ce que te propose Grum est OK

Merci, j'ai tout compris, comme je n'ai rien modifié à Piwigo ça devrait fonctionner. Bon, je me met au travail et reviendrai sur le fil si ça peut intéresser la communauté.


Créer son site photo? PIWIGO bien sûr!!

Hors ligne

#6 2011-10-17 21:07:20

pcc
Membre
2010-11-03
188

Re: Diaporama en page d'accueil

J'ai appliqué la procédure mais ça ne fonctionne pas... J'ai tout vérifié par rapport au tuto de Grum tout me semble correct mais rien n'y fait. N'ayant pas de connaissances dans le domaine, c'est un peu pas évident. Je pense avoir fait une erreur mais laquelle? Voici une capture d'écran de ma page d'accueil.


Images attachées

Dernière modification par pcc (2011-10-17 21:08:10)


Créer son site photo? PIWIGO bien sûr!!

Hors ligne

#7 2011-10-17 21:12:19

pcc
Membre
2010-11-03
188

Re: Diaporama en page d'accueil

Up
J'ai créé mes fichiers avec notepad++ v 5.9.3, ça ne pose pas de pb?


Créer son site photo? PIWIGO bien sûr!!

Hors ligne

#8 2011-10-18 12:26:45

Gotcha
Equipe Piwigo
Pierrelatte (26)
2007-03-14
13324

Re: Diaporama en page d'accueil

grum a écrit:

2/ Créer une page additionnelle
Au préalable, installez le plugin [extension by P@t] Additional Pages

Définir pour le paramètre lien permanent quelque chose comme page_accueil
Cocher la case Remplace la page d'accueil de votre galerie

Est-ce que ça a bien était effectué ?


Ayez comme premier réflexe de consulter le wiki.
Ensuite, veuillez effectuer une recherche sur le forum avant de poser votre question.

LE FAIRE EST LE REVELATEUR DE L'ETRE

Hors ligne

#9 2011-10-18 20:02:54

pcc
Membre
2010-11-03
188

Re: Diaporama en page d'accueil

Bonjour,

Pas de pb ma page additionnelle est bien cochée "remplace la page d'accueil"(j'avais déjà créé une page d'accueil avec additional page
Depuis, j'ai tout repris la procédure et apparemment je n'ai pas fait d'erreur mais  bon...


Créer son site photo? PIWIGO bien sûr!!

Hors ligne

#10 2011-10-18 21:27:01

grum
Équipe Piwigo
50% Nantes - 50% Paris
2007-09-10
2502

Re: Diaporama en page d'accueil

une étape que j'ai oublié de préciser...

le plugin personnel, il faut l'activer ;-)


Mes photos avec Piwigo évidemment !
[ www.grum.fr ] [ photos.grum.fr ]

Hors ligne

#11 2011-10-19 09:23:17

pcc
Membre
2010-11-03
188

Re: Diaporama en page d'accueil

grum a écrit:

une étape que j'ai oublié de préciser...

le plugin personnel, il faut l'activer ;-)

Bonjour,
Activer le plugin, ça j'aurais pu y penser... J'ai adapté mon fichier css pour le background et ça fonctionne.
Maintenant, j'aimerais supprimer la barre de menu supérieur pour laisser plus de place à l'image et que le visiteur entre dans les albums en cliquant sur l'image (exigeant en plus!).
Je suppose que ça se passe au niveau du code de mon additionnal page page_accueil, mais entre les fichiers css js et php et le plugin, je suis largué.
Voici le lien vers ma page d'accueil http://www.chochris-images.com/


Créer son site photo? PIWIGO bien sûr!!

Hors ligne

#12 2011-10-19 12:17:12

Gotcha
Equipe Piwigo
Pierrelatte (26)
2007-03-14
13324

Re: Diaporama en page d'accueil

Essayer de rajouter dans le fichier monFichierCSS.css le code suivant :

Code:

div#menubar {
  display: none;
}

Ayez comme premier réflexe de consulter le wiki.
Ensuite, veuillez effectuer une recherche sur le forum avant de poser votre question.

LE FAIRE EST LE REVELATEUR DE L'ETRE

Hors ligne

#13 2011-10-19 14:33:46

pcc
Membre
2010-11-03
188

Re: Diaporama en page d'accueil

Gotcha a écrit:

Essayer de rajouter dans le fichier monFichierCSS.css le code suivant :

Code:

div#menubar {
  display: none;
}

J'ai modifié le fichier monFichierCSS.css comme tu m'as indiqué mais rien n'y fait. Merci quand même!


Créer son site photo? PIWIGO bien sûr!!

Hors ligne

#14 2011-10-19 20:26:41

grum
Équipe Piwigo
50% Nantes - 50% Paris
2007-09-10
2502

Re: Diaporama en page d'accueil

#titrePageID {
    display: none;
}

mais çà enlève tout le menu, donc pas pratique pour les utilisateurs de se balader sur le site...

quand à cliquer sur la photo affichée pour se rendre dans l'album, faudra adapter le code proposé parce que ce n'est actuellement pas implémenté... (et çà ne va pas être forcément simple à mettre en oeuvre)


Mes photos avec Piwigo évidemment !
[ www.grum.fr ] [ photos.grum.fr ]

Hors ligne

#15 2011-10-20 14:04:43

Gotcha
Equipe Piwigo
Pierrelatte (26)
2007-03-14
13324

Re: Diaporama en page d'accueil

grum a écrit:

quand à cliquer sur la photo affichée pour se rendre dans l'album, faudra adapter le code proposé parce que ce n'est actuellement pas implémenté... (et çà ne va pas être forcément simple à mettre en oeuvre)

Pourquoi ne pas afficher un simple lien du style "Accéder à la galerie" sous les photos ?
;-)


Ayez comme premier réflexe de consulter le wiki.
Ensuite, veuillez effectuer une recherche sur le forum avant de poser votre question.

LE FAIRE EST LE REVELATEUR DE L'ETRE

Hors ligne

Pied de page des forums

Propulsé par FluxBB