Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1758 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Modification diaporama panoramique javascript

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Modification diaporama panoramique javascript

n°2027214
ideal6
Posté le 06-10-2010 à 10:31:00  profilanswer
 

Bonjour,
je débute vraiment en javascript. j'ai trouvé un script que j'ai adapté pour un site.Il s'agit d'un diaporama panoramique. Il me convient mais je souhaiterais une modification que je n'arrive pas à réaliser.
Comme vous pouvez le voir sur le lien ci-dessous, les photos du diaporama du haut défilent à gauche ou à droite mais en boucle, c'est là mon problème.
Je voudrais que celles-ci défilent et s'arrêtent par rapport à sa dimension vers la gauche ou la droite( bords gauche et droit du panoramique). A quel endroit je doit mettre la fonction pour le blocage.
voici le lien :http://galaxyweb.free.fr/systeme.php
 
exemple de blocage: http://www.hochsicht.ch/francais/index.html dans menu , faire galerie puis panorama
 
voici le code:  
 
<!--//
// personalisation de la fenêtre d'affichage du diaporama
function PL(){
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
}
function TT(){
 
MX=7 // Entrez le nombre Total d'images
}
image="diaporama360/photos/stockholm1.jpg"; // l'adresse complete de l'image à afficher au demarrage
/*
Donnez l'adresse complete de chaque image et tenez compte que vous avez la possibilité d'importer
des images externes de toutes sortes dans les mêmes dimentions que le diaporama
*/
var imgUrl=new Array();
imgUrl[0]="diaporama360/photos/stockholm1.jpg";
imgUrl[1]="diaporama360/photos/stockholm.jpg";
imgUrl[2]="diaporama360/photos/etoile.gif";
imgUrl[3]="diaporama360/photos/images.gif";
imgUrl[4]="diaporama360/outils/background.jpg";
imgUrl[5]="diaporama360/photos/ciel.jpg";
imgUrl[6]="diaporama360/photos/soir.jpg";
 
/*
la liste d'images: entrez ici les noms ou les titres des images
*/
 
op = '<option value="'
 
fop = '</option>'
 
image1 = op+imgUrl[0]+'">Bienvenus'+fop;
 
image2 = op+imgUrl[1]+'">stockholm'+fop;
 
image3 = op+imgUrl[2]+'">Des étoiles'+fop;
 
image4 = op+imgUrl[3]+'">Des images'+fop;
 
image5 = op+imgUrl[4]+'">Background mobil'+fop;
 
image6 = op+imgUrl[5]+'">Ciel sur mer'+fop;
 
image7 = op+imgUrl[6]+'">Beauté du soir'+fop; // Ajouter des option, si vous voulez
 
 
L = image1+image2+image3+image4+image5+image6+image7 // entrez ici les nouvelles images dans l'ordre
 
 
/*
création du diaporama
*/
 
Limg=498 ; // Largeur de l'image
Himg=220 ; // Hauteur de l'image
/*
creation de la commande de vitesse
*/
Mask="diaporama360/outils/gif1.gif"; // adresse comlete de l'image mask
Lmsk=60 ; // Largeur de l'image mask
Hmsk=240 ; // Hauteur de l'image mask
Lmskstop=12 ; // Largeur de la commande Stop
bordure=1 ; // si vous ne voulez pas de bordure alors mettez 0
couleur="#003366" ; // entrez la couleur de la bordure
document.write('<style type="text/css" media="screen">');
document.write('#Diapo360{width: '+ Limg + 'px; height: '+ Himg +'px; background-color:#000000;}'+'IMG {cursor: pointer;};');
document.write('</style>');
var Diapo360 = document.getElementById("Diapo360" );
Diapo360.style.border = "solid "+bordure+"px "+couleur;
Diapo360.style.background = "url("+image+" ) repeat";
X = 1; // glissement à un coté
Y = -1; // glissement inversé
D = 10; // vitesse de rotation
/*
image mask pour variation de vitesse
*/
imd= '<img onmouseover=\'Y = ';
imf= '\' border=0 src=diaporama360/outils/gif1.gif width='+Lmsk+' height='+Hmsk+'>';
/*
la largeure de l'image mask pour le stop
*/
imfs= '\' border=0 src='+Mask+' width='+Lmskstop+' height='+Hmsk+'>';
setInterval('Deroulement()', 90); // 90 = Duré du pause
function Deroulement()
{
X += Y / D*100 ;
document.getElementById("Diapo360" ).style.backgroundPosition = X + "px";
}
/*
creation et affichage des images maske pour commonder la vitesse
Pour augmenter ou deminuer la vitesse à droite et à gauche Vous pouvez modifier les valeurs dans les lignes suivantes
pour faire tourner avec ou contre le mouvement du curseur il suffit de changer les valeurs positive contre les valeurs negatives au lignes suivantes.
*/
var editer = ""+
imd+ 7 + imf+
imd+ 2.5 + imf+
imd+ 0.7 + imf+
imd+ 0.3 + imf+
imd+ 0 + imfs+ // la commonde du stop
imd+ -0.3 + imf+
imd+ -0.7 + imf+
imd+ -2.5 + imf+
imd+ -7 + imf+
""; // on peut ajouter et supprimer des masks de vitesse dans les deux sens
Diapo360.innerHTML =(editer);
/*
Option de sélection et remplacement d'images
*/
var selection = 0;
function versplus() {
TT()
// annonce la fin du diaporama
if (selection >=MX-1)
alert('Fin du diaporama pour afficher d\'autres images \n\rCliquer sur: [ <<= ]\r\nOu sélectionnez une image dans la liste.');
selection = document.forms[1].elements[0].selectedIndex;
if (selection < document.forms[1].elements[0].length-1) {selection ++;}
document.forms[1].elements[0].selectedIndex=selection;
}
function versmoins() {
// annonce le debut du diaporama
if (selection == 0)
alert('Debut du diaporama pour afficher d\'autre images \n\rCliquer sur: [ =>> ]\r\nOu sélectionnez une image dans la liste.');
selection = document.forms[1].elements[0].selectedIndex;
if (selection > 0) {selection --;}
document.forms[1].elements[0].selectedIndex=selection;
}
function ChoiX(selection) {
document.forms[1].elements[0].selectedIndex = selection;
}
// Affiche l'image sélectionnée sur la liste deroulante
function ApLiQuE() {
selection = document.forms[1].elements[0].selectedIndex;
document.Diapo360.style.backgroundImage = "url("+ imgUrl[selection] +" )";
}
// Création des liens
function changeliens(FF,x)
{
if(document.getElementById)
document.getElementById(x).innerHTML = FF;
}
// Affichage des liens
function AFICHE()
{
changeliens('<a title="afficher la page d\'information" target=_blank href='+document.imageimportee.choix.value+'.htm><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 3px" border=0 src=outils/apage.gif width=16 height=16> Page','lien_page'); changeliens('<a title="afficher l\'image entière" target=_blank href='+document.imageimportee.choix.value+'><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 5px" border=0 src=outils/aimage.gif width=16 height=16> Image','lien_image');
}
CO='<span style="FONT-SIZE: 7pt"><a title="Pur Tout Contact Cliquez ICI" style="TEXT-DECORATION: none" href="http://siv.site.voila.fr/index.htm" target="_blank"><font color="#353535"></font></a></span>';
// Tres important: si vous utilisez des images importés d'autres emplassements... vous devez créer un liens vers la page d'information en relation, si non suprimez le liens de la page.
// -->  
 
Merci de votre réponse

mood
Publicité
Posté le 06-10-2010 à 10:31:00  profilanswer
 

n°2027291
rufo
Pas me confondre avec Lycos!
Posté le 06-10-2010 à 14:19:03  profilanswer
 

balise "code" pour poster ton code sur ce forum, merci :o


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2027296
ideal6
Posté le 06-10-2010 à 14:31:02  profilanswer
 

rufo
modification effectuée, milles excuses
 

Code :
  1. <!--//
  2. // personalisation de la fenêtre d'affichage du diaporama
  3. function PL(){
  4. self.moveTo(0,0)
  5. self.resizeTo(screen.availWidth,screen.availHeight)
  6. }
  7. function TT(){
  8. MX=7 // Entrez le nombre Total d'images
  9. }
  10. image="diaporama360/photos/stockholm1.jpg"; // l'adresse complete de l'image à afficher au demarrage
  11. /*
  12. Donnez l'adresse complete de chaque image et tenez compte que vous avez la possibilité d'importer
  13. des images externes de toutes sortes dans les mêmes dimentions que le diaporama
  14. */
  15. var imgUrl=new Array();
  16. imgUrl[0]="diaporama360/photos/stockholm1.jpg";
  17. imgUrl[1]="diaporama360/photos/stockholm.jpg";
  18. imgUrl[2]="diaporama360/photos/etoile.gif";
  19. imgUrl[3]="diaporama360/photos/images.gif";
  20. imgUrl[4]="diaporama360/outils/background.jpg";
  21. imgUrl[5]="diaporama360/photos/ciel.jpg";
  22. imgUrl[6]="diaporama360/photos/soir.jpg";
  23. /*
  24. la liste d'images: entrez ici les noms ou les titres des images
  25. */
  26. op = '<option value="'
  27. fop = '</option>'
  28. image1 = op+imgUrl[0]+'">Bienvenus'+fop;
  29. image2 = op+imgUrl[1]+'">stockholm'+fop;
  30. image3 = op+imgUrl[2]+'">Des étoiles'+fop;
  31. image4 = op+imgUrl[3]+'">Des images'+fop;
  32. image5 = op+imgUrl[4]+'">Background mobil'+fop;
  33. image6 = op+imgUrl[5]+'">Ciel sur mer'+fop;
  34. image7 = op+imgUrl[6]+'">Beauté du soir'+fop; // Ajouter des option, si vous voulez
  35. L = image1+image2+image3+image4+image5+image6+image7 // entrez ici les nouvelles images dans l'ordre
  36. /*
  37. création du diaporama
  38. */
  39. Limg=498 ; // Largeur de l'image
  40. Himg=220 ; // Hauteur de l'image
  41. /*
  42. creation de la commande de vitesse
  43. */
  44. Mask="diaporama360/outils/gif1.gif"; // adresse comlete de l'image mask
  45. Lmsk=60 ; // Largeur de l'image mask
  46. Hmsk=240 ; // Hauteur de l'image mask
  47. Lmskstop=12 ; // Largeur de la commande Stop
  48. bordure=1 ; // si vous ne voulez pas de bordure alors mettez 0
  49. couleur="#003366" ; // entrez la couleur de la bordure
  50. document.write('<style type="text/css" media="screen">');
  51. document.write('#Diapo360{width: '+ Limg + 'px; height: '+ Himg +'px; background-color:#000000;}'+'IMG {cursor: pointer;};');
  52. document.write('</style>');
  53. var Diapo360 = document.getElementById("Diapo360" );
  54. Diapo360.style.border = "solid "+bordure+"px "+couleur;
  55. Diapo360.style.background = "url("+image+" ) repeat";
  56. X = 1; // glissement à un coté
  57. Y = -1; // glissement inversé
  58. D = 10; // vitesse de rotation
  59. /*
  60. image mask pour variation de vitesse
  61. */
  62. imd= '<img onmouseover=\'Y = ';
  63. imf= '\' border=0 src=diaporama360/outils/gif1.gif width='+Lmsk+' height='+Hmsk+'>';
  64. /*
  65. la largeure de l'image mask pour le stop
  66. */
  67. imfs= '\' border=0 src='+Mask+' width='+Lmskstop+' height='+Hmsk+'>';
  68. setInterval('Deroulement()', 90); // 90 = Duré du pause
  69. function Deroulement()
  70. {
  71. X += Y / D*100 ;
  72. document.getElementById("Diapo360" ).style.backgroundPosition = X + "px";
  73. }
  74. /*
  75. creation et affichage des images maske pour commonder la vitesse
  76. Pour augmenter ou deminuer la vitesse à droite et à gauche Vous pouvez modifier les valeurs dans les lignes suivantes
  77. pour faire tourner avec ou contre le mouvement du curseur il suffit de changer les valeurs positive contre les valeurs negatives au lignes suivantes.
  78. */
  79. var editer = ""+
  80. imd+ 7 + imf+
  81. imd+ 2.5 + imf+
  82. imd+ 0.7 + imf+
  83. imd+ 0.3 + imf+
  84. imd+ 0 + imfs+ // la commonde du stop
  85. imd+ -0.3 + imf+
  86. imd+ -0.7 + imf+
  87. imd+ -2.5 + imf+
  88. imd+ -7 + imf+
  89. ""; // on peut ajouter et supprimer des masks de vitesse dans les deux sens
  90. Diapo360.innerHTML =(editer);
  91. /*
  92. Option de sélection et remplacement d'images
  93. */
  94. var selection = 0;
  95. function versplus() {
  96. TT()
  97. // annonce la fin du diaporama
  98. if (selection >=MX-1)
  99. alert('Fin du diaporama pour afficher d\'autres images \n\rCliquer sur: [ <<= ]\r\nOu sélectionnez une image dans la liste.');
  100. selection = document.forms[1].elements[0].selectedIndex;
  101. if (selection < document.forms[1].elements[0].length-1) {selection ++;}
  102. document.forms[1].elements[0].selectedIndex=selection;
  103. }
  104. function versmoins() {
  105. // annonce le debut du diaporama
  106. if (selection == 0)
  107. alert('Debut du diaporama pour afficher d\'autre images \n\rCliquer sur: [ =>> ]\r\nOu sélectionnez une image dans la liste.');
  108. selection = document.forms[1].elements[0].selectedIndex;
  109. if (selection > 0) {selection --;}
  110. document.forms[1].elements[0].selectedIndex=selection;
  111. }
  112. function ChoiX(selection) {
  113. document.forms[1].elements[0].selectedIndex = selection;
  114. }
  115. // Affiche l'image sélectionnée sur la liste deroulante
  116. function ApLiQuE() {
  117. selection = document.forms[1].elements[0].selectedIndex;
  118. document.Diapo360.style.backgroundImage = "url("+ imgUrl[selection] +" )";
  119. }
  120. // Création des liens
  121. function changeliens(FF,x)
  122. {
  123. if(document.getElementById)
  124. document.getElementById(x).innerHTML = FF;
  125. }
  126. // Affichage des liens
  127. function AFICHE()
  128. {
  129. changeliens('<a title="afficher la page d\'information" target=_blank href='+document.imageimportee.choix.value+'.htm><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 3px" border=0 src=outils/apage.gif width=16 height=16> Page','lien_page'); changeliens('<a title="afficher l\'image entière" target=_blank href='+document.imageimportee.choix.value+'><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 5px" border=0 src=outils/aimage.gif width=16 height=16> Image','lien_image');
  130. }
  131. CO='<span style="FONT-SIZE: 7pt"><a title="Pur Tout Contact Cliquez ICI" style="TEXT-DECORATION: none" href="http://siv.site.voila.fr/index.htm" target="_blank"><font color="#353535"></font></a></span>';
  132. // Tres important: si vous utilisez des images importés d'autres emplassements... vous devez créer un liens vers la page d'information en relation, si non suprimez le liens de la page.
  133. // -->

n°2027303
rufo
Pas me confondre avec Lycos!
Posté le 06-10-2010 à 14:48:24  profilanswer
 

Remarque : la fonction TT() m'a l'air complètement inutile dans la mesure où il suffit de récupérer la taille du tableau imgUrl. Faudrait donc au moins modifier cette fonction en ce sens car là, si tu mets moins d'images dans imgUrl que la valeur mise dans MX, ça va pas le faire => risque d'erreur et pas dynamique comme script :/...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2027322
ideal6
Posté le 06-10-2010 à 15:33:37  profilanswer
 

Merci de ta réponse
et en ce qui concerne mon problème , tu as une idée?
on m'a proposé de modifier la fonction déroulement
 

Code :
  1. function Deroulement() {
  2.   X += Y / D * 100;
  3.   document.getElementById("Diapo360" ).style.backgroundPosition = X + "px";
  4. }


voici le message:
tout se passe dans ta fonction Deroulement()
- Calcul de la prochaine position en appliquant la formule
- Test de la position par rapport aux bornes gauche et droite
 
    * Borne Droite, la plus simple est égale à ZERO
    * Borne Gauche est égale à la largeur de l'image de fond MOINS la largeur de la fenêtre d'affichage.
      Si on est en dehors on réajuste sur les bornes...
 
- Déplacement du background  
 
il te suffit donc de tester la position du background et de le bloquer dans un sens comme dans l'autre.
 
;O)
 
Je ne vois pas a quel endroit intégrer cette fonction et vous?


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Modification diaporama panoramique javascript

 

Sujets relatifs
[JavaScript] Pb compatibilité avec Chrome (page vierge affichée)classe liste avec alerte en cas de modification [résolu]
demande d aide pour integration de javascript sur blogVos avis pour un site Joomla, modification Php
gwt et javascript[Javascript] Tableau de fonctions et Array.prototype
Javascript dans une iframecomment lire tableau html en javascript ?
Modification d'un site et référencementFonction Javascript pour slideup / slidedown multiples
Plus de sujets relatifs à : Modification diaporama panoramique javascript


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR