begin process at 2012 05 29 10:26:11
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Function & Méthodes

 > 

Modification diaporama panoramique javascript


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Modification diaporama panoramique javascript

lundi 4 octobre 2010 à 18:42:54 | Modification diaporama panoramique javascript

bergeat

Membre Club
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).
voici le lien : [url=http://galaxyweb.free.fr/systeme.php][/url]

voici le code:

Code Javascript :
<!--//
// 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
lundi 4 octobre 2010 à 21:43:49 | Re : Modification diaporama panoramique javascript

PetoleTeam

Membre Club
Bonjour,
plus que des images qui défilent de gauche à droite tu n'as qu'une image qui est mise en background et que l'on décale.
C'est ici que cela se passe
Code Javascript :
function Deroulement() {
  X += Y / D * 100;
  document.getElementById("Diapo360").style.backgroundPosition = X + "px";
}

il te suffit donc de tester la position du background et de le bloquer dans un sens comme dans l'autre.

;O)
mardi 5 octobre 2010 à 13:21:10 | Re : Modification diaporama panoramique javascript

bergeat

Membre Club
merci beaucoup pour ta réponse
Je vais encore te solliciter , à quel endroit je doit mettre cette fonction pour le blocuage. Je n'y arrive pas, milles excuses.
mardi 5 octobre 2010 à 19:12:48 | Re : Modification diaporama panoramique javascript

PetoleTeam

Membre Club
Bonjour,
comme dit ci avant, tout ce 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

That's All!!
;O)
mercredi 6 octobre 2010 à 16:05:44 | Re : Modification diaporama panoramique javascript

bergeat

Membre Club
Code Javascript :
function Deroulement()
{
;0
}

malheureusement çà ne marche pas . L'image reste figée , il n'y a plus de défilement
mercredi 6 octobre 2010 à 16:15:59 | Re : Modification diaporama panoramique javascript

PetoleTeam

Membre Club
Bonjour,
malheureusement çà ne marche pas
- montres nous au moins ta fonction Deroulement()

- quelles sont les erreurs lues dans la Console d'erreurs ?

;O)


Cette discussion est classée dans : image, document, selection, imgurl, imd


Répondre à ce message

Sujets en rapport avec ce message

boucle de test [ par jytest ] Bonjour, Je suis sous dreamweaver cs4. J'utilise une routine javascript : function zoomLon(imgUrl) { if (imagehover!=imgurl) { document.getElemen Image suivant les déplacements du curseur [ par eduardocarrascorahal ] Bonjour, j'ai un problème pour attribuer une valeur de début et une valeur de fin à une image qui suit les déplacements du curseur. Elle dépasse les l Procédure qui ne veut pas s'exécuter. Pourquoi ? [ par jytest ] Bonjour, voici mon souci. Ma boucle ne s'effectue pas du tout, ni à l'intérieur, ni en sortie de boucle de test (voir le code plus loin) Bizarre. Pou Aide avec un script réduction image !!! [ par kangourouxxx ] Bonjour, je fait appel a vous car j'ai un petit problème de code. J'ai décidé d'alléger mon site et j'ai commencer par exporter tout mes code en .js e Changer d'image par la fonction document.getElementsByName [ par Aguanz ] Bonsoir à tous, voici mon problème: Je souhaiterai que le change d'image de fond d'écran dès lors que la variable obj soit nulle ou non. Le code so Commande Onclick agrandir image + afficher du texte [ par pharen ] bonjour à tous je souhaite réaliser une gallery photos ainsi les photos sont sur la page en petite taille. je click sur une photo et elle s'agrandit soucis de lien sur image [ par YouSsoliVan ] Bonjour, J ai un petit soucis avec le code javascript ci dessous, en fait, en cliquant sur le boutton "fermer", ceci annule les changements apportés Mettre une légende sous une image dans une popup [ par Chris31000 ] Bonjour, J'utilise un script pour ouvrir une image en taille réelle dans une popup en cliquant sur une miniature. J'aimerais qu'une légende puisse êtr galerie simple avec image grossissante au survol et replacement auto [ par The Pooh ] Bonjour à tous. peut être que ce topic existe déjà (cela ne m'étonnerai pas :) mais je ne lai pas trouvé. Voilà j'ai ce script avec ses variable que problème de vieux script avec autres navigateurs [ par Joce1605 ] Bonjour à tous, je cherche de l'aide. J'ai trouvé unvieus script sur le web qui ne fonctionne que sous IE, serait-il possible de l'adapter pour tous l


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,577 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales