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:

Quote:

Originally Posted by Anonymous_jm

Tu as toutes les templates dans le dossier correspondant, si tu as plusieurs thèmes il faudra insérer le code dans les plusieurs entêtes, perso je te recommande de faire un fichier js que tu appelle dans chaque head, ce sera moins lourd et plus centralisé si tu as des modifs à faire.

Sinon, je vois pas pourquoi le JS devient "fatiguant" pour l'utilisateur, Javascript ne sert pas qu'à faire des animations avec des bestioles vertes qui suivent ton curseur ou un fond d'écran stroboscope, il permet également un certain nombre de modifications dynamiques de ta page très intéressantes. Il est d'ailleurs possible de créer un site complet avec une seule page html grâce à Javascript. C'est un peu pour les intégristes, mais c'est parfaitement faisable et ca ne demande alors à l'utilisateur que de télécharger une page, la navigation hors connexion est améliorée, et la charge serveur également. JS est complémentaire de php pour un bon site dynamique, et il existe de nombreux cas dans lesquels JS fait très bien son boulot sans nécessiter PHP. C'est pour cela que je te recommande de lire un bon bouquin sur JS, pour avoir un aperçu de toutes les possibilités qu'il offre. Un exemple : l'éditeur qui sert à taper et à éditer les posts sur le forum fait un grand appel à Javascript ;)

J'ai bien créé un zoom.js pour la fonction javascript. Ensuite le code pour bbcode je l'ai tenté de l'intégrer pour faire appel au fichier et crack erreur. Je lance encore ma recherche sur l'erreur. :cool:

Le ... code pour BBCode ? Qu'est-ce que BBCode a à faire là dedans ? Tu voulais pas simplement faire en sorte que les images du menu s'agrandissent dès que tu passe dessus ?

Oui, mais quand tu envois une image, c'est le bbcode qui est en action. ;)