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

bergeat
|
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
|
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
|
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
|
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
|
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
|
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
Livres en rapport
|
Derniers Blogs
JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|