Piwigo.org

VDigital · 2006-06-24 23:17:22

Explications:

1 - Vous créez /template-common/hsq2_ie_fx.css
Il va contenir ceci:

/* =Internet Explorer Fixes
----------------------------------------------------------------------*/
/* A priori classique mais il y a autre chose */
.inrel { /* No customisation needed, this is just to return to inline and relative */
display: inline; position: relative; left: 0px; top: 0px; border: 0; margin: 0; padding: 0;
}
.squared_tb { /* Customize first line if needed. width & height = square side. left & top = width/2 */
width: 80px; height: 80px; left: -40px; top: -40px;
border: 0; margin: 0px; padding: 0px; display: block; position: absolute; overflow: hidden;
}
.clip_tb { /* Customize first line if needed. top, right, bottom, left pixel top crop in thumbnail */
clip: rect(8px 70px 68px 10px); /* eg. from top: 9°px to 69px; and from left: 11px to 71px */
display: block; position: absolute; left: 0px; top: 0px;
}

/* Coté hoverbox cela est à peu près correct */
.hoverbox A /* Dans la version d'origine ceci est équivalent */
{ display: block; /* à .thumbnails, comme j'ai déjà un autre A */
position: relative; /* et que les attributs ascendants */
top: -80px; /* pourraient fausser les comportements */
left: 0px; /* des navigateurs */
z-index: 1; /* je fais dans la précision */
width: 80px; /* à partir d'un <div class="hoverbox"> */
height: 80px; }

.hoverbox a:hover .hoverblk /*= .hoverbox a:hover .preview */
{ display: block;
position: relative;
top: -90px;
left: -60px;
z-index: 2; }

Ce sont les corrections d'affichage particulières au monde Win... (toutes les versions IE).
Je n'ai testé que la 6 et ces valeurs sont correctes pour IE.
Si cela ne vous convient pas tout à fait vous pouvez changer des choses.
2 parties composent ce fichier...
Mais voyons la suite dans un autre post.

VDigital · 2006-06-24 23:20:56

2 - Vous créez /template-common/hsq2.css
Il va contenir ceci:

.inrel { /* No customisation needed, this is just to return to inline and relative */
display: inline; position: relative; left: 0px; top: 0px; border: 0; margin: 0; padding: 0;
}
.squared_tb { /* Customize first line if needed. width & height = square side. left & top = width/2 */
width: 80px; height: 80px; left: -40px; top: 10px;
border: 0; margin: 0px; padding: 0px; display: block; position: absolute; overflow: hidden;
}
.clip_tb { /* Customize first line if needed. top, right, bottom, left pixel top crop in thumbnail */
clip: rect(8px 70px 68px 10px); /* eg. from top: 9°px to 69px; and from left: 11px to 71px */
display: block; position: absolute; left: 0px; top: 0px;
}
/* =Hoverbox Code
----------------------------------------------------------------------*/
.hoverbox A /* Dans la version d'origine ceci est équivalent */
{ display: block; /* à .thumbnails, comme j'ai déjà un autre A */
position: relative; /* et que les attributs ascendants */
top: 0px; /* pourraient fausser les comportements */
left: 0px; /* des navigateurs */
z-index: 1; /* je fais dans la précision */
width: 80px; /* à partir d'un <div class="hoverbox"> */
height: 80px; }
.hoverbox A *
{ display: none; }
.hoverbox a:hover .hoverblk /*= .hoverbox a:hover .preview */
{ display: block;
position: relative;
top: -70%;
left: -50%;
z-index: 2; }
.hoverbox .hoverblk IMG.hoverimg
{ border: 3px ridge #fff;
display: block;
position: relative;
min-width: 130px;
max-width: 180px;
min-height: 130px; /* On the other hand, max-height is not recommended */
z-index: 3;
padding : 1px;
background: #444; colour: #fff;}

inrel , squared_tb , et clip_tb servent a découper les miniatures en carré.
La position de découpe est ajustable via clip: rect(8px 70px 68px 10px);

Les autres définitions concernent le survol.

VDigital · 2006-06-24 23:24:20

3 - Vous allez modifier /template-common/layout.css
Il va contenir ceci:

/* $Id: layout.css 1131 2006-04-06 02:23:54Z rvelices $ */

/* template css */
@import "default-layout.css";
/* Override properties with import local file */
@import "local-layout.css";
@import "hsq2.css";

Pour intégrer le fichier hsq2.css.
Nota: le fichier hsq2_ie_fx.css n'est pas encore connu..
On y va.

VDigital · 2006-06-24 23:28:19

4 - Vous allez modifier /template/yoga/header.tpl (par exemple)
Il va contenir comme ceci (ajout en gras):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="{LANG}" dir="{DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CONTENT_ENCODING}">
<link rel="shortcut icon" type="image/x-icon" href="{pwg_root}template-common/favicon.ico">
<link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/layout.css">

<link rel="stylesheet" type="text/nonsense" href="{pwg_root}template/{themeconf:template}/fix-khtml.css">

<link rel="stylesheet" type="text/css" media="print" href="{pwg_root}template/{themeconf:template}/print.css">
<link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/default-colors.css">
<link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/theme/{themeconf:theme}/theme.css">

<link rel="prefetch" href="{next.U_IMG_SRC}">


<meta http-equiv="refresh" content="{REFRESH_TIME};url={U_REFRESH}">

<title>{GALLERY_TITLE}:{PAGE_TITLE}</title>
<script type="text/javascript" src="{pwg_root}include/scripts.js"></script>



</head>

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

{PAGE_BANNER}

Maintenant, il faut encore mettre en route le code ajouté...

VDigital · 2006-06-24 23:34:51

5 - Vous allez modifier /template/yoga/index.tpl (même template de pour header.tpl)
Vous allez chercher le block thumbnails (avec un s)

<ul class="thumbnails">



[... / ...]




</ul>

J'ai réduit la zone mais elle comme par  et se termine au 

Ce block sera remplacé par ceci:

<ul class="thumbnails">


<li class="{thumbnails.line.thumbnail.CLASS}">
<span class="wrap1">
<span class="wrap2">
<a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
<span class="inrel"><span class="squared_tb">
<img class="clip_tb"
src="{thumbnails.line.thumbnail.IMAGE}"
   alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
   title="{thumbnails.line.thumbnail.IMAGE_TITLE}" /></span></span></a>
<span class="hoverbox">
<a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
<span class="hoverblk">
<img class="hoverimg"
src="{thumbnails.line.thumbnail.IMAGE}"
   alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
   title="{thumbnails.line.thumbnail.IMAGE_TITLE}" />
</span>
</a>
</span>
</span>
<span class="thumbLegend">

{thumbnails.line.thumbnail.element_name.NAME}


[{thumbnails.line.thumbnail.category_name.NAME}]

{thumbnails.line.thumbnail.IMAGE_TS}

<br />{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {lang:comments}

</span>
</span>
</li>



</ul>

VDigital · 2006-06-24 23:42:45

6 -Quelques réglages seront nécessaires pour ajuster les tailles des cadres de l'ancien template.

Vous ne pouvez pas en principe modifier /template-common/local-layout.css...
En effet vos miniatures dans les autres templates doivent conserver leurs valeurs communes.
Alors dans /template/yoga/theme/dark/theme.css (pour dark... par exemple)

Il faut ajouter...

/* Set some sizes according to your maximum thumbnail width and height */
#content UL.thumbnails SPAN,
#content UL.thumbnails SPAN.wrap2 A,
#content UL.thumbnails SPAN.wrap2 LABEL {
width: 90px; /* thumbnail width + 2px */
}
#content UL.thumbnails SPAN.wrap2 {
height: 96px; /* thumbnail height + 2px */
}
#content DIV.comment BLOCKQUOTE {
margin-left: 100px; /* thumbnail width + ~10px */
}

chrisaga · 2006-06-26 08:31:38

Question à la c..
Je vois que tu as des tags en <A><SPAN><SPAN><IMG> ....</A>
Quand tu cliques sur l'image dans IE, est-ce que le lien fonctionne ?

Autre question à la ...
Pourquoi les images carées sont-elles dans un lien ?
A priori quant tu cliques, c'est que la souris est dessus, et donc que l'image complète est affichée.
Ou alors j'ai lu trop vite ?

<:o)

VDigital · 2006-06-26 10:43:36

chrisaga a écrit:
Question à la c..
Je vois que tu as des tags en <A><SPAN><SPAN><IMG> ....</A>
Quand tu cliques sur l'image dans IE, est-ce que le lien fonctionne ?

Autre question à la ...
Pourquoi les images carées sont-elles dans un lien ?
A priori quant tu cliques, c'est que la souris est dessus, et donc que l'image complète est affichée.
Ou alors j'ai lu trop vite ?

<:o)

Pas une quest à la c... 8-)
Coté Hoverbox pas de problème le lien marche.
Le lien de la miniature carré ne marche pas car au survol (A:hover), l'hoverbox prend la main...
Le lien est caché dessous (sauf avec Opéra 9.0, pour lequel la boite monte une fois sur dix, et donc le lien marche parfaitement).
Les images carrées sont dans le lien pour deux raisons:
1- Pour qu' :hover fonctionne sur l'image même avec IE
2- Je compte mettre une option du visiteur qui désactive l'hoverbox temporairement et donc il me faudra le lien naturel d'origine.
L'hoverbox affiche l'image complète de la miniature.

A ta question précédente, peut-on mettre le <A> entre wrap1 et wrap2, ma réponse est: non.
Je ne te raconte pas le bazard sous IE.

8)

VDigital · 2006-06-26 22:01:22

Démo d'Hoverbox sur Template yoga/dark...

Voir Lisbonne en (1.6.RC2 à ce jour)
et comparer avec Lisbonne en (1.5.2 à ce jour)

8-)

VDigital · 2006-06-27 06:58:28

En plaçant, les deux liens, j'ai enfin compris la question de chrisaga ( Je suis un peu lourd des fois... 8-).

Voir Lisbonne en sous IE (1.6.RC2 à ce jour).
Le pb est que la zone cliquable (<A>) n'est pas sur la miniature...
Tant pour les miniatures carrées (zone cliquable en haut à gauche) que pour les hoverbox (je ne sais même pas où elle est planquée).

Je reviens d'ici ce we avec la solution IE.

8-)

chrisaga · 2006-06-30 09:34:33

VDigital a écrit:
En plaçant, les deux liens, j'ai enfin compris la question de chrisaga ( Je suis un peu lourd des fois... 8-).

Voir Lisbonne en sous IE (1.6.RC2 à ce jour).
Le pb est que la zone cliquable (<A>) n'est pas sur la miniature...
Tant pour les miniatures carrées (zone cliquable en haut à gauche) que pour les hoverbox (je ne sais même pas où elle est planquée).

Je reviens d'ici ce we avec la solution IE.

8-)

Voilà, je n'étais certainement pas clair, mais on est sur la même longueur d'onde maintenant.
Je n'ai pas passé beaucoup de temps sur ce problème, mais je suis preneur d'une solution.

<;o)

dmaille · 2006-07-22 15:49:28

Merci c'est nickel !
Par contre pour les béotiens comme moi, dans la 1.6 ce n'est pas dans index.tpl mais dans thumbnail.tpl qu'il faut remplacer

Code:

<!-- BEGIN thumbnails -->
<ul class="thumbnails">
  <!-- BEGIN line -->
  <!-- BEGIN thumbnail -->
  <li class="{thumbnails.line.thumbnail.CLASS}">
    <span class="wrap1">
      <span class="wrap2">
        <a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
          <span class="inrel"><span class="squared_tb">
          <img class="clip_tb"
          src="{thumbnails.line.thumbnail.IMAGE}"
        alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
        title="{thumbnails.line.thumbnail.IMAGE_TITLE}" /></span></span></a>
        <span class="hoverbox">
        <a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
          <span class="hoverblk">
          <img class="hoverimg"
          src="{thumbnails.line.thumbnail.IMAGE}"
        alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
        title="{thumbnails.line.thumbnail.IMAGE_TITLE}" />
          </span>
        </a>
        </span>       
      </span>
      <span class="thumbLegend">
      <!-- BEGIN element_name -->
      {thumbnails.line.thumbnail.element_name.NAME}
      <!-- END element_name -->
      <!-- BEGIN category_name -->
      [{thumbnails.line.thumbnail.category_name.NAME}]
      <!-- END category_name -->
      {thumbnails.line.thumbnail.IMAGE_TS}
      <!-- BEGIN nb_comments -->
      <br />{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {lang:comments}
      <!-- END nb_comments -->
      </span>
    </span>
  </li>
  <!-- END thumbnail -->
  <!-- END line -->

</ul>
<!-- END thumbnails -->

VDigital · 2006-07-30 10:14:12

dmaille a écrit:
Merci c'est nickel !
Par contre pour les béotiens comme moi, dans la 1.6 ce n'est pas dans index.tpl mais dans thumbnail.tpl qu'il faut remplacer

Merci de ton indication.
Pourrait-on disposer d'un lien vers ta galerie afin de vérifier un petit quelque chose...?
Merci d'avance.

8-)

dmaille · 2006-08-10 10:06:30

Biensur... c'est http://www.maillefaud.info/photo. Par contre depuis la mise à jour en 1.6.1 ça ne passe plus sur IE.

Dernière modification par dmaille (2006-08-10 10:07:18)

VDigital · 2006-08-10 10:31:53

Ça ne m'arrange pas que tu sois en 1.6.1 parce que je voulais voir ton site quand cela marchait.
Pour moi, j'ai toujours un pb.
Le pb est que la zone cliquable (<A>) n'est pas sur la miniature...
C'était en 1.6.0rc2 depuis je n'ai pas mis les doigts dedans.

Je reprendrai ce dossier vers mi-septembre si je n'ai pas d'autres priorités.

Piwigo.org

Annonce

#16 2006-06-24 23:17:22

Re: [Hoverbox] Extension de templates

#17 2006-06-24 23:20:56

Re: [Hoverbox] Extension de templates

#18 2006-06-24 23:24:20

Re: [Hoverbox] Extension de templates

#19 2006-06-24 23:28:19

Re: [Hoverbox] Extension de templates

#20 2006-06-24 23:34:51

Re: [Hoverbox] Extension de templates

#21 2006-06-24 23:42:45

Re: [Hoverbox] Extension de templates

#22 2006-06-26 08:31:38

Re: [Hoverbox] Extension de templates

#23 2006-06-26 10:43:36

Re: [Hoverbox] Extension de templates

chrisaga a écrit:

#24 2006-06-26 22:01:22

Re: [Hoverbox] Extension de templates

#25 2006-06-27 06:58:28

Re: [Hoverbox] Extension de templates

#26 2006-06-30 09:34:33

Re: [Hoverbox] Extension de templates

VDigital a écrit:

#27 2006-07-22 15:49:28

Re: [Hoverbox] Extension de templates

Code:

#28 2006-07-30 10:14:12

Re: [Hoverbox] Extension de templates

dmaille a écrit:

#29 2006-08-10 10:06:30

Re: [Hoverbox] Extension de templates

#30 2006-08-10 10:31:53

Re: [Hoverbox] Extension de templates

Pied de page des forums