🌍
Français
http://host.sonspring.com/hoverbox/ : une galerie hoverbox qui fonctionne sur ie6 et ff
le code est tres simple, et sans js :D
(trouver dans ce sujet : http://forum.phpwebgallery.net/viewtopic.php?id=8939)
peut etre que ca peut servir ;)
tlegras a écrit:
j'ai ce texte affiche en haut de la page.
{thumbnails.line.thumbnail.IMAGE_ALT} {thumbnails.line.thumbnail.element_name.NAME} [{thumbnails.line.thumbnail.category_name.NAME}] {thumbnails.line.thumbnail.IMAGE_TS}
{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {lang:comments}
Je n'ai jamais eu ça. 8-/
tlegras a écrit:
je me demande encore si cela ne serait pas possible en mettant l'image en background. mais meme si c'était le cas, c'est un peu tirer par les cheveux... apres tout il suffit que je genere mes miniatures carrées pour ameliorer le résultat. :-/
Un peu capilotracté effectivement, je ne conseillerai à personne d'afficher les miniatures via le background.
Trop complexe à gérer en réalité.
L'usage du background doit être réservé aux images qui reviennent souvent sur les pages du site.
En plus, il faut les solliciter via du css donc c'est très statique comme démarche.
Ceci dit c'est vrai qu'on obtiendrait plus facilement le centrage à priori.
tlegras a écrit:
VDigital a écrit:
PS: J'ai hâte de voir ton résultat.
tu ne devrais pas... je viens de casser mon disque dur chez moi... donc je vais passer mes prochains jour a reinstaller mon système... :((
Bon courage.
VDigital a écrit:
Le <a> sans hoverbox c'est normal que ça marche.
Effectivement tu n'as besoin que d'asjuster les classes squared_tb.
Tu es dans la bonne direction.
IE et les navigateurs type FF:
IE ne gère pas les positions relatives de la même façon que les autres, c'est comme ça, et 80% de Hack de css pour IE réasjutent cette différence.
oui le resultat me semble pas trop mal a priori. c'est teste sur IE5 et Firefox 1.0.7.
les très petites vignettes apparaissent encore haut à gauche du cadre, ce n'est pas vraiment top.
j'ai egalement un probleme sur la page admin.php?page=thumbnail
j'ai ce texte affiche en haut de la page.
{thumbnails.line.thumbnail.IMAGE_ALT} {thumbnails.line.thumbnail.element_name.NAME} [{thumbnails.line.thumbnail.category_name.NAME}] {thumbnails.line.thumbnail.IMAGE_TS}
{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {lang:comments}
sans doute un probleme dans le fichier tpl. je ne crois pas avoir touché a quoique ce soit dedans. avez-vous le même problème ou cela vient-il de ce moi?
VDigital a écrit:
Quand à centrer, je n'ai pas choisi de centrer avant de tronquer parce que je ne crois pas que cela soit possible, au contraire j'avais choisi d'excentrer pour ne pas rencontrer de problème avec des vignettes un peu trop petite soit verticalement soit horizontalement...
effectivement, cela ne semble pas possible, sauf peut-etre a avoir une classe differente pour les images vertical ou horinzontal. et encore. le site flickr affiche des miniatures carrées dans certains cas, mais ce sont les images miniatures elles-memes qui sont carrees, et ne sont pas tronquées.
je me demande encore si cela ne serait pas possible en mettant l'image en background. mais meme si c'était le cas, c'est un peu tirer par les cheveux... apres tout il suffit que je genere mes miniatures carrées pour ameliorer le résultat. :-/
VDigital a écrit:
PS: J'ai hâte de voir ton résultat.
tu ne devrais pas... je viens de casser mon disque dur chez moi... donc je vais passer mes prochains jour a reinstaller mon système... :((
Bonjour Thierry,
Le <a> sans hoverbox c'est normal que ça marche.
Effectivement tu n'as besoin que d'asjuster les classes squared_tb.
Tu es dans la bonne direction.
IE et les navigateurs type FF:
IE ne gère pas les positions relatives de la même façon que les autres, c'est comme ça, et 80% de Hack de css pour IE réasjutent cette différence.
Quand à centrer, je n'ai pas choisi de centrer avant de tronquer parce que je ne crois pas que cela soit possible, au contraire j'avais choisi d'excentrer pour ne pas rencontrer de problème avec des vignettes un peu trop petite soit verticalement soit horizontalement...
8-)
PS: J'ai hâte de voir ton résultat.
tlegras a écrit:
sinon, pour moi non plus la zone clickable n'est pas bonne sous ie.
je pense que j'arrive a corriger le probleme chez moi (donc sans l'overbox) en mettant le tag "a" juste autour de l'image, soit:
<span class="inrel"><span class="squared_tb">
<a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
<img class="clip_tb"
au lieu de
<a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
<span class="inrel"><span class="squared_tb">
<img class="clip_tb"
mais apres j'ai du retirer tout le css relatif a hoverbox dans hsq2.css et hsq2_ie_fx.css et ajuster les classes squared_tb. je ne comprend pas encore pourquoi elles sont encore differentes pour ie et firefox:
.squared_tb { /* pour firefox */ width: 80px; height: 80px; left: -40px; top: -30px; ...}
.squared_tb { /* pour ie */ width: 80px; height: 160px; left: 5px; top: -75px; ...}
par contre j'ai l'impresson qu'il n'y a pas de moyen de centrer les vignettes tronquées. :(
Thierry.
VDigital a écrit:
Pour tous ceux qui s'interressent aux css et ce qui est réalisable je conseillerai l'excellent site:
http://www.dynamicdrive.com/style/csslibrary/tos/
Je pense que le papa de sucatify serait d'ailleurs interressé par ceci:
Floating image with no text wrap
Excellent ce site! merci!
VDigital a écrit:
PS pour Thierry: As-tu réussi à extraire la partie carrée de mes scripts?
ça y est je viens de tester avec une install de la 1.6.1 toute fraiche. je n'ai eu qu'a retirer:
<span class="hoverblk">
<img class="hoverimg"
src="{thumbnails.line.thumbnail.IMAGE}"
alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
title="{thumbnails.line.thumbnail.IMAGE_TITLE}" />
</span>
ou alors laisser le fichier thumbnail.tpl inchangé comme vous m'avez proposé marche aussi :)
Merci Vincent! on peut donc mettre le overbox facilement en option.
j'ai ajuste la classe ".clip_tb" a mon gout => clip: rect(0px 80px 80px 0px);
je peux maintenant avoir facilement 7 colonnes d'images sur un ecran de 1024 pixel. :)
une petite chose que je cherche maintenant est que les zones tronquées soient symétriques:
pour les images horizontales je voudrais tronquer un peu à gauche et à droite au lieu de ne tronquer qu'à droite. idem pour les images verticales.
sinon, pour moi non plus la zone clickable n'est pas bonne sous ie.
Thierry.
VDigital a écrit:
VDigital a écrit:
Je viens de voir le site de dmaille
http://www.maillefaud.info/photo/index.php?/category/32Ne marche pas avec IE.
Je confirme... et heureusement pour moi car je n'ai rien modifié et aurais donc été dans l'impossibilité de vous donner une solution, lol...
VDigital a écrit:
Je viens de voir le site de dmaille
http://www.maillefaud.info/photo/index.php?/category/32
Ne marche pas avec IE.
tlegras a écrit:
je viens de relire plus attentivement le fil de discussion complet et vient de trouver la reponse a ma question. merci donc et désolé pour les posts intempestifs. je vais essayer avec l'exemple donné par Vincent. je ne suis pas intéressé par l'affichage de la vignette compléte en hover, donc ça doit être plus simple pour moi.
Thierry.
Pour tous ceux qui s'interressent aux css et ce qui est réalisable je conseillerai l'excellent site:
http://www.dynamicdrive.com/style/csslibrary/tos/
Je pense que le papa de sucatify serait d'ailleurs interressé par ceci:
Floating image with no text wrap
8-)
PS pour Thierry: As-tu réussi à extraire la partie carrée de mes scripts?
Je viens de voir le site de dmaille
http://www.maillefaud.info/photo/index.php?/category/32
Hoverbox marche parfaitement chez lui...
Bravo !!!
A lui de nous donner sa solution.
8-)
Je retire mon post
VDigital a écrit:
tlegras a écrit:
je viens de relire plus attentivement le fil de discussion complet et vient de trouver la reponse a ma question. merci donc et désolé pour les posts intempestifs. je vais essayer avec l'exemple donné par Vincent. je ne suis pas intéressé par l'affichage de la vignette compléte en hover, donc ça doit être plus simple pour moi.
Thierry.Effectivement, si tu ne cherches que le carré. Les css suffisent à répondre à ton problème.
Cela n'économise pas l'espace disque mais si demain tu veux revenir à une miniature normale, il suffit de changer la class utilisée.
Et le tour sera joué.
8-)
Et ça permet d'avoir des templates à miniatures carrées et d'autres avec miniatures standard. Bref, c'est souple :-)
tlegras a écrit:
je viens de relire plus attentivement le fil de discussion complet et vient de trouver la reponse a ma question. merci donc et désolé pour les posts intempestifs. je vais essayer avec l'exemple donné par Vincent. je ne suis pas intéressé par l'affichage de la vignette compléte en hover, donc ça doit être plus simple pour moi.
Thierry.
Effectivement, si tu ne cherches que le carré. Les css suffisent à répondre à ton problème.
Cela n'économise pas l'espace disque mais si demain tu veux revenir à une miniature normale, il suffit de changer la class utilisée.
Et le tour sera joué.
8-)
je viens de relire plus attentivement le fil de discussion complet et vient de trouver la reponse a ma question. merci donc et désolé pour les posts intempestifs. je vais essayer avec l'exemple donné par Vincent. je ne suis pas intéressé par l'affichage de la vignette compléte en hover, donc ça doit être plus simple pour moi.
Thierry.
Bonjour,
Pratique l'idée des vignettes carrées. je trouve que ça permet d'avoir une page très compacte pour les gros albums. quelqu'un aurait-il par hasard le bout de code qui permet de rogner et/ou redimensionner les vignettes rectangulaire en un format carré unique? c'est faisable en css uniquement?
Thierry.
en résumé ces scripts :
- adaptent l'image (redimensionnement de l'image pour que la plus petite des dimensions fasse 120px)
- "découpent" l'image avec un outil qui fait 120px*120px dans la zone médiane de l'image H ou V (c'est ce point qui m'a obligé de faire 2 scripts puisqu'il faut center le "découpage" horizontalement sur les images H et verticalement pour les images V)
Bien aprés la bataille : en n'utilisant pas l'outil recadrage mais la taille de la zone de travail (options par défaut) tu peux faire un seul script photoshop.
Cordialement,
Philippe LAGARDE