Une galerie pour pluxml basé de EasyGallery

Frédéric · avril 2010

Voici une petite galerie que j'ai adapté à partir de EasyGallerie.

Pour cela, télécharger EasyGallerie_Pluxml.v.4.3.1.zip 53Kb et dé-zippé le dans votre dossier plugins (le créer s'il n'existe pas).

Dans votre template "header" de votre thème, rechercher:

</head>

Ajouter avant:

<?php include(PLX_ROOT.'/plugins/EasyGallery/easygallery_header.php'); # On Ajoute EasyGallery ?>

Puis créer une page statique et ajoutez y le code suivant:

<?php
if(!defined('PLX_ROOT')) exit;
include(PLX_ROOT.'/plugins/plx.easygallery.php'); # On Ajoute EasyGallery	
?>

Le principe est simple, vous configurer les lignes suivante du fichier plx.easygallery.php

// Dossier Root (peut aussi être une URL, ex: http://www.monsite.com/gallery)
$root_dir = "EasyGallery"; 

// Nombre de Colonnes pour les miniatures
$columns = 4;

// Taille des miniatures en pixel (largeur)
$thumbwidth = 160;

// Fonction Slideshow 0=non 1=oui
$slideshow = 0;

Vous envoyez vos images dans différents dossier cela permet de pouvoir choisir la galerie via un selecte sur la page statique.

Ensuite le script génère les miniatures tout seul de la taille qu'on auras demandé.

Édite: Sujet à jour,merci à Lewo pour l'aide

stribouille · avril 2010

Chez free lors de l'appel de ma page statique j'ai cette erreur:
Unable to access .//plugins/plx.easygallery.php

cf cette page de test:
http://stephane.tribouillet.free.fr/?static6/test

Je suis preneur de toute information et j'ai bien suivi toutes les directives

J'utilise clearbox(http://1loup.net/index.php/2008/05/08/1202-clearbox-et-shadowbox-en-remplacement-de-lightbox2) sinon qui marche (même avec les vidéos) mais il faut se taper des lignes de codes en pagaille en rajoutant des balises comme par exemple dans cette page: http://stephane.tribouillet.free.fr/?article56/photos-du-jour :
<a href="data/images/buis_shohin/200310/buis_shohin.jpg" rel="clearbox[shohin]" >
<img src="data/images/buis_shohin/200310/buis_shohin.jpg" alt="" /></a>
<br /><br />

Frédéric · avril 2010

Tu n'as pas de problème avec la génération des miniatures dans médias de ton admin ?

Car du coup sur free je ne t'assure pas la compatibilité du script étant donné que le script demande le chmodd 777 de ton répertoire image et pourvoir créer le dossier "thumbails".

stribouille · avril 2010

Je n'ai pas créé de dossier images spécifiques, c'est peut être de çà que viens le problème?
Pourtant lorsque j'utilise la médiathèque intégré aucun souci pour la création des miniatures.

Les images que je veux voir sous forme de galerie fonctionnent très bien avec simpleviewer mais c'est un projet à part entières.

Lewo · avril 2010

Il y a un erreur dans ton code Fred :

<?php
if(!defined('PLX_ROOT')) exit;
include(PLX_ROOT.'/plugins/plx.easygallery.php'); # On Ajoute EasyGallery    
?>

C'est correct seulement dans l'archive que tu donne le fameux fichier "plx.easygallery.php" est nommé en "plx.easygallerie.php" donc, soit il faut mettre ça dans sa page statique :

<?php
if(!defined('PLX_ROOT')) exit;
include(PLX_ROOT.'/plugins/plx.easygallerie.php'); # On Ajoute EasyGallery    
?>

Soit renommer directement le fichier dans /plugins

Dans tous les cas, moi j'ai cette erreur :

Fatal error: Call to undefined function printError() in /pluxml/plugins/plx.easygallerie.php on line 94

...

Frédéric · avril 2010

Bonjour Lewo, merci de ton retour.

En effet belle boulette de nom de fichier avec un mélange de français/anglais ^^Donc renommer le fichier plx.easygallery.php contenus dans plugins.

Pour ton erreur tu a dus renseigner un mauvais répertoire dans $root_dir ou celui ci ne contiens aucunes images (Ton erreur d'origine ca), dans mon exemple le dossier "EasyGallery" contenant d'autre dossier avec images ce trouve a la racine.

@stribouille
Comme dis lewo une erreur de nom c'est glissé, si tu as bien corrigé le nom de fichier alors je soupçonne aussi ton nom de path ou ce trouve les images (.//plugins/plx.easygallery.php) =>donnerais plutôt (plugins/plx.easygallery.php)

Lewo · avril 2010

L'archive proposée est à revoir Fred ! J'ai compris d'ou viens l'erreur :

Call to undefined function createthumb()

La fonction en question est appelé dans le footer "easygallery_footer.php" donc forcément ça bloque : la fonction est introuvable : on arrête l'exécution du script... Il faut basculer la fonction createthumb() dans le header. Au final nous avons donc :

Dans /plugins/EasyGallery > easygallery_header.php :

<style type="text/css">
BODY{margin:0 auto;}
*{margin:0;padding:0;}
.form{font-size:0.9em;margin:0 0 0 8px;}
.thumbnails{background-color:#FFF;border:#333 2px solid;}
.error{background-color:#999;width:100%;font-size:1.0em;font-weight:bold;padding:30px 0 30px 20px;}
.link{text-align:center;text-decoration:none;color:#666;font-size:0.8em;padding:20px;}
</style>
<script type="text/javascript" src="plugins/EasyGallery/slimbox/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="plugins/EasyGallery/slimbox/js/slimbox2.js"></script>
<link rel="stylesheet" href="plugins/EasyGallery/slimbox/css/slimbox2.css" type="text/css" media="screen" />
<?php
function printError($text)
{
  echo "<div class=\"error\">";
  echo "<span class=\"content\">ERROR: $text</span>";
  echo "</div>";
  exit();
}

function createthumb($name,$file,$maxsize)
{
  $maxsize += 8;
  list($width, $height) = getimagesize("$name/$file");
  $width = min($width, $height);
  $tn = imagecreatetruecolor($maxsize, $maxsize);
  $image = imagecreatefromjpeg("$name/$file");
  imagecopyresampled($tn, $image, 0, 0, 0, 0, $maxsize, $maxsize, $width, $width);
  if(!is_dir("$name/thumbnails"))
  {
    mkdir ("$name/thumbnails", 0777);
  }
  imagejpeg($tn, "$name/thumbnails/tn_$file", 90);
  return true;
}
?>

Toujours dans Dans /plugins/EasyGallery > easygallery_footer.php :

<script>
<!--
var zoom = 4;
var speed = 4;
var real = 0;
var intervalIn;
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++)
{
  if (divs[i].id == 'livethumbnail')
  {
	var myimg = divs[i].getElementsByTagName('img')[0];
	myimg.smallSrc = myimg.getAttribute('src');
	myimg.smallWidth = parseInt(myimg.getAttribute('width'));
	myimg.smallHeight = parseInt(myimg.getAttribute('height'));
	divs[i].onmouseover = scaleIn;
	divs[i].onmouseout = scaleOut;
	if (!myimg.smallWidth)
    {
    <?php
    if (isset($image)){
	  if ($image[0] > $image[1])
	  {
        echo "myimg.smallWidth = $image[0];\n";
        echo "myimg.smallHeight = $image[1];\n";
      }
      else
	  {
        echo "myimg.smallWidth = $image[1];\n";
 	    echo "myimg.smallHeight = $image[0];\n";
      }
	}
    ?>
      real = 0;
    }
    else
    {
  	  real = 1;
    }
  }
}

function scaleIn()
{
  var myimg = this.getElementsByTagName('img')[0];
  myimg.style['zIndex'] = 100;
  myimg.src = myimg.smallSrc;
  var count = 0;
  var real = 0;
  intervalIn = window.setInterval(scaleStepIn, 1);
  return false;

  function scaleStepIn()
  {
	var widthIn = parseInt(myimg.style['width']);
	var heightIn = parseInt(myimg.style['height']);
	var topIn = parseInt(myimg.style['top']);
	var leftIn = parseInt(myimg.style['left']);
	if(widthIn >= heightIn) {
	  widthIn += speed;
	  heightIn += Math.floor(speed * (3/4));
	  topIn -= (Math.floor(speed * (3/8)));
	  leftIn -= (speed/2);
	}
	else
	{
	  widthIn += Math.floor(speed * (3/4));
	  heightIn += speed;
	  topIn -= (speed/2);
	  leftIn -= (Math.floor(speed * (3/8)));
	}
	myimg.style['width'] = widthIn;
	myimg.style['height'] = heightIn;
	myimg.style['top'] = topIn;
	myimg.style['left'] = leftIn;
	count++;
	if (count >= zoom)
	  window.clearInterval(intervalIn);
  }
}
function scaleOut()
{
  window.clearInterval(intervalIn);
  var myimg = this.getElementsByTagName('img')[0];
  myimg.src = myimg.smallSrc;
  myimg.style['zIndex'] = 50;
  var interval = window.setInterval(scaleStepOut, 1);
  return false;

  function scaleStepOut()
  {
	var width = parseInt(myimg.style['width']);
	var height = parseInt(myimg.style['height']);
	var top = parseInt(myimg.style['top']);
	var left = parseInt(myimg.style['left']);
	if(width >= height) {
	  width -= speed;
	  height -= Math.floor(speed * (3/4));
  	  if(width < myimg.smallWidth + 4) {
	    myimg.style['width'] = myimg.smallWidth;
	    myimg.style['height'] = myimg.smallHeight;
	    myimg.style['top'] = 0;
	    myimg.style['left'] = 0;
		myimg.style['zIndex'] = 1;
		window.clearInterval(interval);
	  }
	  else{
	    myimg.style['width'] = width;
	    myimg.style['height'] = height;
	    myimg.style['left'] = left + (speed/2);
	    myimg.style['top'] = top + (Math.floor(speed * (3/8)));
	  }
	}
	else
	{
	  width -= Math.floor(speed * (3/4));
	  height -= speed;
	  if(real==1)
	  {
	    if(width < myimg.smallWidth + 4)
	    {
	      myimg.style['width'] = myimg.smallWidth;
	      myimg.style['height'] = myimg.smallHeight;
		  myimg.style['top'] = 0;
	      myimg.style['left'] = 0;
		  myimg.style['zIndex'] = 1;
	      window.clearInterval(interval);
		}
		else{
		  myimg.style['width'] = width;
	      myimg.style['height'] = height;
	      myimg.style['top'] = top + (speed/2);
	      myimg.style['left'] = left + (Math.floor(speed * (3/8)));
		}
	  }
	  else
	  {
	  	if(height < myimg.smallWidth + 4)
	    {
	      myimg.style['width'] = myimg.smallHeight;
	      myimg.style['height'] = myimg.smallWidth;
		  myimg.style['top'] = 0;
	      myimg.style['left'] = 0;
		  myimg.style['zIndex'] = 1;
	      window.clearInterval(interval);
		}
		else{
		  myimg.style['width'] = width;
	      myimg.style['height'] = height;
	      myimg.style['top'] = top + (speed/2);
	      myimg.style['left'] = left + (Math.floor(speed * (3/8)));
		}
	  }
	}
  }
}
//-->
</script>

Et voilà... Le reste est correct. J'ai refait une archive (avec les corrections qui vont bien) à télécharger ici :

> lien mort

On peu aussi très bien se passer du easygallery_footer.php (en basculant tout le code dans le header).

Il est aussi à noter que l'on peu modifier easygallery_header.php pour definir une feuille de style placé directement dans le repertoire de notre thème courant (et ainsi pour modifier directement via l'admin le style de la galerie)...

Frédéric · avril 2010

Hé hé merci Lewo

je regarde çà de plus prés mais si on suis le script j'ai bien suivit la règle et tout la partie createthumb et dans le footer.

Par contre ca marche mais pas très propre étant donné que tu ajoute des nuisibles entre <head>.

Merci en tout cas d'avoir trouvé le soucis

Je remet l'archive à jour dans le 1er message.

Cette fois j'ai pré-réglé le path dans data/images ce qui permet l'envoi et la création de répertoire depuis l'admin.

Chez moi l'effet js ne fonctionne pas au survol des images.

Sinon tout est ok pour le reste et traduit.

Tu as raison l'include au footer sert a pas grand chose car normalement le js c'est aussi entre les balises <head> hormis pour des script qui gère des statistiques.

Lewo · avril 2010

Ton archive n'est pas complète Fred (et la mienne était vide) quel bande de naz on fait quand même : travail précipité = travail à ch**** ! De toute manière il va falloir reprendre tout ça plus proprement :

- Virer le footer (basculer le code dans le header)
- Passer le CSS dans le fichier thème
- Résoudre le problème de la Slimbox
- Virer le code inutile en vue d'alléger le plugin

J'y regarderais dans le week-end à moins qu'on passe avant moi

gcyrillus-nomade · avril 2010

Fred a écrit:

Tu as raison l'include au footer sert a pas grand chose car normalement le js c'est aussi entre les balises <head> hormis pour des script qui gère des statistiques.

En fait , il n'est pas mauvais ni contre indiqué de charger ou appeler un js qu'une fois l'architecture html du document chargée par le naviguateur , d'autant plus que si ce sont des script qui s'active a l'evenement onload de body , autant privilegier l'affichage du contenu avant de charger un framework js .
Si la balise <link> ne vaut que pour <head> , la balise <script> prend place dans le document sans probleme .

++ , GC

stribouille · avril 2010

Lewo a écrit:
Dans tous les cas, moi j'ai cette erreur :
Fatal error: Call to undefined function printError() in /pluxml/plugins/plx.easygallerie.php on line 94
...

J'ai corrigé le nom du fichier merci Lewo mais ai la même erreur que toi

Quelqu'un a-t-il une solution?

Lewo · avril 2010

stribouille > Tout n'est pas encore très au point. Le plugin fonctionne de manière relativement aléatoire pour le moment (il faut bidouiller ça et là pour le faire fonctionner).

J'essayerai de proposer un plugin fonctionnel prochainement.

gcyrillus-nomade > "autant privilegier l'affichage du contenu avant de charger un framework js" effectivement. Autant garder l'appel footer donc. Merci

stribouille · avril 2010

Merci Lewo j'attends patiemment alors

Frédéric · avril 2010

Hum en quoi elle n'est pas complète l'archive Lewo ?

L'appel du <script> et à la fin de plx.easygallery.php donc je ne vois pas en quoi on "bloque" le js.
Ce script sert vraiment qu'aux effets "hover" des miniatures.

Hormis les "effets" le reste et fonctionnel. ensuite pour l'intégration du css dans la feuille de style du thème, je laisserais le choix aux personnes de le faire étant donné qu'il y en a qui sont novices, l'autre avantage et de pouvoir changer de thème sans oublié de rajouter le css.

Peut être revoir le css pour "standardiser" l'affichage final, a voir.

Mobyone · avril 2010

Hello,

J'utilise actuellement imagevue (visible sur mon site) et je chercher à me passer de la techno flash.
Cette lib est une bonne base je pense.

J'ai essayé ce weekend VisualLightBox mais l'obligation de passer par une appli sous windows ou mac sera contraignant je pense à la longue. de plus c'est payant.

Par contre, je vais essayer d'intégrer Smooth Menu de dynamic drive pour un avoir une sélection sur plusieurs répertoires.

Paul.

stribouille · avril 2010

se passer du flash est une très bonne idée surtout pour les possesseur d'Iphone et bientôt d'Ipad qui ne le supportent pas

Gzyg · avril 2010

Se passer de Flash est une très bonne idée tout court !

à plus,

Gzyg

Une galerie pour pluxml basé de EasyGallery

Réponses