Pages: 1
Bonjour à tous,
Un petit truc tout simple qui a peut-être déjà été abordé dans d'autres posts, très facile à faire et démontrant la souplesse de personnalisation de la v1.4 : mettre les flèches de direction (précédente/suivante) dans le menu du haut, ce qui est tout de même plus pratique pour aller d'une photo à l'autre. Vous pouvez de même rajouter des boutons supplémentaires, changer les icônes, etc.
Simplement en modifiant le fichier picture.tpl comme suit :
*************************
<!-- BEGIN information -->
<div class="information">{information.INFORMATION}</div>
<!-- END information -->
<div class="titrePage">
<div id="gauche"><a href="{U_HOME}">{L_HOME}</a>{LEVEL_SEPARATOR}{CATEGORY}</div>
<div id="centre" class="nameImage">{TITLE}</div>
<div id="droite">{PHOTO}</div>
</div>
<div id="imgBarMenu">
<div class="imgMenu" id="left">
<a href="http://www.votresite.com" title="Retour au site">
<img src="template/default/theme/logo.gif" alt="Retour au site" />
</a>
</div>
<div class="imgMenu" id="left">
<a href="{U_UP}" title="{L_UP_ALT}">
<img src="template/default/theme/oeil.gif" alt="{L_UP_ALT}" />
</a>
</div>
<div class="imgMenu" id="left">
<a href="{U_SLIDESHOW}" title="{L_SLIDESHOW}">
<img src="template/default/theme/slideshow.gif" alt="{L_SLIDESHOW}" />
</a>
</div>
<div class="imgMenu" id="middle">
<a href="{U_METADATA}" title="{L_PICTURE_METADATA}">
<img src="template/default/theme/metadata.gif" alt="{L_PICTURE_METADATA}" />
</a>
</div>
<div class="imgMenu" id="right">
<!-- BEGIN next -->
<a class="none" href="{next.U_IMG}" title="{L_NEXT_IMG}{next.TITLE_IMG}">
<img style="border:none;" src="template/default/theme/fleched.gif" alt="{L_NEXT_IMG}{next.TITLE_IMG}" />
</a>
<!-- END next -->
</div>
<div class="imgMenu" id="right">
<!-- BEGIN previous -->
<a class="none" href="{previous.U_IMG}" title="{L_PREV_IMG}{previous.TITLE_IMG}">
<img style="border:none;" src="template/default/theme/flecheg.gif" alt="{L_PREV_IMG}{previous.TITLE_IMG}" />
</a>
<!-- END previous -->
</div>
*************************
C'est le code pour mon site, pour l'exemple, que vous adaptez à votre sauce, et vous virez plus bas dans picture.tpl le code correspondant aux flèches du bas qui ne servent plus à rien.
Au final, ça donne un truc comme ça :
http://www.clubopera.com/galerie/pictur … age_id=705
Hors ligne
Bonjour,
Oui, tu as raison. Cette modif a beau être très simple, elle peut rendre service à ceux qui vraiment ne pigent rien du tout au code. Je vais faire un message qui renvoie sur celui-ci.
@+
Hors ligne
c'est chouette fabino,
mais moi, comme depuis des mois, je veux ces fleches de chaque coté de la grande photo, pour le moment, j'ai ca
http://fcdombesbenjamins.free.fr/galeri … ge_id=1584
et ca me convient pas tout a fait, vu que ten as bien bavé pour faire ca, te resterait il un peun de salive pour solucer mon bleme, les modos ont l'air, on va dire "embetés" avec ce souci
la seule soluce que j'ai eue était piour la 1.3...
Hors ligne
Bonjour,
En fait, non, justement, je n'en ai pas bavé du tout parce que je suis vraiment pas un expert en html, php, etc. Il est même très possible que je m'y connaise moins que toi dans ce domaine. C'est pour ça que je suis allé vers la solution la plus simple, qui en plus me semble la plus pratique et la plus esthétique. D'autant plus que c'est la soluce adoptée pour la démo du site PWG. Donc le seul conseil que je puisse te donner c'est de mettre les flèches comme je l'ai fait, vu que le script permet de le faire facilement.
@+
Hors ligne
Bonjour,
Tu peux essayer de modifier le template picture.tpl de la façon suivante :
Remplacer la ligne
<img class="image" src="{SRC_IMG}" style="width:{WIDTH_IMG}px;height:{HEIGHT_IMG}px;" alt="{ALT_IMG}"/>
Par
<table>
<tr>
<td>
<!-- BEGIN previous -->
<a class="none" href="{previous.U_IMG}" title="{L_PREV_IMG}{previous.TITLE_IMG}">
<img style="border:none;" width="30" height="100" align="absmiddle" src="template/default/theme/left-arrow.gif" alt="" />
</a>
<!-- END previous -->
</td><td>
<img class="image" src="{SRC_IMG}" style="width:{WIDTH_IMG}px;height:{HEIGHT_IMG}px;" alt="{ALT_IMG}"/>
</td><td>
<!-- BEGIN next -->
<a class="none" href="{next.U_IMG}" title="{L_NEXT_IMG}{next.TITLE_IMG}">
<img style="border:none;" class="thumbLink" width="30" height="100" align="absmiddle" src="template/default/theme/right-arrow.gif" alt="" />
</a>
<!-- END next -->
</td>
</tr>
</table>
normalement ça devrait marcher sans soucis ;)
@+
Seldon
Hors ligne
Ecoute, seldon,
j'ai deja commencé le piedestal de la statue que je vais t'ériger;
si tu veux que je la monte completement, tu n'as plus qu'a me donner le code pour centrer tout ca dans la page, car comme tu peux le voir la :
http://fcdombes2.free.fr/galeriephotos/ … age_id=238
y manqiue que le centrage
Hors ligne
en mettant des gifs plus larges, la page est presque centrée
http://fcdombesbenjamins.free.fr/galeri … ge_id=1195
yen manque un chouia (de centrage)
mais enfin, j'arrive a trouver (presque) la perfection.
si t'avais une petite idee, qd mm, pour centrer
Hors ligne
Salut,
Désolé du retard mais je suis un peu en vadrouille et donc j'ai pas toujours de connection dispo...
Deux choses soit tu changes tes flèche par des gifs plus petites pour pas que ça déborde, soit tu dimensionnes les différentes cellules et la table créés pour qu'elles ne dépasse pas ta résolution maxi.
Ca ira ?
Seldon
Hors ligne
ben, en fait, les gifs larges me permettent de "centrer" la page. si j'en mets des plus petites (moins larges), ca decale tout.
pour ce qui est des cellules, la t'es gentil, mais tu me parles com y fo, stp.
je sais pas du tout ce que ca represente; on m'avait deja parle d'un systeme avec trois tableuax sur la meme ligne, yavait un post qui donnait le code, masi ca fonctionnait pas terrible, car yavait plein de valeur de cadrage a changer et bon jme suis perdu
par contre si je pouvais, mais j'ai pas enkor cherché (et d'ailleurs sais pas si jtrouverai), y fodrait que je puisse elargir et la barre de titre et la barre de commentaires pour qu'elles s'étalent sur toute la largeur.
tiens ben si t'avais une idee pour ca
Hors ligne
Re,
Bon je crois avoir un début de piste pour toi. si tu remplace le code suivant
style="width:{WIDTH_IMG}px;height:{HEIGHT_IMG}px;"
par
HEIGHT = "375" WIDTH = "500"
toujours dans picture.tpl, tu verras que ça sera mieux.
Certes les photos seront plus petites (car on fixe la taille) mais bon il faut faire un choix. Tu peux aussi changer tes flèches et du coup tu pourras augmenter la taille de l'image centrale.
L'idéale serait d'avoir des flèche qui tournent sur elles même de 50 de large (là elles font 150) comme ça tu pourrait avoir une image de 700x525
Bon j'espère que ça fera ton bonheur.
@+
Seldon
Hors ligne
Pages: 1