loupe pour les images

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu loupe pour les images

Message par pecke62 le 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"><!--
var TJPzoomoffset='smart';
//--></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


Dernière édition par pecke62 le Lun 29 Nov 2010 - 21:28, édité 1 fois

pecke62
****

Masculin
Messages : 245
Inscrit(e) le : 06/07/2004

http://pechetmer.forumactif.com
pecke62 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par FANCH 56 le 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'">


Dernière édition par FANCH 56 le Sam 27 Nov 2010 - 11:37, édité 1 fois

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par Adam_sfp le 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.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par FANCH 56 le 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 ?


FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par Adam_sfp le 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>

<!-- Load the Cloud Zoom CSS file -->
<link href="http://sd-1.archive-host.com/membres/up/37821634957680146/zoom/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Load the Cloud Zoom JavaScript file -->
<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.


Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par FANCH 56 le Sam 27 Nov 2010 - 14:02

Merci Adam

Je vais étudier la chose

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par pecke62 le 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

pecke62
****

Masculin
Messages : 245
Inscrit(e) le : 06/07/2004

http://pechetmer.forumactif.com
pecke62 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: loupe pour les images

Message par Neptunia le Dim 28 Nov 2010 - 0:29

Bonsoir !

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

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:
<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<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:
<!-- Load the Cloud Zoom JavaScript file -->
<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>

Neptunia
+ Hyperactif +

Féminin
Messages : 10394
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par pecke62 le 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

pecke62
****

Masculin
Messages : 245
Inscrit(e) le : 06/07/2004

http://pechetmer.forumactif.com
pecke62 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par tupac le 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

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par pecke62 le 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

pecke62
****

Masculin
Messages : 245
Inscrit(e) le : 06/07/2004

http://pechetmer.forumactif.com
pecke62 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par pecke62 le 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


pecke62
****

Masculin
Messages : 245
Inscrit(e) le : 06/07/2004

http://pechetmer.forumactif.com
pecke62 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par tupac le Dim 28 Nov 2010 - 12:01

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

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par pecke62 le 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 ?

pecke62
****

Masculin
Messages : 245
Inscrit(e) le : 06/07/2004

http://pechetmer.forumactif.com
pecke62 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par tupac le 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.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par pecke62 le 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

pecke62
****

Masculin
Messages : 245
Inscrit(e) le : 06/07/2004

http://pechetmer.forumactif.com
pecke62 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par pecke62 le 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

pecke62
****

Masculin
Messages : 245
Inscrit(e) le : 06/07/2004

http://pechetmer.forumactif.com
pecke62 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par tupac le 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.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par pecke62 le 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

pecke62
****

Masculin
Messages : 245
Inscrit(e) le : 06/07/2004

http://pechetmer.forumactif.com
pecke62 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par tupac le 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.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par Neptunia le 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

Neptunia
+ Hyperactif +

Féminin
Messages : 10394
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par pecke62 le Lun 29 Nov 2010 - 20:23

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

pecke62
****

Masculin
Messages : 245
Inscrit(e) le : 06/07/2004

http://pechetmer.forumactif.com
pecke62 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par pecke62 le Lun 29 Nov 2010 - 21:28

bon he bien pour moi messieurs c'est que du bonheur cheers Thanks à tous pour votre aide

victoire

pecke62
****

Masculin
Messages : 245
Inscrit(e) le : 06/07/2004

http://pechetmer.forumactif.com
pecke62 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: loupe pour les images

Message par tupac le 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.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum