Zoom PHP - Communauté Informatique NDFR.net

Communauté Informatique NDFR.net (http://www.ndfr.net/forums/index.php)

- Programmation Web (HTML, PHP, ASP, Java, XML, etc.) (http://www.ndfr.net/forums/forumdisplay.php?f=65)

- - Zoom PHP (http://www.ndfr.net/forums/showthread.php?t=3698)

Voilà j'explique mon problème. J'ai un forum Phpbb, (dsl je suis pas sur vBulletin, j'ai pas de sous :D )

Le problème c'est que j'aimerai intégré une fonction js pour un zoom sur image miniature (pas de popup). J'ai tenté de faire mon propre code mais en vain. J'ai cherché dans les modules des sites Phpbb rien à ce sujet. Personne n'a eu l'idée. Alors des personnes doués en code. S'il pouvait me prêter un peu de leur savoir. :alien:

Merci

Quote:

Originally Posted by Anonymous_jm

Salut Anonymous_jm,

Je veux bien voir pour le JS mais je n'est pas tout saisi, quel est l'effet désiré? ;)

Quote:

Originally Posted by SantX

Salut Anonymous_jm,
Je veux bien voir pour le JS mais je n'est pas tout saisi, quel est l'effet désiré? ;)

+1, j'ai pas tout capté ... c'est juste une image que tu veux agrandir au survol, c'est ca ?

Oh faite c'est une image miniature disont 200/200 px et dès qu'on clique avec la souris et bien un effet d'agrandissement se produit comme pour agrandir une fenêtre de windows. Pareil pour réduire, mais pour le format phpbb. :)

Quote:

Originally Posted by Anonymous_jm

Ok, mais j'ai une autre question (je veux pas jouer le mec chiant mais bon :D !),
que devient le reste du contenu de la page lors de cette agrandissement et après ?

$Text => Tu vois le menu ('PC utilisateur', 'Faq', 'Liste des membres', 'Calendrier', etc...)

// Tu cliques par exemple sur liens rapides
function ( Tu as le menu qui passe au-dessus du forum

/* Et bien c'est la même chose pour les images dans les posts. Mais faut arriver à intégréer la fonction dans BBcode.php (img) et dans viewtopic.tpl

//Je ne peux pas dire plus de détails, j'ai tout dis. :D :p

Quote:

Originally Posted by Anonymous_jm

Là je crois que je vais rester impuissant (face à celà ;) !) je ne m'y connais pas assez :D !

T'as pas un exemple anonymous ? Et ton truc, tu peux pas le faire en Flash des fois ? Trouve moi un exemple ici et je pourrais peut-être t'aider :
http://www.phpbb.com/phpBB/
http://area51.phpbb.com/phpBB22/

Je ne sais pas si tu connais GD library, le problème c'est qu'il n'est pas intégré pour être installer sous PHPbb.

GD Library
Gallery

Celui là je pense que tu verras plus claire
03: Endless Features!

Le problème c'est pas tellement que c'est pas intégré sous phpBB, tu peux très bien l'installer à part, mais c'est surtout que les manips ne se font pas "en live" : elles ont besoin d'un rafraîchissement de la page pour que php opère, et n'ont donc dans ton cas que peu d'intérêt.

Mmmmm, j'ai rien compris à ce que tu m'as dis. :D
J'ai demandé à un ancien collègue s'il serait faire ce type de code. Il m'a dit ce que je voulais c'est intégré du js dans du php. Il connait le php mais pas le js. :p

Ce qu'il me faut pour mettre à mon compte :D . C'est un bon support sur les fonctions de php et js pour faire mon propre code. :)

Un bon conseil : achète toi un bon bouquin sur Javascript, tu ne le regrettera pas ;)

Après 1h de dev...

Bon voilà une solution rapide, et facilement implémentable (et modifiable).

D'abord, tu mets ça entre tes balises <head> et </head> :

Code:

<script type="text/javascript">

<!--

var ndfrdivnum = 0;

function ndfr_zoomsh(divid)

{

if (document.getElementById)

{ //IE5 and NS6

document.getElementById(divid).style.filter += "progid:DXImageTransform.Microsoft.alpha(enabled=1,opacity=100)";

document.getElementById(divid).style.filter += "progid:DXImageTransform.Microsoft.shadow(direction=135,color=#666666,strength=3)";

if (document.getElementById(divid).style.visibility == 'visible')

{

document.getElementById(divid).style.display = 'none';

document.getElementById(divid).style.visibility = 'hidden';

}

else

{

document.getElementById(divid).style.display = '';

document.getElementById(divid).style.visibility = 'visible';

}

}

if ((document.all) && (!document.getElementById))

{ //IE4 only

document.all[divid].style.filter += "progid:DXImageTransform.Microsoft.alpha(enabled=1,opacity=100)";

document.all[divid].style.filter += "progid:DXImageTransform.Microsoft.shadow(direction=135,color=#666666,strength=3)";

if (document.all[divid].style.visibility == 'visible')

{

document.all[divid].style.display = 'none';

document.all[divid].style.visibility = 'hidden';

}

else

{

document.all[divid].style.display = '';

document.all[divid].style.visibility = 'visible';

}

}

if (document.layers)

{ //NS4.X only

if (document.layers[divid].visibility == 'show')

{

document.layers[divid].display = 'none';

document.layers[divid].visibility = 'hide';

}

else

{

document.layers[divid].display = '';

document.layers[divid].visibility = 'show';

}

}

}

function ndfr_zoom(tnp, tnw, tnh, imp, imw, imh, num)

{

document.write('<img src="' + imp + '" alt="Cliquez ici pour agrandir l\'image" name="ndfrzoomth' + num + '" width="' + tnw + '" height="' + tnh + '" border="0" id="ndfrzoomth' + num + '" onclick="java_script_:ndfr_zoomsh(\'ndfrzoomdiv' + num + '\');" style="cursor: pointer;" />');

document.write('<div id="ndfrzoomdiv' + num + '" style="display: none; left: 0px; position: relative; border: 1px solid #333333; height: ' + imh + 'px; top: 0px; visibility: hidden; width: ' + imw + 'px; z-index: 99;"><img src="' + imp + '" alt="" name="ndfrzoomimg' + num + '" width="' + imw + '" height="' + imh + '" border="0" id="ndfrzoomimg' + num + '" /></div>');

}

//-->

Ensuite, tu te crées un BBcode qui équivaut à appeler ça :

Code:

<script type="text/javascript">

<!--

ndfrdivnum ++;

ndfr_zoom('cheminv', largeurv, hauteurv, 'chemini', largeuri, hauteuri, ndfrdivnum);

//-->

</script>

Explications :
Ce code permet d'écrire une vignette, ainsi qu'un DIV contenant l'image en taille réelle. La fonction ndfr_zoom prend en paramètres, et dans cet ordre, le chemin vers la vignette, sa largeur, sa hauteur, le chemin vers l'image, sa largeur et sa hauteur. Le paramètre ndfrdivnum est passé automatiquement, et permet d'avoir plusieurs images "zoomables" sur une même page, sans conflit d'ID.

Modifications réalisables :
On peut parfaitement imaginer ne passer que le chemin de l'image, sa largeur et sa hauteur (ces paramètres sont obligatoires, sans quoi le DIV va foirer), puis utiliser l'image pour la vignette, en lui imposant une largeur et en ne donnant pas de hauteur (ou vice-versa). On peut aussi placer le DIV ailleurs, ou le rendre flottant (actuellement, il s'insère sous l'image, en déplacant le reste du contenu de la page). On peut aussi retirer les filtres spéciaux IE que j'ai mis (ombrage et opacité).

Re: Après 1h de dev...

La solution (superbement documentée) de Benjy ne t'empêche pas de te documenter sur le Javascript : c'est un language intéressant qui te permet parfois d'alléger la charge serveur et qui apporte souvent plus de réactivité côté client.

Faut pas abuser non plus du javascript, cela devient vite fatiguant pour le visiteur aussi. ;)

Benjy => Merci pour l'info, je vais m'aider de ton script. BBcode est déjà créé donc juste à le placer là ou il faut. Sinon pour l'insertion du premier script, faut que je vois ou le placer vu que se sont des tpl appellé par le php donc pas de <head></head>. :rolleyes: