Zoom PHP - Programmation Web (HTML, PHP, ASP, Java, XML, etc.)

***Benjy*** · #1 05-03-2004, 11:48

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é).

**Fred** · #2 05-03-2004, 12:08

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.

Anonymous_jm · #3 05-03-2004, 12:48

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:

**Fred** · #4 05-03-2004, 13:22

Quote:

Originally Posted by Anonymous_jm

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:

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

Anonymous_jm · #5 05-03-2004, 14:40

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:

**Fred** · #6 05-03-2004, 21:33

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 ?

Anonymous_jm · #7 06-03-2004, 06:43

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

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
PHP 4.3.10 et PHP 5.0.3	1for-matik	Actualité	0	16-12-2004 18:40
Zoom Player 4.02 Final	Steven	Vos news	1	19-08-2004 18:40
PHP 5.0.0 Final	Toitoine	Actualité	10	18-07-2004 17:16
Zoom Player (Beta) 4.00 RC3	Toitoine	Actualité	1	09-06-2004 12:13
creer un site en php	kenny250	Discussions sur le site et/ou le forum	5	03-11-2002 11:40

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)