Piwigo.org

MarcDesMilles · 2012-06-07 14:52:14

[EDIT]
Sujet de référence : [Forum, post 113668 by SNF69 in topic 15669] [Résolu] Slide du Header
[/EDIT]

SNF69 a écrit:
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.

OU

surhiliste a écrit:
Bonsoir,

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>

Bonjour, j'essaye de m'inspirer d'un vieux sujet entamé en 2009, mais je ne m'en sors pas !!!

Je me suis fait localement sur mon PC, une page HTLM qui fonctionne localement avec une feuille css dans un dossier css et des scripts en java dans un dossier js.

J'ai compris comment fonctionne les templates_extension. Grâce à des manipulations très simples de base, je sais paramétrer la "connexion" de mon header_perso.tpl en lieu et place du header.tpl "standard".

Mais... je ne sais pas si j'ai bien copié/collé les quelques lignes de ma page HTML locale dans le <head> et dans le <body> de mon header_perso.tpl...
et surtout je ne sais pas où implanter mon dossier css et mon dossier js !!!

J'ai essayé plusieurs configurations : à la racine du site, dans le thème, dans un sous-dossier du thème... NADA, RIEN A FAIRE, ça ne veux pas s'enclencher...

Dans les templates extension d'exemple, je n'ai pas trouvé d'exemple montrant l'incorporation d'un script java et encore moins avec feuille de style...

Quelqu'un peu-il me renseigner en m'indiquant par exemple un wiki, que j'ai cherché, mais que je n'ai pas trouvé.

Merci d'avance.

PS pour info :
============header_perso.tpl================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="{$lang_info.code}" dir="{$lang_info.direction}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={$CONTENT_ENCODING}">
<meta name="generator" content="Piwigo (aka PWG), see piwigo.org">
{if isset($meta_ref) }
{if isset($INFO_AUTHOR)}
<meta name="author" content="{$INFO_AUTHOR|@strip_tags:false|@replace:'"':' '}">
{/if}
{if isset($related_tags)}
<meta name="keywords" content="{foreach from=$related_tags item=tag name=tag_loop}{if !$smarty.foreach.tag_loop.first}, {/if}{$tag.name}{/foreach}">
{/if}
{if isset($COMMENT_IMG)}
<meta name="description" content="{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}{if isset($INFO_FILE)} - {$INFO_FILE}{/if}">
{else}
<meta name="description" content="{$PAGE_TITLE}{if isset($INFO_FILE)} - {$INFO_FILE}{/if}">
{/if}
{/if}

{if (isset($REVERSE) and $REVERSE and $PAGE_TITLE == l10n('Home'))}
<title>{$GALLERY_TITLE} | {$PAGE_TITLE}</title>{else}
<title>{$PAGE_TITLE} | {$GALLERY_TITLE}</title>{/if}
<link rel="shortcut icon" type="image/x-icon" href="{$ROOT_URL}{$themeconf.icon_dir}/favicon.ico">

<link rel="start" title="{'Home'|@translate}" href="{$U_HOME}" >
<link rel="search" title="{'Search'|@translate}" href="{$ROOT_URL}search.php" >
{if isset($first.U_IMG) }<link rel="first" title="{'First'|@translate}" href="{$first.U_IMG}" >{/if}
{if isset($previous.U_IMG)}<link rel="prev" title="{'Previous'|@translate}" href="{$previous.U_IMG}" >{/if}
{if isset($next.U_IMG) }<link rel="next" title="{'Next'|@translate}" href="{$next.U_IMG}" >{/if}
{if isset($last.U_IMG) }<link rel="last" title="{'Last'|@translate}" href="{$last.U_IMG}" >{/if}
{if isset($U_UP) }<link rel="up" title="{'Thumbnails'|@translate}" href="{$U_UP}" >{/if}

{get_combined_css}
{foreach from=$themes item=theme}
{if $theme.load_css}
{combine_css path="themes/`$theme.id`/theme.css" order=-10}
{/if}
{if !empty($theme.local_head)}{include file=$theme.local_head load_css=$theme.load_css}{/if}
{/foreach}

{if isset($U_PREFETCH) }<link rel="prefetch" href="{$U_PREFETCH}">{/if}

{if not empty($page_refresh) }<meta http-equiv="refresh" content="{$page_refresh.TIME};url={$page_refresh.U_REFRESH}">{/if}

{get_combined_scripts load='header'}


{if not empty($head_elements)}
{foreach from=$head_elements item=elt}{$elt}
{/foreach}
{/if}

<link rel="stylesheet" href="css/slideshow.css">
<style>
.slideshow { float: left; margin: 0px; }
</style>
<script type="text/javascript" src="js/mootools-1.3.2-core.js"></script>
<script type="text/javascript" src="js/mootools-1.3.2.1-more.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var data = { '200806190927-2.jpg': { caption: 'Porticcio' }, 'P200104140055-2.jpg': { caption: 'Saint-Denis' }, 'P200104190248-2.jpg': { caption: 'Cilaos' }};
new Slideshow('overlap', data, { captions: { delay: 1000 }, delay: 1000, height: 120, hu: 'images/', width: 1270 });
});
</script>

</head>

<body id="{$BODY_ID}">
<div id="the_page">

<div id="overlap" class="slideshow">
<img src="images/200806190927-2.jpg" alt="1">
</div>{/if}

========================================

Gotcha · 2012-06-07 15:50:48

Bonjour,

Dans votre template-extension il manque déjà 2 lignes de code :

Code:

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

Ensuite, en lisant les différentes lignes de code, c'est à vous d'adapter les sources que ce soit pour vos fichiers images, css et js.

En prenant l'exemple d'un fichier index.html à la racine de votre serveur (donc Piwigo doit être déjà installé dans un sous dossier, exemple ./piwigo) tout vos liens partiront de cet emplacement.

MarcDesMilles · 2012-06-07 16:31:12

Je ne comprends pas votre réponse...

Les deux lignes y sont (j'en ai même 3), mais sans doute avec un chemin faux.

Pourquoi "template/yoga/theme/Sylvia/..." ?????
En standard ce chemin n'existe pas ????
Et en plus je n'utilise pas le thème Sylvia...

J'ai essayé avec "themes/stripped_black_bloc/js/slideshow.js", c'est à cet endroit que se trouve le fichier, mais ce n'est pas mieux, j'obtiens toujours le même message :
========================
Fatal error: Smarty error: [in /homez.170/lesmillep/www/marc/template-extension/header_perso2.tpl line 61]: syntax error: unrecognized tag: float: left; margin: 0px; (Smarty_Compiler.class.php, line 446) in /homez.170/lesmillep/www/marc/include/smarty/libs/Smarty.class.php on line 1093
========================

Gotcha · 2012-06-07 16:50:58

MarcDesMilles a écrit:
Les deux lignes y sont (j'en ai même 3), mais sans doute avec un chemin faux.

Relisez le message de surhiliste car vous n'avez pas placer vos lignes aux bons endroits ;-)

Gotcha · 2012-06-07 16:55:06

MarcDesMilles a écrit:
Pourquoi "template/yoga/theme/Sylvia/..." ?????
En standard ce chemin n'existe pas ????
Et en plus je n'utilise pas le thème Sylvia...

J'ai essayé avec "themes/stripped_black_bloc/js/slideshow.js", c'est à cet endroit que se trouve le fichier, mais ce n'est pas mieux, j'obtiens toujours le même message

C'est à vous d'adaptez en fonction de votre site. Nous vous donnons des exemples car il nous est impossible de devinez l'installation de toutes les galeries et ainsi que du contenu de vos sites !

MarcDesMilles · 2012-06-07 16:59:38

Attention surhiliste a dévié de la méthode préconisée par SNF69...

Mois je suis reparti de la structure de ma page html qui fonctionne en local :
================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/slideshow.css">
<style>
.slideshow { float: left; margin: 0px; }
</style>
<script src="js/mootools-1.3.2-core.js"></script>
<script src="js/mootools-1.3.2.1-more.js"></script>
<script src="js/slideshow.js"></script>
<script>
window.addEvent('domready', function(){
var data = { '200806190927-2.jpg': { caption: 'Porticcio' }, 'P200104140055-2.jpg': { caption: 'Saint-Denis' }, 'P200104190248-2.jpg': { caption: 'Cilaos' }};

new Slideshow('overlap', data, { captions: { delay: 1000 }, delay: 1000, height: 120, hu: 'images/', width: 1270 });
});
</script>
</head>
<body>
<div id="overlap" class="slideshow">
<img src="images/200806190927-2.jpg" alt="1">
</div>
</body>
</html>
=============================

Et j'ai essayé de positionner mes lignes de code en respectant la structure de ma page html.
Voilà pourquoi j'ai mis ces lignes dans le <head> et non dans le <body>...
Mais c'est peut-être là mon erreur...
Pourquoi faudrait-il mettre ces lignes dans le <body> du template alors qu'elles sont dans <head> de l'html ???

Gotcha · 2012-06-07 17:35:44

MarcDesMilles a écrit:
Mais c'est peut-être là mon erreur...
Pourquoi faudrait-il mettre ces lignes dans le <body> du template alors qu'elles sont dans <head> de l'html ???

Des chaussettes sont faites pour allez sur la tête ou sur les pieds ? lol
Essayez donc de placer les appels aux scripts dans la balise BODY ;-)

MarcDesMilles · 2012-06-07 23:39:43

Les chemins d'accès aux fichiers css et fs sont bons et vérifiés...

Mais rien à faire les instructions ne sont pas reconnues... la définition d'une variable avec l'instruction "var" n'est pas reconnue... à pleurer

Piwigo est un système formidable, les thèmes, les plugins, les templates extension, BRAVO, c'est génial, mais faut être né dedans pour comprendre comment ça marche...

flop25 · 2012-06-08 10:58:02

MarcDesMilles a écrit:
Les chemins d'accès aux fichiers css et fs sont bons et vérifiés...

Mais rien à faire les instructions ne sont pas reconnues... la définition d'une variable avec l'instruction "var" n'est pas reconnue... à pleurer

Piwigo est un système formidable, les thèmes, les plugins, les templates extension, BRAVO, c'est génial, mais faut être né dedans pour comprendre comment ça marche...

à part si un plugin existe déjà tout fait, c'est le même cas pour personnaliser n'importe quel autre script : il faut comprendre le script et comprendre les bases HTML/CSS voire php

Gotcha · 2012-06-08 15:46:33

Je renvois vers un message "générique" :
[Forum, post 187287 by Gotcha in topic 22141] personnalisation galerie

ddtddt · 2012-06-08 16:49:57

MarcDesMilles a écrit:
Piwigo est un système formidable, les thèmes, les plugins, les templates extension, BRAVO, c'est génial, mais faut être né dedans pour comprendre comment ça marche...

Je ne suis pas d'accord quand je suis née l'informatique n'existait pas.
Quand j'ai découvert Piwigo je n'y connaissais rien et j'ai pu mettre en ligne facilement un site

------------

Pour faire défiler des images je te propose ceci

<script> var T = new Array()

T[0] = 'lien imag';
T[1] = 'lien imag';
T[2] = 'lien imag';
T[3] = 'lien imag';
T[4] = 'lien imag';
T[5] = 'lien imag';

function rotate(){var tim = 3;var c1 = parseInt(Math.random()*T.length);var html = T[c1];document.getElementById("banniereanimee").src = html;window.setTimeout("rotate()", (tim*1000));}
</script>

<center><div style="margin: 0; padding:0;"><img style="width: 905px; height: 127px; border: 0;" id="banniereanimee" title="" alt="" /></div></center>

<script>rotate();</script>

MarcDesMilles · 2012-06-08 18:14:44

Ahhhh merci, ça m'a l'air plus simple...

Mais pareil, j'ai mis les instructions dans le <body> et j'obtiens cette erreur :
==================================
Fatal error: Smarty error: [in /homez.170/lesmillep/www/marc/template-extension/header_perso.tpl line 72]: syntax error: unrecognized tag 'var' (Smarty_Compiler.class.php, line 590) in /homez.170/lesmillep/www/marc/include/smarty/libs/Smarty.class.php on line 1093
==================================

comme si il ne connaissait pas ce langage... il ne reconnait pas la déclaration de variable avec l'instruction "var".

Il doit me manquer une déclaration de qqchose qqpart !!!

flop25 · 2012-06-08 18:18:16

normal : il faut encadrer le code javascript par {literal}....{/literal} sinon tous crochets sera interpréter comme un tag smarty

MarcDesMilles · 2012-06-08 18:41:09

{literal}AAAAAHHHHHH super !!!{/literal}

Merci beaucoup, c'est bien cela il me manquait ces balises, avec lesquelles je ne suis pas né !!!

flop25 · 2012-06-08 19:02:35

: D

Dernière modification par flop25 (2012-06-08 19:03:04)

Piwigo.org

Annonce

#1 2012-06-07 14:52:14

[Résolu] Photos déroulantes en bannière de la galerie

SNF69 a écrit:

surhiliste a écrit:

#2 2012-06-07 15:50:48

Re: [Résolu] Photos déroulantes en bannière de la galerie

Code:

#3 2012-06-07 16:31:12

Re: [Résolu] Photos déroulantes en bannière de la galerie

#4 2012-06-07 16:50:58

Re: [Résolu] Photos déroulantes en bannière de la galerie

MarcDesMilles a écrit:

#5 2012-06-07 16:55:06

Re: [Résolu] Photos déroulantes en bannière de la galerie

MarcDesMilles a écrit:

#6 2012-06-07 16:59:38

Re: [Résolu] Photos déroulantes en bannière de la galerie

#7 2012-06-07 17:35:44

Re: [Résolu] Photos déroulantes en bannière de la galerie

MarcDesMilles a écrit:

#8 2012-06-07 23:39:43

Re: [Résolu] Photos déroulantes en bannière de la galerie

#9 2012-06-08 10:58:02

Re: [Résolu] Photos déroulantes en bannière de la galerie

MarcDesMilles a écrit:

#10 2012-06-08 15:46:33

Re: [Résolu] Photos déroulantes en bannière de la galerie

#11 2012-06-08 16:49:57

Re: [Résolu] Photos déroulantes en bannière de la galerie

MarcDesMilles a écrit:

#12 2012-06-08 18:14:44

Re: [Résolu] Photos déroulantes en bannière de la galerie

#13 2012-06-08 18:18:16

Re: [Résolu] Photos déroulantes en bannière de la galerie

#14 2012-06-08 18:41:09

Re: [Résolu] Photos déroulantes en bannière de la galerie

#15 2012-06-08 19:02:35

Re: [Résolu] Photos déroulantes en bannière de la galerie

Pied de page des forums