loupe pour les images

par pecke62 Sam 27 Nov 2010 - 1:08

bonsoir , est il possible d'avoir une loupe sur les images dans un post afin de voir certains details ?

j'ai trouvé un script qui le fait mais seulement lorsqu'on le place dans :

pa => general => categorie et forum => description "d'un forum quelquonque"

Code:: </script> <title>valid.tjp.hu - TJPzoom 3 - JavaScript / CSS / DOM image magnifier</title> <script type="text/javascript" src="http://valid.tjp.hu/tjpzoom/tjpzoom.js"></script> <script type="text/javascript"></script> <table cellspacing="0" cellpadding="0" border="0"><tr><td width="50%"></td><td> <img src="http://s1.e-monsite.com/2009/07/29/6427189pause-cafe-400x300-jpg.jpg" onmouseover="TJPzoom(this);" /> </td><td width="50%"></td></tr></table>

merci pour votre aide

par FANCH 56 Sam 27 Nov 2010 - 8:15

Bonjour

Voici deux code.

Le premier ouvre l'image avec un clic dans une nouvelle page.

Le deuxième agrandis la photo

AGANDISSEMENT IMAGE sur autre page

<a href="url grande image"><img src="url petite image"></a>

ROLL-OVER

<img src="PETITE IMAGE" border="0"onMouseOver="this.src='GRANDE IMAGE'" onMouseOut="this.src='PETITE IMAGE'">

par Adam_sfp Sam 27 Nov 2010 - 11:28

Bonjour

Les scripts ne fonctionnent pas dans les posts..

il faudrait placer la première partie de votre script dans description de site.

Code:: <script type=text/javascript src=http://valid.tjp.hu/tjpzoom/tjpzoom.js></script>

Et ensuite la deuxième partie dans votre post

Code:: <table cellspacing="0" cellpadding="0" border="0"><tr><td width="50%"></td><td> <img src="http://s1.e-monsite.com/2009/07/29/6427189pause-cafe-400x300-jpg.jpg" onmouseover="TJPzoom(this);" /> </td><td width="50%"></td></tr></table>

mais j'ai des doutes avec le onmouseover dans les posts....

Sinon essayer de faire une recherche via google Zoom jquery

il y a des effets assez sympathiques nécessitant souvent 2 images (une petite une grande )
Comme ici par exemple ICI

Cordialement.

par FANCH 56 Sam 27 Nov 2010 - 11:36

Bonjour

C'est super cet effet.

Dommage je ne comprends rien car en anglais.

Y a-til un site en Français à ce sujet ?

par Adam_sfp Sam 27 Nov 2010 - 12:07

Bonjour Fanch

Et bien si on prend l'exemple plus haut il faut héberger les fichiers nécessaires par exemple chez archive host.

Et ensuite dans une page html si on prend l'exemple donné..
Cela donne

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>  <link href="http://sd-1.archive-host.com/membres/up/37821634957680146/zoom/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  <script type="text/JavaScript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/zoom/js/cloud-zoom102.js"></script> </head> <body> <a href='http://sd-1.archive-host.com/membres/up/37821634957680146/zoom/images/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4, softFocus:true"> <img src="http://sd-1.archive-host.com/membres/up/37821634957680146/zoom/images/smallimage.jpg" alt='' align="left" title="Optional title display" /> </a> </body> </html>

Ce qui donne Ceci

A personnaliser ensuite comme bon vous semble.

Cordialement.

par FANCH 56 Sam 27 Nov 2010 - 14:02

Merci Adam

Je vais étudier la chose

par pecke62 Sam 27 Nov 2010 - 19:40

bonsoir Adam_sfp et merci pour toutes ces infos , c'est vrai que l'effetest superbe ... cheers

mais dans un post ça ne marche pas Confused

par Neptunia Dim 28 Nov 2010 - 0:29

Bonsoir !

pecke62 a écrit:c'est vrai que l'effetest superbe ... mais dans un post ça ne marche pas

Bah j'ai eu la curiosité de voir ce que ça donnait, et ça fonctionne parfaitement dans un message.
Le code se compose de quatres parties. Il faut simplement placer ces 4 parties au bon endroit pour que cela fonctionne dans les messages.

1/ Partie CSS, à ajouter à votre css personnalisé.

Code:: /* This is the moving lens square underneath the mouse pointer. */ .cloud-zoom-lens { border: 4px solid #888; margin:-4px; /* Set this to minus the border thickness. */ background-color:#fff; cursor:move; } /* This is for the title text. */ .cloud-zoom-title { font-family:Arial, Helvetica, sans-serif; position:absolute !important; background-color:#000; color:#fff; padding:3px; width:100%; text-align:center; font-weight:bold; font-size:10px; top:0px; } /* This is the zoom window. */ .cloud-zoom-big { border:4px solid #ccc; overflow:hidden; } /* This is the loading message. */ .cloud-zoom-loading { color:white; background:#222; padding:3px; border:1px solid #000; }

2/ Bibliothèque jQuery.
A ignorer, vu qu'elle est déjà automatiquement chargée sur un forum ForumActif

Code::  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

3/ Partie javascript.
A positionner quelque part qui en rendra l'accès depuis tout votre forum (Description du forum ou overall_header. Pour ma part je l'ai placé dans le overall_header juste avant la balise </head>

Code::  <script type="text/JavaScript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/zoom/js/cloud-zoom102.js"></script>

4/ Et pour finir, la partie HTML à placer dans votre post.

Code:: <a href='http://sd-1.archive-host.com/membres/up/37821634957680146/zoom/images/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4, softFocus:true"> <img src="http://sd-1.archive-host.com/membres/up/37821634957680146/zoom/images/smallimage.jpg" alt='' align="left" title="Optional title display" /> </a>

par pecke62 Dim 28 Nov 2010 - 10:45

merci bien pour les infos AoF-Neptune
Wink

par contre 1/ Partie CSS, à ajouter à votre css personnalisé je ne sais pas ou cela se trouve Confused

ainsi que la partie 3/ Partie javascript Confused

désolé de vous embeter avec cela mais je ne voudrais pas faire n'importe quoi

par tupac Dim 28 Nov 2010 - 11:15

Bonjour

Pour le CSS

1/ affichage
2/ couleurs
3/ feuille de style css

et pour le 3/

1/ affichage
2/ templates puis général
3/ overall_header puis tu le place juste avant la balise </head> qui ce trouve au 3/4 du code sur la gauche

Bonne journée

par pecke62 Dim 28 Nov 2010 - 11:29

merci pour les infos tupac thumright

je viens de faire tout cela mais ça ne marche toujours pas chez moi ? je dois être vraiment mauvais ... Laughing

par pecke62 Dim 28 Nov 2010 - 11:38

arffff , je viens de trouver pourquoi .... j'ai changé de navigateur et là ça marche Laughing

c'est pas encore ce que je voulais mais bon .... là je n'ai pas la loupe lorsque je me ballade sur l'image comme sur le post de Adam_sfp
,mais juste un grossissement + et - sur la totalité Wink

par tupac Dim 28 Nov 2010 - 12:01

J'ai replacé les codes pour que vous puissiez voir que l'effet loupe fonctionne clique ici

par pecke62 Dim 28 Nov 2010 - 12:21

merci bien tupac , pourquoi chez moi je n'ai que la loupe avec + et - ? et pas le carré comme sur ton lien ?

par tupac Dim 28 Nov 2010 - 12:29

Tu as bien placé la parti HTML dans affichage , page d'accueil , généralité puis dans le contenu du message.

par pecke62 Dim 28 Nov 2010 - 18:43

non je l'ai mis dans mon post .... je viens d'essayer et si je met à l'endroit que vous m'indiquez l'image se retrouve sur ma page d'acceuil sous la banniere ? ?? et c'est la même chose pour la loupe ???

bisard ce truc .... Confused

par pecke62 Dim 28 Nov 2010 - 20:14

he bien voilà ,en créant une nouvelle page html et en collant le code dedans ça marche niquel cheers

maintenant comment faire pour l'on puisse avoir la même chose dans un post ? j'ai essayer de mettre le lien de cette page à defaut d'autre chose mais on a une page vide ?

Mad

par tupac Dim 28 Nov 2010 - 21:34

En m'étant le code HTML dans le post sans toucher au lien qu'il y a déjà dans le code cela marche très bien mais dès que l'on introduit notre propre image ça ne marche plus et j'ai aucune idée de comment faire pour transformer nos liens images en zoom.

par pecke62 Dim 28 Nov 2010 - 21:41

je pense qu'il faut heberger une image et remplacer les liens par ceux là , le probleme est que le resultat n'est pas terrible , ça marche mais l'image reste trés petite Crying or Very sad

par tupac Dim 28 Nov 2010 - 22:33

pour cet effet loupe il y a une seul image mais le problème c'est que les liens de chaque code sont différent alors je sais pas si il faut les arranger nous même ou héberger l'image de plusieurs façons.

par Neptunia Lun 29 Nov 2010 - 4:23

Me revoilà pour parler du code déniché par Adam_sfp et que j'ai décomposé en 4 parties dans mon premier message.

Je ne reviendrais pas sur les parties css / jQuery et Javascript qui semblent avoir été assimilées.

Maintenant je vais détailler cette fameuse partie HTML à mettre dans le corps des messages.

Code:: <a href='http://sd-1.archive-host.com/membres/up/37821634957680146/zoom/images/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4, softFocus:true"> <img src="http://sd-1.archive-host.com/membres/up/37821634957680146/zoom/images/smallimage.jpg" alt='' align="left" title="Optional title display" /> </a>

On voit clairement qu'il y a deux images ( bigimage00.jpg et smallimage.jpg )
Ce script ne sert pas à effectuer un zoom, mais à faire croire qu'il le fait.
En clair, pour que ca fonctionne il vous faut :
- Trouver votre image grand format (plus elle est grande, plus le résultat sera à la hauteur.
- En faire une sauvegarde sous forme de miniature. Vous enregistrez la même image en réduisant sa largeur et hauteur.
- Héberger ces deux images.

Si votre image de départ est en 1024*768 et que vous faites une image de 256*192, vous obtiendrez un zoom de 16x

par pecke62 Lun 29 Nov 2010 - 20:23

merci bien AoF-Neptune, j'essaye cela et je te tiens informé du résultat Wink

par pecke62 Lun 29 Nov 2010 - 21:28

bon he bien pour moi messieurs c'est que du bonheur cheers

:thanks: à tous pour votre aide

victoire

par tupac Lun 29 Nov 2010 - 22:22

Bonsoir

Effectivement j'ai testé et ça fonctionne très bien.

Comme je ne suis pas l'auteur de la demande je ne clôturai pas le sujet je laisse l'initiative a Pecke

Merci et bonne continuation a vous deux.

loupe pour les images

loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images

Re: loupe pour les images