Piwigo.org

surhiliste · 2009-06-17 21:33:08

Bonsoir à tous,

Je cherche à faire ce que fait SNF69 sur son site : http://www.photos.tarrajat.fr/index.php?/categories, qui soit dis en passant possède des photos d'une beauté...

Peut-être que SNF69 pourra-t-il lui-même m'aiguiller ?

En sous remerciant d'avance.

Dernière modification par surhiliste (2009-08-08 18:58:04)

ddtddt · 2009-06-17 21:46:58

En regardant les source de la page, il me semble que tu devrais trouver ta réponse.

Je suis sur que SNF69 va t'expliquer dès qu'il passe ;-)

SNF69 · 2009-06-18 11:20:56

Me voila ;o))

Donc pour mon site j'ai intégré un java script qui permet normalement de faire une mini galerie avec défilement des photos et je l'ai adapté pour en faire un bandeau dynamique. Attention, ça ne veux pas dire que maintenant c'est du plug and play, l'intégration du code ce fait à la main (avec ses paramètres) et les photos sont d'abord intégré dans le cadre du thème sous Photoshop puis renseigné dans le javascript.

Pour le script il s'agit de SlideShow2 : http://www.electricprism.com/aeron/slideshow/

J'ai téléchargé l'outil et fait ma maquette en dehors de ma galerie en mode "autonome" et je te conseille de faire la même chose, c'est assez simple à réaliser, tu édites ta page avec un outil comme Notepad++ et, entre les exemple du site et la doc des pages, tu devrais pouvoir maquetter ce que tu souhaites avec la forme de ton bandeau, les images, la vitesse de rotation, si c'est aléatoire ou pas etc...

Une fois que ta maquette fonctionne il faut créer un Header_perso.tpl grâce au LocalFiles Editor dans la partie template (voir le wiki pour la création : http://fr.piwigo.org/doc/doku.php?id=fr … es-modeles) et j'ai intégré l'appel des scritps dans la partie Body de la page. Ensuite (ou avant c'est mieux) j'ai uploader les sources des scripts, les images et tout les fichiers de la maquette dans le répertoire de mon thème : MontBlanc (merci à P@t pour ce superbe thème ;o)).

Pour finir tu devras également modifier l'appel de l'image d'entête que réalise la galerie pour indiquer que c'est slideshow qui doit être afficher.

J'ai eu pas mal de difficulté pour l'intégration et heureusement qu'un pote m'a filé un coup de mail car je suis loin d'être un as de la technique (ce qui devrait te rassurer pour la réalisation de ton bandeau).

Voila je pense qu'avec ça tu peux t'en sortir et je pourrais te filer plus d'info mais ça reste très spécifique à ma galerie car l'adaptation est faite sur la base du thème que j'utilise et n'est pas intégrable en copier coller dans n'importe lequel ;o))

@+.

Seb

PS : Merci Surhiliste pour ta visite sur ma galerie et content que mes photos te plaisent ;o))

Dernière modification par SNF69 (2009-06-18 11:50:13)

surhiliste · 2009-06-18 20:14:12

Génial !
Merci SNF69, je vais essayer de voir si je peux m'en sortir avec ces indices.

SNF69 · 2009-06-18 20:29:02

N'hésite pas à me dire si tu rencontres un problème mais si c'est trop technique ça risque d'être long mais tu as déjà de bonne pistes ;o))
Bonne soirée.

Seb

surhiliste · 2009-06-18 21:26:07

Ca ne risque pas d,être technique car je m'y connais ni en DEV, ni en PHP, ni en SQL, ni en ...
D'ailleurs je me demande en quoi je suis compétent. Mais j'essaye de me débrouiller avec ce que j'ai.
Je pense revenir sur le sujet d'ici début juillet.

Merci encore SNF69 et excellente soirée.

[HS] La couleur de tes fotos animaliers / lumières villessont trop TOP. Celle des ailes de tes perroquet / aras sont d'une telle intensitée (avis d'un néophyte) ! Ces couleurs sont-elles travaillées sous photoshop ? [/HS]

SNF69 · 2009-06-18 21:40:42

No soucy pour l'aide et pour mes photos il n'y a aucune retouche sous Photoshop car je ne connais pas suffisamment l'outil ;o))
Merci pour ta visite sur ma galerie.
@+

Seb

surhiliste · 2009-06-19 21:51:51

Bonsoir SNF69,

Piwigo 2.0.2
Firefox 3
Thème : Sylvia

Pourrais-tu m'apporter quelques précisions quand tu dis :

"...tu édites ta page avec un outil comme Notepad++ ...."

Question ---> Quel fichier dois-je éditer et à quel endroit dois-je insérer le code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Slideshow 2!</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="author" content="Aeron Glemann (http://www.electricprism.com/aeron/)" />
  <link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
  <script type="text/javascript" src="/piwi/Slideshow/js/mootools.js"></script>
  <script type="text/javascript" src="/piwi/Slideshow/js/slideshow.js"></script>
  <script type="text/javascript">    
  //<![CDATA[
    window.addEvent('domready', function(){
      var data = {
        'header_1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' }, 
        'header_2.jpg': { caption: 'A Ceibu tree.' }, 
        'header_3.jpg': { caption: 'The view from Volcano Maderas.' }, 
        'header_4.jpg': { caption: 'Beer and ice cream.' }
      };
      var myShow = new Slideshow('show', data, {controller: true, height: 200, hu: 'images/', thumbnails: false, width: 935, delay: 5000, fast: true, random: true});
    });
  //]]>
  </script>
</head>
<body>
  <div id="show" class="slideshow">
    <img src="/piwi/Slideshow/images/header_1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." />
  </div>
</body>
</html>

J'ai tenté d'insérer ce code dans le Header.tpl, index.php ou via LocalEditor dans un header_perso.tpl... malgré ma méconnaissance total du php / html.
Evidement voué à l'échec.

J'ai télécharger et placé le répertoire de Slideshow directement à la racine de mon site, au même niveau que "galleries" par exemple.

2/ Une fois le Header_perso.tpl créer, je dois remplacer quel template d'origine ?

Quand je dis que je ne connais rien, ce n'est pas un mensonge.

En te (vous) remerciant d'avance pour ton (votre) aide.

SNF69 · 2009-06-23 09:13:58

Salut,

En fait tu n'as pas réalisé une des étapes. En effet, comme je l'indique dans mon poste du 2009-06-18 :

"J'ai téléchargé l'outil et fait ma maquette en dehors de ma galerie en mode "autonome" et je te conseille de faire la même chose, c'est assez simple à réaliser, tu édites ta page avec un outil comme Notepad++ et, entre les exemple du site et la doc des pages, tu devrais pouvoir maquetter ce que tu souhaites avec la forme de ton bandeau, les images, la vitesse de rotation, si c'est aléatoire ou pas etc..."

Car quant tu l'as téléchargé tu dois avoir 3 répertoires et un fichier index.html, c'est ce dernier qu'il faut éditer, modifier et adapter à ton besoin :

- taille du bandeau,
- les images,
- la vitesse de rotation
- etc ...

En effet, là tu essayes d'intégrer le plugin tel quel et ça ne marchera pas il y a un travail impératif à faire en amont. Fait le une fois que tout est bon nous verrons ou intégrer le code.

@+.

Seb

surhiliste · 2009-06-23 20:49:38

Bonsoir SNF69,

En local, tes conseils ont portés leurs fruits.

J'ai juste le début du Slide qui commence à partir du 2ème tiers de la fenêtre.
Comment lui dire de se placer à gauche, au centre ou à droite) ?

Ce n'est pas encore intégré à Piwigo cependant.

La question suivante, c'est donc où intégrer ce code venant du index.html ?

Merci d'avance pour tes réponses SNF69.

@+

SNF69 · 2009-06-24 10:18:55

Re,

Pour la taille de ton animation tu dois modifier le CSS qui lui est associé (slideshow.css). Tu as toutes les infos sur le site de l'éditeur du scritp :

http://code.google.com/p/slideshow/ et sa FAQ : http://code.google.com/p/slideshow/wiki/FAQ

Pour le code c'est expliqué plus haut :

"Une fois que ta maquette fonctionne il faut créer un Header_perso.tpl grâce au LocalFiles Editor dans la partie template (voir le wiki pour la création : http://fr.piwigo.org/doc/doku.php?id=fr … es-modeles) et j'ai intégré l'appel des scritps dans la partie Body de la page. Ensuite (ou avant c'est mieux) j'ai uploader les sources des scripts, les images et tout les fichiers de la maquette dans le répertoire de mon thème : MontBlanc (merci à P@t pour ce superbe thème ;o))."

Tu as l'emplacement et l'endroit ou tu dois mettre tes fichiers, il ne doivent pas se mettre n'importe où et comme je n'utilise pas le thème Sylvia il faut que tu adaptes les infos à ton thème (répertoire, fichiers etc...).

Bonne continuation.

Seb

surhiliste · 2009-08-07 20:19:44

Bonsoir,

Comme je ne suis pas arrivé à faire ce que je veux avec l'aide de SNF69, je m'y suis pris autrement, à la "barbare" j'imagine car j'y suis allé à taton (encore une fois, je n'y connais rien en code) :

Voici ce que j'ai fait :

1/ Après avoir télécharger Slideshow (http://code.google.com/p/slideshow/), j'ai décompréssé le fichier et mis par FTP sur mon site.

2/ J'ai ouvert le fichier d'exemple index.html, slideshow.js (du zip décompréssé) et le header.tpl de piwigo avec notepad++

3/ J'ai copié un bout de ce code (ajusté à mes besoins) contenu dans le fichier index.html et je l'ai collé à la fin de celui de slideshow.js :

window.addEvent('domready', function(){
   var data = {
   '1.jpg': { caption: 'Un Homme de Paris' },
   '2.jpg': { caption: 'Un Homme de Paris' },
   '3.jpg': { caption: 'Un Homme de Paris' },
   };
   var myshow = new Slideshow('show', data, {
type: 'pan',
duration: 4000,
center: false,
height: 118,
width: 1300,
hu: 'template/yoga/theme/Sylvia/images/'});
});

4/ Toujours à partir de index.html, j'ai collé le code dans le head puis body du header.tpl.

* Juste avant le </head>, j'ai collé ces lignes entre les 2 <foreach> .......</foreach>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Aeron Glemann (http://www.electricprism.com/aeron/)" />
<link rel="stylesheet" type="text/css" href="template/yoga/theme/Sylvia/css/slideshow.css" media="screen" />

* Après, ces 2 lignes :
<body id="{$BODY_ID}">
<div id="the_page">

J'ai collé ces lignes
<script type="text/javascript" src="template/yoga/theme/Sylvia/js/mootools.js"></script>
<script type="text/javascript" src="template/yoga/theme/Sylvia/js/slideshow.js"></script>

<div id="show" class="slideshow">
<img src="template/yoga/theme/Sylvia/images/1.jpg" alt="Un Homme de Paris." />
</div>

Le reste n'est qu'une question d'ajustement à la convenance du cas de chacun.

Voilà, pour ceux qui comme moi n'y connais rien.

Je suis preneur pour une méthode moins barbare mais qui resterait accessible pour moi (et pour ceux qui sont dans le même cas).

ddtddt · 2009-08-07 21:17:03

surhiliste a écrit:
<meta name="author" content="Aeron Glemann (http://www.electricprism.com/aeron/)" />

C'est gentils de lui faire de la pub ;-)

flop25 · 2009-08-08 15:36:40

un plugin serait très facilement faisable !

par contre sort les lignes meta du foreach sinon elles vont être quadruplé ou pire
et aussi dans ce cas, le slide est haut et les images sont choisies par toi et codé en dur, n'est ce pas ? Si oui le plugin permettra de choisir différentes option

Qqun est-il déjà dessus ce plugin ?
perso je suis un poil occupé - comme tout le monde ^^ il est vrai. Mais ça m'a l'air pas mal

j'avais aussi vu ça http://www.flshow.net/flip.php

surhiliste · 2009-08-08 18:57:12

Bonsoir Flop25,

Merci du conseil et je vais de ce pas le suivre.

+1 pour l'idée d'un plugin : pour les catégories de personnes qui n'y connais rien comme moi, ce serait génial.

Piwigo.org

Annonce

#1 2009-06-17 21:33:08

[Résolu] Slide du Header

#2 2009-06-17 21:46:58

Re: [Résolu] Slide du Header

#3 2009-06-18 11:20:56

Re: [Résolu] Slide du Header

#4 2009-06-18 20:14:12

Re: [Résolu] Slide du Header

#5 2009-06-18 20:29:02

Re: [Résolu] Slide du Header

#6 2009-06-18 21:26:07

Re: [Résolu] Slide du Header

#7 2009-06-18 21:40:42

Re: [Résolu] Slide du Header

#8 2009-06-19 21:51:51

Re: [Résolu] Slide du Header

Code:

#9 2009-06-23 09:13:58

Re: [Résolu] Slide du Header

#10 2009-06-23 20:49:38

Re: [Résolu] Slide du Header

#11 2009-06-24 10:18:55

Re: [Résolu] Slide du Header

#12 2009-08-07 20:19:44

Re: [Résolu] Slide du Header

#13 2009-08-07 21:17:03

Re: [Résolu] Slide du Header

surhiliste a écrit:

#14 2009-08-08 15:36:40

Re: [Résolu] Slide du Header

#15 2009-08-08 18:57:12

Re: [Résolu] Slide du Header

Pied de page des forums